为什么我不能在一个 HTML 页面中使用多个播放/暂停按钮？答案

【问题标题】：Why can not I use many play/pause buttons in one HTML page?为什么我不能在一个 HTML 页面中使用多个播放/暂停按钮？
【发布时间】：2017-01-28 15:54:14
【问题描述】：

在这个W3C 教程中，我可以制作音频播放/暂停按钮。但是当我在一页中放置许多按钮时。所有按钮播放相同的音轨。它只是第一个按钮的音轨。我已经在所有按钮中多次更改了音频 src 的链接，但我仍然遇到同样的问题。

我知道答案很简单，但我不知道。问题是由于变量 my 还是由于函数或其他原因？

非常感谢，

我使用下面的代码来创建一个按钮：

<audio id="myAudio" preload="none"
    <audio id="myAudio"

 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" onclick="aud_play_pause()">Play/Pause</button>
<script>
function aud_play_pause() {
  var my

Audio = document.getElementById("myAudio");   if (myAudio.paused) {
    myAudio.play();   } else {
    myAudio.pause();   } }

</script>

【问题讨论】：

标签： html button audio

【解决方案1】：

你不能使用多个元素同一个id：

<audio id="myAudio" ...
<audio id="myAudio" ...

毕竟，当你得到那个元素时，你希望使用哪一个？：

document.getElementById("myAudio")

为您的元素使用不同的id 值。

<audio id="myFirstAudio" ...
<audio id="mySecondAudio" ...

并通过单独标识它们来获取对它们的引用：

var myFirstAudio = document.getElementById("myFirstAudio");
var mySecondAudio = document.getElementById("mySecondAudio");
// etc.

【讨论】：

【解决方案2】：

如果您有不同的音频文件，则必须为每个文件创建一个具有不同 ID 的音频对象，然后使用您的按钮处理这些 ID。

<audio id="myAudio1" preload="none" 
    ...>
</audio>
<audio id="myAudio2" preload="none"
    ...>
</audio>
<audio id="myAudio3" preload="none"
    ...>
</audio>

【讨论】：