CODEWITHSUNDEEP
javascripthtmlaudio
Victor Gasior
Victor Gasior

Reputation: 1

Pausing another song when starting another javascript

I'm trying to make it so that when you click on a separate element it pauses the current song playing from a different element. In addition I had previously made it so when you click on the same element after it started playing audio it would pause that audio, but when you click on a different element with the same function it breaks.

var paused = true;
var song;
var songPlaying;

function playSong(x) {
     song = x;

     if(songPlaying != song){
         document.getElementById(songPlaying).pause();
     }

     if(paused == true){
         document.getElementById(song).play();
         paused = false;
         songPlaying = song;
     } else {
         document.getElementById(song).pause();
         paused = true;
     }
 }

Is there anyway I can fix this? Will I have to make a different function for every song?

EDIT 1: Here the HTML my for the sections I'm using as well, each audio file has an ID that is called as a parameter in the function inside onclick

<div class="album">
    <img src="assets/BattalionsOfFear.png" onclick="playSong('bofSong')">
    <h1>Battalions of Fear</h1>
    <p>Released in 1988</p>
</div>

<div class="album">
    <img src="assets/FollowTheBlind.png" onclick="playSong('bfsSong')">
    <h1>Follow the Blind</h1>
    <p>Released in 1989</p>
</div>

<!--- Audio -->
<audio id="bofSong">
    <source src="assets/BattalionsOfFear.mp3">
</audio>

<audio id="bfsSong">
    <source src="assets/BanishFromSanctuary.mp3">
</audio>

EDIT 2: In attempting Laif's solution I have tried adding the 'song' class to my HTML img elements and linked it to my audio element with the 'song1' class yet it still is not working. Am I doing the classes wrong or is it something with the way I have put them down?

<div class="album">
    <img src="assets/BattalionsOfFear.png" class="song song1">
    <h1>Battalions of Fear</h1>
    <p>Released in 1988</p>
</div>

<audio id="bofSong" class="song1">
    <source src="assets/BattalionsOfFear.mp3">
</audio>

Upvotes: 0

Views: 290

Answers (1)

Libra
Libra

Reputation: 2595

Each song should share the same class so that you can do something like this:

<html>
    <div class="song"></div>
    <div class="song"></div>
</html>

var songs = document.querySelectorAll(".song");

function playSong(e) {
  songs.forEach(el => {
    el.style.play();
  });
  e.currentTarget.pause();
};

songs.forEach(el => {
  el.addEventListener("click", playSong);
});

Upvotes: 1

Related Questions