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

Posted 2023-02-25

【中文标题】使用 Javascript/jQuery 一次播放一个 HTML 音频文件

【英文标题】：Play one HTML audio file at a time with Javascript/jQuery

【发布时间】：2016-02-09 18:06:27

【问题描述】：

在我的页面中，每个键盘按键都会触发一个音频文件。对于字母 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);
;

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

【参考方案1】：

发生这种情况的原因是每个<audio> 元素都在其自己的频道上播放。要让它一次播放一个，您应该只使用一个 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);
;

【讨论】：

谢谢。但是，这样一来，如果我按下 A 然后立即按下 B，A 就会停止——我希望 A 继续播放直到结束，然后允许用户按下另一个键。很抱歉之前没有说清楚。我注意到的一点：即使没有if (!audio.paused) audio.pause();

，它也会自动停止

@Willege 我添加了一个编辑以具有该功能。一旦按下一个键，该音频就会播放到结束，然后用户才能按下另一个键来启动另一个音频文件。

它不工作。也许如果用户还没有按下任何键并且没有声音播放，那么条件!sound.ended为真，因此跳出函数？

@Willege 将 audio.end 更改为 audio.paused？也许它会工作。