Question

我尝试了这段代码，但是只播放一种声音。

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

     function play2(){
       var audio2 = document.getElementById("audio2");
       audio.play();
                 }           




   </script>

<img src="mages/ah.png" value="PLAY"  onclick="play()">
<audio id="audio" src="bgmusic.mp3" ></audio>
<img src="images/a.png" value="PLAY"  onclick="play()">
<audio id="audio2" src="war.ogg" ></audio>

我正在尝试为单击的不同图像播放不同的声音。

Answer 1

html

<img src="mages/ah.png" value="PLAY"  onclick="play()">
<audio id="audio" src="bgmusic.mp3" ></audio>
<img src="images/a.png" value="PLAY"  onclick="play()">
<audio id="audio2" src="war.ogg" ></audio>

javascript

var audio = document.getElementById("audio");
var audio2 = document.getElementById("audio2");
  function play(){

    audio.play();
    audio2.pause();
  }

  function play2(){
    audio.pause();
    audio2.play();
  }

Answer 2

您可以在函数play2中调用audio2.play（）并在图像onclick处理程序上调用play2（）

更新：可能无法在Safari中播放ogg文件

https://caniuse.com/#search=ogg

您所指的是不同的图像文件夹

并且img标签在规范https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element中没有'value'属性

Answer 3

更改了代码，请在单击图像时调用正确的功能，然后在该功能中播放正确的音频。

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

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

<img src="mages/ah.png" value="PLAY"  onclick="play()">
<audio id="audio" src="bgmusic.mp3" ></audio>
<img src="images/a.png" value="PLAY"  onclick="play2()">
<audio id="audio2" src="war.ogg" ></audio>

Answer 4

这里：

function play2() {
   var audio2 = document.getElementById("audio2");
   audio.play();
}

您声明了audio2，但您在玩audio。在这里：

<img src="mages/ah.png" value="PLAY"  onclick="play()">
<audio id="audio" src="bgmusic.mp3" ></audio>
<img src="images/a.png" value="PLAY"  onclick="play()">
<audio id="audio2" src="war.ogg" ></audio>

两个处理程序都调用play。您必须注意这些错别字，并检查每个错别字都调用正确的功能：play()或play2()。

另一种方法是将要获取源代码的标记的id传递给js函数：

onclick="play('audio');"

和

onclick="play('audio2');"

所以您只能使用一个功能：

function play(id) {
    var audio = document.getElementById(id);
    //
}

单击不同的图像按钮时，如何播放不同的音频？

4 个答案: