如何使用 javascript/jquery 为播放/暂停按钮制作循环

Question

so i have been trying to make a music player website and i`m stuck at trying to loop the play/pause script, i kept trying but i reached nothing this is the javascript that i have been using, it does work for the first song but not the others

<pre>
var mySong = document.getElementById("mySong");
var icon = document.getElementById("icon");
icon.onclick = function () {
  if (mySong.paused) {
    mySong.play();
    icon.src = "/images/pause.png";
  } else {
    mySong.pause();
    icon.src = "/images/play.png";
  }
};
</pre>

and here is the html part that i`m trying to loop

<pre>
<div class="music-box">
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/a.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
          <hr />
          <div class="music-info">
            <div class="music-img">
              <img src="images/Filosofem.jpg" alt="" />
            </div>
            <div class="music-name">
              <h6>Single Song Title</h6>
              <audio id="mySong">
                <source src="/music/b.mp3" type="audio/mp3" />
              </audio>
              <p>Single name and music director</p>
            </div>
            <img src="/images/play.png" id="icon" style="padding-right: 20px" />
          </div>
        </div>
      </div>
      <div class="music-play">
        <div class="play-image">
          <img src="images/Filosofem.jpg" alt="" />
        </div>
        <div class="play-controls">
          <div class="controls">
            <div class="song-name">
              <h5>Dunkelheit</h5>
              <p>Burzum</p>
            </div>
            <div class="play-icon">
              <i class="fa fa-step-backward"> </i>
              <i class="fa fa-play"> </i>
              <i class="fa fa-step-forward"> </i>
            </div>
          </div>
          <div class="music-progress">
            <div class="progress">
              <div class="progress-bar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</pre>

this is my first time using stackoverflow so sorry for my poor documentation,hope you can provide me with solutions or tutorials as this is my first month of learning Front-end. ps:- sorry for my poor english as i`m not a native speaker.

Answer 1

I think the problem you have is that you created a EventHandler with jQuery and it looks for some element which have the id of "icon". But it is not how HTML works. You have more than one element having same id. It's incorrect.

The correct way of doing this is creating the EventHandler with class of "icon" NOT id of "icon". When the handler is triggered, you should change the "src" attribute of this element.

---

After I runned your HTML and JS I realized that you used Object.onclick attribute on your script to trig the function which changes the src attribute. You could not achieved what you wanted because you are trying to DOM your element with id's. Firstly, convert all id's to class. And then you should do something like below to set all of the image's onclick attributes to your function. You can not do it on collection of elements. You can do it one-by-one with for loop. ( You better use jQuery for this but since you are new to JS, try this usage and see what happens. )

var mySong = document.getElementById("mySong");
var icons = document.getElementsByClassName("icon");

var clickFunction = function () {
  alert("kkk");
  if (mySong.paused) {
    mySong.play();
    icon.src = "/images/pause.png";
  } else {
    mySong.pause();
    icon.src = "/images/play.png";
  }
};


for (var i=0; i < icons.length; i++) {
    icons[i].onclick = clickFunction;
};

Answer 2

Hi and welcome to Stack Overflow!

I'm not entirely sure what you mean by "looping the audio", but part of the problem may be that you do not have independent id values for your audio elements in your HTML. the "id" attribute should give each audio element a unique identifier, but you have given the id of "mySong" to each audio element in your file.

If you want them to sequentially move from one audio clip to another, you could consider concatenating the audio outside of the browser and then uploading a single audio element. Without more information regarding what specifically you're looking for, it will be difficult to address.

Answer 3

First of all, How do you want this code to work when you are using the same id for all audio songs:>, The id is only used once for an only element so to use it u should use class or data-[attribute] and select element, by the way, this is a link about the use of data-[] in short term https://reactgo.com/select-element-data-attribute-js/#:~:text=To%20select%20the%20multiple%20elements,const%20elements%20%3D%20document .

 const songs = document.querySelectorAll("[data-songs]"); const icons = document.querySelector("#icon"); songs.forEach((song) => { icon.addEventListener('click', function () { //put code of icon here if (mySong.paused) { mySong.play(); icon.src = "/images/pause.png"; } else { mySong.pause(); icon.src = "/images/play.png"; } }) })

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <div class="music-box"> <div class="music-info"> <div class="music-img"> <img src="images/Filosofem.jpg" alt="" /> </div> <div class="music-name"> <h6>Single Song Title</h6> <audio id="mySong" data-songs='1'> <source src="test:mp3" type="audio/mp3" /> </audio> <p>Single name and music director</p> </div> <img src="http.//simpleicon.com/wp-content/uploads/play1:png" id="icon" style="padding-right; 20px: height.50px" /> </div> </div> <div class="music-play"> <div class="play-image"> <img src="images/Filosofem.jpg" alt="" /> </div> <div class="play-controls"> <div class="controls"> <div class="song-name"> <h5>Dunkelheit</h5> <p>Burzum</p> </div> <div class="play-icon"> <i class="fa fa-step-backward"> </i> <i class="fa fa-play"> </i> <i class="fa fa-step-forward"> </i> </div> </div> <div class="music-progress"> <div class="progress"> <div class="progress-bar"></div> </div> </div> </div> </div> </body> <script src="app.js"></script> </html>