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

Include multiple sound files on one website

本文关键字：包含多 声音 文件 网站 一个      更新时间：2024-06-02

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

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

如有任何建议，不胜感激。干杯

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

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

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

function playAudio(el) {
  var audio = document.getElementById('audio');
  var source = el.getAttribute('data-src');
  audio.src = source;
  audio.play();
}
<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>

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

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

甚至更清洁，只有一个播放功能：https://jsfiddle.net/6n0ebrrc/

相关文章：