Question

我正在尝试在一个网站中使用多个声音文件。基本上，一个在点击某个按钮时播放，另一个在点击某个其他按钮时播放。到目前为止，我只设法编写一个播放一个声音文件的按钮。

<script type="text/javascript">

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

</script>

<input class="button" type="button" value="PLAY"  onclick="play()">

<audio id="audio" src="sound1.mp3" ></audio>

非常感谢任何建议。欢呼声。

Answer 1

根据点击的按钮，这将播放两种不同的声音：

<script>
  function play(){
   var audio = document.getElementById("audio");
   audio.play();
             }
  function playTwo(){
   var audioTwo = document.getElementById("audioTwo");
   audioTwo.play();
             }
</script>
<input type="button" value="PLAY"  onclick="play()">
<input type="button" value="PLAY"  onclick="playTwo()">
<audio id="audio" src="a.mp3" ></audio>
<audio id="audioTwo" src="b.mp3" ></audio>

使用上述代码，声音将在彼此之上播放。

如果您希望在单击具有不同声音的其他按钮时声音停止播放，则可以执行以下操作：

function play(){
   var audio = document.getElementById("audio");
   audio.play();
   audioTwo.pause();
             }
function playTwo(){
   var audioTwo = document.getElementById("audioTwo");
   audioTwo.play();
   audio.pause();
             }

Answer 2

如果您希望使用单个audio元素和单个函数，则可以执行以下操作：

＆＃13;

function playAudio(el) {
  var audio = document.getElementById('audio');
  var source = el.getAttribute('data-src');
  audio.src = source;
  audio.play();
}

＆＃13;

<audio id="audio"></audio>

<button onclick="playAudio(this)" data-src="http://www.noiseaddicts.com/samples_1w72b820/3740.mp3">
  Play drip
</button>

<button onclick="playAudio(this)" data-src="http://www.noiseaddicts.com/samples_1w72b820/3719.mp3">
  Play burp
</button>

＆＃13;

Answer 3

在您的小提琴中，您将第二个声音命名为audio2但播放了音频：我编辑了它：https://jsfiddle.net/7a905g5f/

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

甚至更干净，只有一个游戏功能：https://jsfiddle.net/6n0ebrrc/

在一个网站上包含多个声音文件

3 个答案: