Question

我需要播放一些简短的音频文件。每个按钮只应播放相应的音频文件，并在再次单击时停止并重置音频。

这是我到目前为止的代码。播放/停止功能有效，但无论您点击什么按钮，代码都只播放最靠近底部列出的文件。我认为它与函数和按钮ID中的某些内容有关，但我无法自己解决这个问题。任何帮助将非常感激！谢谢!!

[编辑添加更多] 我想我想了一下，按钮调用了两次列出的功能'play'，因此它只播放最新的一个。我想我需要让函数有一个包含所有音频文件的列表...现在尝试一下......

<!DOCTYPE html>
<html>

<head>

</head>


<body>
<audio id="oink" src="sfx/1oink.mp3"></audio>
<button onClick="play()">oink</button>

<audio id="cluck" src="sfx/2chicken.mp3"></audio>
<button onClick="play()">cluck</button>

<script>
function play() {
    var audio = document.getElementById('oink');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}
</script>

<script>
function play() {
    var audio = document.getElementById('cluck');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}
</script>


</body>

</html>

Answer 1

我想说你不需要使用<audio>个元素。您可以通过以下方式访问音频API：

var sound1 = new Audio("sfx/1oink.mp3");
sound1.play();

var sound2 = new Audio("sfx/2chicken.mp3");
sound2.play();

Answer 2

你有两个play（）函数，JS无法区分它们。它根本不会根据元素的附近来识别哪个游戏。所以试试：

<audio id="oink" src="sfx/1oink.mp3"></audio>
<button onClick="play('oink')">oink</button>
<audio id="cluck" src="sfx/2chicken.mp3"></audio>
<button onClick="play('cluck')">cluck</button>

<script>
function play(id) {
    var audio = document.getElementById(id);
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}
</script>

Answer 3

据我所知，你的程序的解决方案是只制作一个播放函数，然后制作两个if语句：

//Sorry I know this is not exactly what you want
//but you can replace "input" with some function
//like "on mouse click buttonID" play sound
//I don't know html functions but this is what I think.

function play() {
  if(input == "cluck") var audio = document.getElementById('cluck');
  if(input == "oink") var audio = document.getElementById('oink');
  if (audio.paused) {
    audio.play();
  }else{
    audio.pause();
    audio.currentTime = 0
  }
}

使用按钮播放/停止音频文件

3 个答案: