javascript - 使用 Javascript/jQuery 一次播放一个 HTML 音频文件

Question

在我的页面中，每个键盘按键都会触发一个音频文件。对于字母 A 到 Z，将播放相应的音频文件，对于每隔一个键(ESC 除外)，将播放 26 个音频文件中的随机一个。例如，如果我按 A 和 B，两个音频文件将同时播放，但我希望一次只播放一个文件。我将如何实现这一点？

function keyDown(event) {
    var key = event.keyCode, sound, randomSound;
    if (key === 27) {
        //Play exit audio file, remove event listener, exit...
    } else if (key >= 65 && key <= 90) {
        sound = document.getElementById(key);
        sound.play();
    } else {
        randomSound = getRandomInt(65, 90);
        sound = document.getElementById(randomSound);
        sound.play();
    }

    window.onload = function() {
    window.addEventListener("keydown", keyDown);
};

编辑:我希望音频文件一直播放到结束，然后用户才能按下另一个键并触发另一个文件。我很抱歉之前没有说清楚。

Answer 1

发生这种情况的原因是因为每个 <audio>元素在它自己的 channel 上播放。要使其一次播放一个，您应该只使用一个 Audio 对象。

为此，您应该只使用一个 Audio目的。像这样:

var audio = new Audio();

...

if (!audio.paused) audio.pause();
if (key >= 65 && key <= 90) {
    audio.src = document.getElementById(key).src; /* set audio.src to URL of individual audio element */
    audio.play();
} else {
    randomSound = getRandomInt(65, 66);
    audio.src = document.getElementById(randomSound).src; /* set audio.src to URL of individual audio element */
    audio.play();
}

编辑

要回答你修改后的问题，你只需做这样的事情

var audio = new Audio();

function keyDown(event) {
    if (!audio.paused) // if audio hasn't ended, don't replace it.
        return; 

    var key = event.keyCode, sound, randomSound;
    if (key === 27) {
        //Play exit audio file, remove event listener, exit...
    } else if (key >= 65 && key <= 90) {
        audio.src = document.getElementById(key).src;
        audio.play();
    } else {
        randomSound = getRandomInt(65, 90);
        audio = document.getElementById(randomSound).src;
        audio.play();
    }

    window.onload = function() {
    window.addEventListener("keydown", keyDown);
};