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

【问题标题】：how to make a loop for a play/pause button using javascript/jquery如何使用 javascript/jquery 为播放/暂停按钮制作循环
【发布时间】：2022-01-06 08:47:35
【问题描述】：

所以我一直在尝试制作一个音乐播放器网站，但我一直在尝试循环播放/暂停脚本，我一直在尝试，但我一无所获这是我一直在使用的 javascript，它适用于第一首歌曲，但不适用于其他歌曲

<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>

这是我试图循环的 html 部分

<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>

这是我第一次使用 stackoverflow，对于我糟糕的文档感到抱歉，希望您可以为我提供解决方案或教程，因为这是我学习前端的第一个月。 p.s:- 抱歉我的英语不好，因为我不是母语人士。

【问题讨论】：

标签： javascript html jquery loops

【解决方案1】：

首先，当您对所有音频歌曲使用相同的 id 时，您希望此代码如何工作：>，该 id 仅用于唯一元素一次，因此要使用它，您应该使用 class 或 data- [attribute] 和 select 元素，顺便说一下，这是一个关于短期使用 data-[] 的链接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.querySelectorAll("[data-icon]");

songs.forEach((song, index) => {

    icons[index].addEventListener('click', function () {
        songs.forEach(song => {
            song.pause();
        })
        //put code of icon here 
        if (song.paused) {
            song.play();
            // icon.src = "/images/pause.png";
        } else {
            song.pause();
            // icon.src = "/images/play.png";
        }
    })
})

<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" data-icon="1" style="padding-right: 20px;
            height:50px" />
        </div>
        <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='2'>
                    <source src="test2.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" data-icon="2" 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>

【讨论】：

我尝试了您的代码，它适用于一首歌曲，但是当我尝试使用数据歌曲方法运行多首歌曲时，没有任何反应，我尝试控制台记录它，它显示所有 12当我单击第一个按钮时，歌曲同时被触发，但是所有其他 11 个按钮都不会做任何事情，所以它可能与#id
我编辑它是因为我忘记更改图标的代码，所以它知道工作正常，试试吧
谢谢你，我永远不会忘记你的帮助。
乐于帮助我的朋友?❤

【解决方案2】：

您好，欢迎来到 Stack Overflow！

我不完全确定您所说的“循环播放音频”是什么意思，但部分问题可能是您的 HTML 中的音频元素没有独立的 id 值。 “id”属性应该为每个音频元素提供一个唯一标识符，但您已为文件中的每个音频元素提供了“mySong”的 ID。

如果您希望它们按顺序从一个音频剪辑移动到另一个，您可以考虑在浏览器外部连接音频，然后上传单个音频元素。如果没有关于您正在寻找的具体内容的更多信息，将很难解决。

【讨论】：

【解决方案3】：

我认为您遇到的问题是您使用 jQuery 创建了一个 EventHandler，它会查找一些 id 为“icon”的元素。但这不是 HTML 的工作方式。您有多个具有相同 ID 的元素。这是不正确的。

这样做的正确方法是使用 class 的“icon”NOT id 的“icon”创建 EventHandler。触发处理程序时，您应该更改此元素的“src”属性。

在我运行您的 HTML 和 JS 之后，我意识到您在脚本中使用了 Object.onclick 属性来触发更改 src 属性的函数。您无法实现您想要的，因为您正在尝试使用 id 对您的元素进行 DOM。首先，将所有 id 转换为 class。然后您应该执行以下操作，将图像的所有 onclick 属性设置为您的函数。你不能在元素集合上做到这一点。您可以使用 for 循环一一进行。（你最好使用 jQuery，但由于你是 JS 新手，试试这个用法看看会发生什么。）

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;
};

【讨论】：

我试过这个<pre> var mySong = document.getElementsByClassName("mySong"); var icon = document.getElementsByClassName("icon"); for (var i = 0; i < icon.length; i++) { icon.onclick = function () { if (mySong.paused) { mySong.play(); icon.src = "/images/pause.png"; } else { mySong.pause(); icon.src = "/images/play.png"; } }; } </pre> 但什么也没发生
这也是我做的第一件事，但是由于 document.getElementsByClassName 返回了一个元素集合，你应该像我一样创建一个 for 循环来将每个元素的 onclick 属性设置为你的函数。跨度>
首先我想说谢谢你的帮助现在我所有的按钮都在播放一首歌第二个剩下的唯一问题是它们都在播放同一首歌，所以就像我按下播放的按钮一样第一首歌曲现在所有按钮都将继续播放同一首歌曲，但是当我刷新并按下另一个按钮时，另一首歌曲成为在所有按钮上重复播放的歌曲等等，这可能与“mySong”这一事实有关是一个ID和类，关于如何改变它的任何想法？以便每个按钮播放不同的歌曲
很高兴听到它成功了！由于这是另一个问题，请通过批准我的答案来关闭此问题，然后使用您的代码和问题的更新版本创建另一个问题。最好让 StackOverflow 保持干净和易于理解，以免别人只是在谷歌上搜索并看到您的问题。