How do I make a single Javascript script for multiple play/pause buttons on a single webpage?

Question

I have found three possible scripts for Play/Pause buttons for audio for my web page. I only want to show Play/Pause buttons, not the Stop button, by the way. I want to hide the controls that come with the default Audio HTML5 media element. The scripts work well as they are supposed to. The problem is that I want to make one script work for multiple Play/Pause buttons (multiple sound files) on my webpage. I plan to have lots of audios on my page and don't want to include lots of Javascript scripts on the one page - just one script for all the buttons.

One script is javascript. However, it only works for one Play/Pause button, not for multiple ones.
Another script is jQuery. However, it only works for one Play/Pause button too.
The third script is javascript. It does work for different Play buttons on the page. The problem is there is no pause function in that script.

I have been trying different combinations, trying to insert the Pause function into the script that works for multiple buttons, also trying to adapt the single button scripts so that they work for multiple buttons, but with no success. I have only started learning coding around a month ago so if I am pretty much a novice. HTML is this: There are two different HTMLs because they work with different scripts. The second one is shown further down below.

First script (JavaScript, works for a single Play/Pause button but not for multiple buttons):

 function initAudioPlayer2() {
   audio2 = new Audio();
   audio2.src = "2b.mp3";
   playbtn2 = document.getElementById("playpausebtn2");
   playbtn2.addEventListener ("click", playPause);  
   audio2.addEventListener ("ended", myFunction);
 
   function playPause(){
        if (audio2.paused){
            audio2.play();
            playbtn2.style.background = "url(images/pause.png) no-repeat";
            } else {
            audio2.pause();
            playbtn2.style.background = "url(images/play.png) no-repeat";
            }           
   }
  audio2.addEventListener ("ended", myFunction); 
 function myFunction() {
        playbtn2.style.background = "url(images/play.png) no-repeat";
   }        
 }
 window.addEventListener("load", initAudioPlayer2);

Second script (jQuery, works for single Play/Pause button but not for multiple buttons):

var audio=new Audio("2e.mp3");

$('#play-pause-button').on("click",function(){
  if($(this).hasClass('fa-play'))
   {
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio.play();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.pause();
   }
});

audio.onended = function() {
     $("#play-pause-button").removeClass('fa-pause');
     $("#play-pause-button").addClass('fa-play');
};

Third script (Javascript, works for multiple buttons but no pause function, has only the play function):

function playAudio(el) {
  var audio = document.getElementById('audio');
  var source = el.getAttribute('data-src');
  audio.src = source;
  audio.play();
}

The associated html is:

All three scripts work as they are supposed to, but they do not fulfil my requirements completely. The first two can only be used for one button so I have to write a new script for each button; the last one works for multiple buttons/multiple audios but it doesn't show a Pause button, and I need a Pause button. Note that I do not need a single Audio Player on my webpage playing different tracks. I have found scripts to make that but this does not suit me. I plan to have multiple Play/Pause buttons all over my web page, each playing a different short audio. I don't know the exact number of sound files but there will be lots.
The Play/Pause buttons are not separate from each other. The Play button is replaced by the Pause button when the sound starts playing, and the Pause button is replaced by the Play button when the sound stops playing or the audio is paused.

user_9305895 · Answer

What you want is create a class and make each player an instance of that class. Something like this should work (did not try it, comment if you find mistake):

class AudioPlayer {
    audio = null;
    playBtn = null;
    
    constructor(src, elementId) {
        this.audio = new Audio();
        this.audio.src = src;
        this.playBtn = window.getElementById(elementId);
        registerEvents();
    }
    
    registerEvents() {
        this.playBtn.addEventListener("click", this.playPause);
        this.audio.addEventListener("ended", this.myFunction);
    }
    
    playPause(){
        if (this.audio.paused){
            this.audio.play();
            this.playBtn.style.background = "url(images/pause.png) no-repeat";
        } else {
            this.audio.pause();
            this.playBtn.style.background = "url(images/play.png) no-repeat";
        }
    }

    myFunction() {
        this.playBtn.style.background = "url(images/play.png) no-repeat";
    }
    
}

window.addEventListener("load", ()=> {
    var player1 = new AudioPlayer("1b.mp3", "playpausebtn1");
    var player2 = new AudioPlayer("2b.mp3", "playpausebtn2");
    var player3 = new AudioPlayer("3b.mp3", "playpausebtn3");
});

user_10968134 · Answer

Very small and hopefully understandable example of what you want

Example 1:

function playAudio(x) {
    var y = x.parentElement.querySelector('audio');
    var z = x.getAttribute('class');

    if (z === 'play') {
        y.play();
        x.setAttribute('class', 'pause');
    } else {
        y.pause();
        x.setAttribute('class', 'play');
    }

    y.onended = function () {
        x.setAttribute('class', 'play');
    }
}

.play,
.pause {
    width: 100px;
    height: 100px;
    border: 0px;
}

.play {
    background: url('https://www.freeiconspng.com/uploads/video-play-icon-15.gif') no-repeat center / 100%;
}

.pause {
    background: url('https://www.freeiconspng.com/uploads/pause-icon-19.png') no-repeat center / 100%;
}

Example 2:

In this example, if audio is started and you start another audio ... all others will be stopped and only the last clicked will be played.

function playAudio(x) {
    var y = x.parentElement.querySelector('audio');
    var z = x.getAttribute('class');

    if (z === 'play') {
        var allAudio = document.querySelectorAll('audio');
        for (var i = 0; i < allAudio.length; i++) {
            allAudio[i].pause();
        }

        var allButtons = document.querySelectorAll('.pause');
        if (allButtons) {
            for (var i = 0; i < allButtons.length; i++) {
                allButtons[i].setAttribute('class', 'play');
            }
        }

        y.play();
        x.setAttribute('class', 'pause');

        y.onended = function () {
            x.setAttribute('class', 'play');
        }
    } else {
        y.pause();
        x.setAttribute('class', 'play');
    }
}

.play,
.pause {
    width: 100px;
    height: 100px;
    border: 0px;
}

.play {
    background: url('https://www.freeiconspng.com/uploads/video-play-icon-15.gif') no-repeat center / 100%;
}

.pause {
    background: url('https://www.freeiconspng.com/uploads/pause-icon-19.png') no-repeat center / 100%;
}

How do I make a single Javascript script for multiple play/pause buttons on a single webpage?

2 Answers