SOLVED: Trying to get this toggle audio player to work

Here is a working toggle audio player
https://jsfiddle.net/sw0ot32z/

I would like to have that audio player work with this toggle button.

How would I get it to working using mostly the same javascript setup as the 1st player?

I want to keep most of the javascript from the 1st code.
The 1st code is a toggle player, I would like to use that audio javascript for the toggle button.

Removing what isn’t needed or necessary to keep in the code. Meaning, removing a piece of code won’t break it.

<audio></audio>

<div class="       " data-audio="          ">

Working button code:

https://jsfiddle.net/vsb9u40g/

Placing the css and html of code 2 into the 1st code

I got this far:

I am trying to get the code working here.

https://jsfiddle.net/a3x1Lt56/

The audio is only going on and not off, when it is clicked on.

Also, the button is not changing, from off to on.

I don’t know what else has to be changed in the code for it to work.

Hey javascriptcoding5678,

I would recommend that you do use code from the internet if you are not sure how it works.

You will just create a lot of problems for yourself if you do that.

But we can help you to understand the code if you have some specific questions about it.

best
Dennis

1 Like

What I want to do is put the switchButton code inside the 1st code ?

That is what I am trying to do.

Is this achievable?

I want to keep as much of the code in code 1 intact as possible.

How would this be done, what would the first steps be?

Would it be easier, getting the 2nd code to work by itself first, then after that is done, then placing it in code 1.

Would that be the way to do it?

Placing the css and html of code 2 into the 1st code I get this error.

Uncaught TypeError: Cannot read property ‘classList’ of null"

https://jsfiddle.net/Lbf0qe14/

I was able to get the audio playing when it is clicked on.

But the button is not changing.

https://jsfiddle.net/jb0nxcef/5/

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function getButtonContainer(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }

  function hideAllButtons(button) {
    const buttons = button.querySelectorAll(".play, .pause");
    for (let i = 0; i < buttons.length; i++) {
      /* hide(buttons[i]);*/
    }
  }

  function getPlay(button) {
    return button.querySelector(".play");
  }

  function getPause(button) {
    return button.querySelector(".pause");
  }

  /* function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
   }*/

  function isPlaying(button) {
    const play = getPlay(button);
    /* return play.classList.contains("active");*/
  }

  function pauseAllButtons() {
    let buttons = document.querySelectorAll(".playButton");
    for (let i = 0; i < buttons.length; i++) {
      if (isPlaying(buttons[i])) {
        /*     showPlayButton(buttons[i]);*/
      }
    }
  }

  function showPauseButton(button) {
    const pause = getPause(button);
    /* pauseAllButtons();
     hideAllButtons(button);
     show(pause);*/
    /* 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 togglePlayButton(button) {
    const player = getAudio();
    const playing = isPlaying(button);
    /*showButton(button, {
      playing
    });*/
    manageAudio(player, {
      src: button.getAttribute("data-audio"),
      playing
    });
  }

  function playButtonClickHandler(evt) {
    const button = getButtonContainer(evt.target);
    togglePlayButton(button);
  }

  const playButton = document.querySelector(".wrapa");
  playButton.addEventListener("click", playButtonClickHandler);
}());

Your selectors are not correct. The only change you need to make is .wrapa.active instead of .switch.on the rest of the descendant selectors should be the same as in the example you posted.

I removed switch in here, didn’t I?

https://jsfiddle.net/jb0nxcef/5/

I don’t understand what you are referring to.

Removing unnecessary or not needed code from code 1.

I got up this far.

I am trying to get the code working here.

https://jsfiddle.net/cbz4ry90/1/

The audio is only going on and not off,

Also, the button is not changing, from off to on.

I don’t know what else has to be changed in the code for it to work.

(function iife() {
  "use strict";

  /*
    function show(el) {
      el.classList.remove("hide");
    }

    function hide(el) {
      el.classList.add("hide");
    }*/

  function getButtonContainer(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }

  /*function hideAllButtons(button) {
    const buttons = button.querySelectorAll(".play, .pause");
    for (let i = 0; i < buttons.length; i++) {
      hide(buttons[i]);
    }
  }*/

  function getPlay(button) {
    return button.querySelector(".play");
  }

  function getPause(button) {
    return button.querySelector(".pause");
  }

  /* function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
   }*/

  function isPlaying(button) {
    const play = getPlay(button);
    /* return play.classList.contains("active");*/
  }

  /*function pauseAllButtons() {
    let buttons = document.querySelectorAll(".playButton");
    for (let i = 0; i < buttons.length; i++) {
      if (isPlaying(buttons[i])) {
            showPlayButton(buttons[i]);
      }
    }
  }*/

  /*function showPauseButton(button) {
    const pause = getPause(button);
     pauseAllButtons();
     hideAllButtons(button);
     show(pause);
     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 togglePlayButton(button) {
    const player = getAudio();
    const playing = isPlaying(button);
    /*showButton(button, {
      playing
    });*/
    manageAudio(player, {
      src: button.getAttribute("data-audio"),
      playing
    });
  }

  function playButtonClickHandler(evt) {
    const button = getButtonContainer(evt.target);
    togglePlayButton(button);
  }

  const playButton = document.querySelector(".wrapa");
  playButton.addEventListener("click", playButtonClickHandler);
}());

Why can’t I get it working?
https://jsfiddle.net/cbz4ry90/3/

It only goes on, not off.

and the button doesn’t change.

(function iife() {
  "use strict";

  const playButton = document.querySelector(".wrapa");
  /*
    function show(el) {
      el.classList.remove("hide");
    }

    function hide(el) {
      el.classList.add("hide");
    }*/

  function getButtonContainer(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }

  /*function hideAllButtons(button) {
    const buttons = button.querySelectorAll(".play, .pause");
    for (let i = 0; i < buttons.length; i++) {
      hide(buttons[i]);
    }
  }*/

  function getPlay(button) {
    return button.querySelector(".play");
  }

  function getPause(button) {
    return button.querySelector(".pause");
  }

  /* function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
   }*/
  function isPlaying(button) {
    const play = getPlay(button);
    return play.classList.contains("active");

  }

  /*function pauseAllButtons() {
    let buttons = document.querySelectorAll(".playButton");
    for (let i = 0; i < buttons.length; i++) {
      if (isPlaying(buttons[i])) {
            showPlayButton(buttons[i]);
      }
    }
  }*/

  /*function showPauseButton(button) {
    const pause = getPause(button);
     pauseAllButtons();
     hideAllButtons(button);
     show(pause);
     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 togglePlayButton(button) {
    const player = getAudio();
    const playing = isPlaying(button);
    /*showButton(button, {
      playing
    });*/
    manageAudio(player, {
      src: button.getAttribute("data-audio"),
      playing
    });
  }

  function playButtonClickHandler(evt) {
    const button = getButtonContainer(evt.target);
    togglePlayButton(button);
    playButton.classList.toggle("active");
  }

  playButton.addEventListener("click", playButtonClickHandler);
}());

Why can’t I get it to work?

What has to be fixed in the code?

I would concentrate on one issue at a time. Either get the button working first or the audio working first. Use console.log statements to verify that the arguments you are passing into methods are actually what you expect them to be.

1 Like

It’s working now.
https://jsfiddle.net/ac9q4nL5/

(function iife() {
  "use strict";

  function getButtonContainer(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentElement;
    }
    return el;
  }

  function getPlay(button) {
    return button;
  }

  function getPause(button) {
    return button;
  }

  function showPlayButton(button) {
    const play = getPlay(button);
    button.classList.remove("active");
  }

  function isPlaying(button) {
    const play = getPlay(button);
    return play.classList.contains("active");
  }

  function showPauseButton(button) {
    const pause = getPause(button);
    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 togglePlayButton(button) {
    const player = getAudio();
    const playing = isPlaying(button);
    showButton(button, {
      playing
    });
    manageAudio(player, {
      src: button.getAttribute("data-audio"),
      playing
    });
  }

  function playButtonClickHandler(evt) {
    const button = getButtonContainer(evt.target);
    togglePlayButton(button);
  }

  const playButton = document.querySelector(".wrapa");
  playButton.addEventListener("click", playButtonClickHandler);
}());

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.