如何使用 html javascript 将 2 3 首歌曲添加到网站

Question

我还是新手 我在学习，

如果你能帮助我不明白，我想在网站上添加 2 3 首歌曲我写了代码但只有 1 首歌曲有效 如何让所有歌曲播放 但不是同时，而是依次，

例如 我正在听音乐 1，然后我想听播放 2，当我按下播放 2 时，播放 1 应该停止 怎么做我不明白你能提前帮忙吗谢谢 我留下代码

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

icon.onclick = function() {
  if(mySong.paused){
      mySong.play();
      icon.src = "img/pause-icon.png";
  }else{
    mySong.pause();
    icon.src = "img/play-icon.jpg";
  }
}

<img src="img/play-icon.jpg" alt="" id="icon" width="80">

          <audio id="mySong">
            <source src="Ганвест - Кайфули.mp3" type="audio/mp3">
          </audio>

          <img src="img/play-icon.jpg" alt="" id="icon" width="80">

          <audio id="mySong">
            <source src="Ганвест - Кайфули.mp3" type="audio/mp3">
          </audio>

Answer 1

您需要唯一的 ID 或委托，然后您根本不需要 ID：

请注意，我将图标 id 更改为图标类，将每首歌曲包装在一个 div 中，并将所有歌曲也包装在一个 div 中

const icons = {
  play: "https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png",
  pause: "https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/play-pause.png"
}
const isPlaying = audioElement => !audioElement.paused;

const container = document.getElementById("songs");
const songs = container.querySelectorAll(".song audio");
const controls = container.querySelectorAll(".song .icon");

container.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.matches(".icon")) {
    const mySong = tgt.closest(".song").querySelector("audio");
    // pause all other songs
    songs.forEach((song,i) => {
      if (isPlaying(song) && song != mySong) {
        song.pause()
        controls[i].src=icons.play;
      }
    }); 
    if (mySong.paused) {
      mySong.play();
      tgt.src = icons.pause;
    } else {
      mySong.pause();
      tgt.src = icons.play;
    }
  }
})

<div id="songs">
  <div class="song">
    <img src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png" alt="Toggle" class="icon" width="80">

    <audio id="mySong1">
      <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3"></audio>
  </div>
  <div class="song">
    <img src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png" alt="Toggle" class="icon" width="80">

    <audio id="mySong2">
      <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mp3"></audio>
  </div>
</div>