Question

好的，所以我理解基本的javascript，我正在尝试制作一个音板类型的应用程序。我有页面上的按钮，但第二个按钮是拉动第一个按钮的音频文件。我尝试将按钮放在不同的段落，div和其他一些东西中，但是当不同的音频文件被链接时，两个按钮都播放完全相同的声音。请帮忙！

<!DOCTYPE HTML>
<html>
<head>
<title>Audio</title>
</head>
<body>

<script>
    function play() {
       var audio = document.getElementById("audio");
       audio.play();
    }
</script>

<input type="button" value="PLAY"  onclick="play()">
<audio id="audio" src="audio/semipro.MP3" ></audio>

<input type="button" value="PLAY 2"  onclick="play()">
<audio id="audio" src="audio/hit.MP3" ></audio>


</body>
</html>

Answer 1

您不应该有两个具有相同ID的元素，它们应该始终是唯一的。

建议：您的play方法可以使用id参数，该参数应与按钮应播放的id标记中的参数audio相同。

可能的解决方案：

<!DOCTYPE HTML>
<html>
<head>
<title>Audio</title>
</head>
<body>

<script>
function play(element){
   var audio = document.getElementById(element);
   audio.play();
             }
</script>

<input type="button" value="PLAY"  onclick="play('audio1')">
<audio id="audio1" src="audio/semipro.MP3" ></audio>

<input type="button" value="PLAY 2"  onclick="play('audio2')">
<audio id="audio2" src="audio/hit.MP3" ></audio>



</body>
</html>

Answer 2

不要使用重复的ID。您只需要一个音频元素就可以在点击功能中更改src属性。输入元素也应该只在表单中，而是使用按钮元素：

<!--HTML-->
<audio id="audio"></audio>
<button onclick="play('file1.mp3')">Play Sound 1</button>

<button onclick="play('file2.mp3')">Play Sound 2</button>

-

//JS
function play(sound){
    var audio = document.getElementById("audio");
    audio.setAttribute('src', sound);
    audio.play();
}

工作示例：http://jsfiddle.net/Nillervision/et2tb7e0/

Answer 3

一个 ID 对于 HTML 页面中的每个元素都是唯一的。不要为两个不同的元素提供一个 ID。您可以拥有相同的类，但不能拥有相同的 ID。

使用Javascript创建多个按钮，单击时将播放声音

3 个答案: