samedi 18 août 2018

Ways to make stop audio and play new one while it's playing by clicking the text

I linked between each of the musics and texts to make simple music player like this;

  txt        audio
song1 - music1
song2 - music2
song3 - music3
song4 - music4

And what I want to make it is, if I click song1 while song2 is playing, stop song2 and play song1 from the beginning. If I click song3 while song4 is playing, stop song4 and playing song3 just like a real music player.

Sorry for my dumb question and would be great if I have some tips from here.

        function playbutton1() {
          let song1 = document.getElementById("music1");
          count++;
          if (count % 2 == 0) {
            song1.pause();
          } else {
            song1.play();
          }
        }
        function playbutton2() {
          let song2 = document.getElementById("music1");
          count++;
          if (count % 2 == 0) {
            song2.pause();
          } else {
            song2.play();
          }
        }
        function playbutton3() {
          let song2 = document.getElementById("music3");
          count++;
          if (count % 2 == 0) {
            song3.pause();
          } else {
            song3.play();
          }
        }
        .
        .
        .
        song1.addEventListener("click", playbutton1);
        song2.addEventListener("click", playbutton2);
        song3.addEventListener("click", playbutton3);
    <audio id="music1">
      <source src="song1.mp3" type="audio/mpeg">
    </audio>
    <audio id="music2">
      <source src="song2.mp3" type="audio/mpeg">
    </audio>
    <audio id="music3">
      <source src="song3.mp3" type="audio/mpeg">
    </audio>
    <audio id="music4">
      <source src="song4.mp3" type="audio/mpeg">
    </audio>
    .
    .
    .

Aucun commentaire:

Enregistrer un commentaire