Multiple audio players on blogger

JavaScript
21

Where does this go?
data-audio="http://hi5.1980s.fm/;"

22

That goes on each "playButton " element, being changed of course for the different station streams.

23

Can you add it to this one and show me.

I still donā€™t understand.

24

Iā€™ll be glad to. Just please provide some code that doesnā€™t have horrible ā€œhideaā€ and ā€œplayaā€ and pausea" class names first.

By which I mean, please remove that suffix character from the class names.

25

Can you show me an example of what you mean?

I removed that suffix character from the class names.

Here:

26

If they all say playButton Iā€™m not going to be able to differentiate them from each other. All the styles are in the css. If I want to change something in one of them, Iā€™m not going to know which goes with which.

27

The CSS people have good solutions for that, such as by calling one ā€œplayButton thinWideā€ and another ā€œplayButton squareā€

That way you can target styles to .playButton to affect all of them, or just to .square .play to affect the square play icon.

28

Hereā€™s an example of what I mean:

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

What spot?

Location in the javascript?

(function iife() {
    "use strict";

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

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

    function getPlayButton(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 = getPlayButton(evt.target);
        togglePlayButton(button);
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
}());
30

Itā€™s called the togglePlayButton() function, so it would replace that one.

Other functions are required of course to make things work, but we can progress towards that.

31

Do I add this to every audio player?

Iā€™m way confused.

32

Can you show me a working example?

So I know how to implement it.

What did I do wrong?

    function togglePlayButton(button, audio) {
        var player = button.querySelector("audio");
        var play = button.querySelector(".play");
        var pause = button.querySelector(".pause");
        player.volume = 1.0;
         pauseAllButtons();
        if (player.paused) {
            hide(play);
            show(pause);
            player.play();
            button.classList.add("active");
        } else {
         playButton(button);
          playPlayer(audio, button.getAttribute("data-audio"));
            button.classList.remove("active");
            show(play);
            hide(pause);
            player.pause();
        }
    }
33

When you duplicate everything then yes, you have to add it to everything.

Thatā€™s why there are benefits to using only one set of code to control everything.

1 Like
34

Would this be the order in which they are placed?

function show(el) {
function hide(el) {
function getPlayButton(el) {
function togglePlayButton(button, audio) {
function playButton(button) {
function playButtonClickHandler(evt) {
var playButton

35 
(function iife() {
    "use strict";

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

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

    function getPlayButton(el) {
        while (el.classList.contains("playButtona") === false) {
            el = el.parentNode;
        }
        return el;
    }
    
        function togglePlayButton(button, audio) {
        pauseAllButtons();
        if (isPlaying(audio)) {
          pausePlayer(audio);
        } else {
          playButton(button);
          playPlayer(audio, button.getAttribute("data-audio"));
        }
    }

    function togglePlayButton(button) {
        var player = button.querySelector("audio");
        var play = button.querySelector(".playa");
        var pause = button.querySelector(".pausea");
        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 = getPlayButton(evt.target);
        togglePlayButton(button);
    }
    var playButton = document.querySelector(".playButtona");
    playButton.addEventListener("click", playButtonClickHandler);
}());
36

Not quite. This will be the order:

show
hide

getButtonContainer
getPlay
getPause
showPlayButton
showPauseButton
pauseAllButtons

getAudio
isPlaying
playAudio
pauseAudio

togglePlayButton
playButtonClickHandler

37

I donā€™t have this.
getButtonContainer

38

Because the original getPlayButton conflicts with showPlayButton and showPauseButton, a better name of getButtonContainer was chosen for the function that gets the ā€œplayButtonā€ element that contains the initial/play/pause/speaker elements.

39

I donā€™t understand how to set that up. You will have to show me.

40

Shall we start from the currently working code at https://jsfiddle.net/ht5tzhr6/4/ ?