How would I be able to implement that here?
How it would work: You would press the blue play image and then one of the buttons would start playing.
How would I be able to do that here?
That is all I am trying to do.
Is this something that can be done?
It's asking me to provide more info but that is everything.
https://jsfiddle.net/b9rxf7cj/
(function manageCoverb() {
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
const theplay = cover.parentElement.querySelector(".playa");
hide(theplay);
const thewrap = cover.parentElement.querySelector(".containerb");
show(thewrap);
}
const cover = document.querySelector(".playb");
cover.addEventListener("click", coverClickHandler);
}());
(function initPlayButtons() {
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function getPlay(button) {
return button;
}
function showPlayButton(button) {
button.classList.remove("active");
}
function isPlaying(button) {
const play = getPlay(button);
return play.classList.contains("active");
}
function pauseAllButtons() {
let buttons = document.querySelectorAll(".playButton");
buttons.forEach(function hidePause(buttons) {
if (isPlaying(buttons)) {
showPlayButton(buttons);
}
});
}
function showPauseButton(button) {
pauseAllButtons();
button.classList.add("active");
}
function getAudio() {
return document.querySelector("audio");
}
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
function showButton(button, opts) {
if (opts.playing) {
showPlayButton(button);
} else {
showPauseButton(button);
}
}
function pauseAudio(player) {
player.pause();
}
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
playAudio(player, opts.src);
}
}
function playButton(button) {
const player = getAudio();
const playing = isPlaying(button);
showButton(button, {
playing
});
manageAudio(player, {
playing,
src: button.getAttribute("data-audio")
});
}
function playButtonClickHandler(evt) {
const button = getButtonContainer(evt.target);
playButton(button);
}
const playButtons = document.querySelectorAll(".button");
playButtons.forEach(function addHandler(el) {
el.addEventListener("click", playButtonClickHandler);
});
}());
Aucun commentaire:
Enregistrer un commentaire