Multiple audio players on blogger

JavaScript
41

This?

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

No, “playButtona” is bad.

43

I thought you were going to show me a jsfiddle with it set up correctly?

44

Certainly not - that would remove all opportunities for learning to occur.
I will happily though help you to code this up yourself.

1 Like
45

getPlay
getPause

means what?

46

The getPlay() function accepts a parameter of button, and returns the play icon inside of that button.
The getPause() works in a similar way.

47

I don’t understand any of this.

show
hide

getButtonContainer
getPlay
getPause
showPlayButton
showPauseButton
pauseAllButtons

getAudio
isPlaying
playAudio
pauseAudio

togglePlayButton
playButtonClickHandler

48

What do I do next?

(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 togglePlayButton(button) {
        var player = button.querySelector("audio");
        var play = button.querySelector(".play");
        var pause = button.querySelector(".pause");
        player.volume = 1.0;
        if (player.paused) {
            hide(play);
            show(pause);
            player.play();
            button.classList.add("active");
        } else {
            button.classList.remove("active");
            show(play);
            hide(pause);
            player.pause();
        }
    }

    function playButtonClickHandler(evt) {
        var button = getButtonContainer(evt.target);
        togglePlayButton(button);
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
}());
49

You know these functions already:

  • show
  • hide
  • togglePlayButton
  • playButtonClickHandler

Here’s what these other ones do.

  • getButtonContainer - gives the “playButton” element from a given starting point somewhere within it
  • getPlay - gets a reference to the play icon element
  • getPause - gets a reference to the pause icon element
  • showPlayButton - shows the play icon, and hides the pause icon
  • showPauseButton - shows the pause icon, and hides the play icon
  • pauseAllButtons - finds all the pause icons and shows them all

Then we have audio-related functions for the player itself

  • getAudio - gets a reference to the <audio> element
  • isPlaying - checks if the audio element is playing
  • playAudio - changes the src on the audio element if it’s different, and plays it
  • pauseAudio - pauses the audio element
50

Am I doing all this to accommodate this code?

Meaning, if I wasn’t using this code, I wouldn’t be making any changes.

I just want to make sure I have this correct, and we’ll continue.

        function togglePlayButton(button, audio) {
        pauseAllButtons();
        if (isPlaying(audio)) {
          pausePlayer(audio);
        } else {
          playButton(button);
          playPlayer(audio, button.getAttribute("data-audio"));
        }
51

Nope, most of those functions make your existing code easier to understand and work with, as well.

Most of those functions aren’t needed for the changes to occur, but without those functions the changes become much harder to understand.

52

Did I do this right?

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

it’s not possible to give an answer to that without seeing how it’s being used.

54
55

All I did was change the name.

Was I supposed to do that?

 function getPlayButton(el) {
        while (el.classList.contains("playButton1") === false) {
            el = el.parentNode;
        }
        return el;
    }
56

Now I can answer that it’s been done right.

57

Can you put together instructions on how to set up all the new stuff?

or, are instructions not needed?

58

Well the main code piece is:

    function togglePlayButton(button, audio) {
        pauseAllButtons();
        if (isPlaying(audio)) {
          pauseAudio(audio);
        } else {
          showPlayButton(button);
          playAudio(audio, button.getAttribute("data-audio"));
        }
    }

We could modify your existing code so that it at a minimum, uses the functions that are shown here.

59

Is all of that, this?

getPlay - gets a reference to the play icon element
getPause - gets a reference to the pause icon element
showPlayButton - shows the play icon, and hides the pause icon
showPauseButton - shows the pause icon, and hides the play icon
pauseAllButtons - finds all the pause icons and shows them all

Then we have audio-related functions for the player itself

getAudio - gets a reference to the

60

No, it’s only about half of that.
The other half of the functions make the code easier to read.

For example, the pauseAudio line only has one line in the function, but because the playAudio function is required and more complex, having a matching pauseAudio function makes it easier to see that they are both directly related.