Question

嘿，我想创建一个音板，但我不知道如何放置更多音频。

我希望他们在您单击开始时，如果您重新单击它停止并再次单击时都从头开始（请查看脚本）。

我不知道如何添加更多音频并使用相同的脚本。（我创建了新的音频，更改了ID，但在脚本中ID仍为audio1，因此无法正常工作。）

谢谢

<audio id="audio1" src="myaudio.mp3"></audio>
<button onClick="play()">Play</button>

<script type="text/javascript">
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
    audio.play();
}else{
    audio.pause();
    audio.currentTime = 0
}
}
</script>`

Answer 1

要使用多个音频，请执行以下操作：您可以将一个值传递给该函数，以确定要播放的音频。

<audio id="audio1" src="myaudio1.mp3"></audio>
<audio id="audio2" src="myaudio2.mp3"></audio>
<audio id="audio3" src="myaudio3.mp3"></audio>
<button onClick="play(1)">Play 1</button>
<button onClick="play(2)">Play 2</button>
<button onClick="play(3)">Play 3</button>

<script type="text/javascript">
function play(e) {
var audio = document.getElementById('audio'+e);

var sounds = document.getElementsByTagName('audio');
for(i=0; i<sounds.length; i++) sounds[i].pause();

audio.currentTime = 0;
audio.play();
}
</script>`

编辑：

function play(e) {
    var audio = document.getElementById('audio'+e);

    var sounds = document.getElementsByTagName('audio');
    var shouldPlay = true;
    for(i=0; i<sounds.length; i++) {
        if(sounds[i].currentTime > 0 && !sounds[i].paused && !sounds[i].ended) {
            sounds[i].pause();
            sounds[i].currentTime = 0;

            if(audio == sounds[i]) shouldPlay = false;
        }
    }


    if(shouldPlay) {
        audio.play();
    }
}

创建具有不同音频（超过1个）的音板

1 个答案: