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

时间:2016-02-09 18:06:28

标签: javascript jquery html audio

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

答案 0 :(得分:4)

发生这种情况的原因是因为每个 <New id="httpConfig" class="org.eclipse.jetty.server.HttpConfiguration"> <Call name="addCustomizer"> <Arg><New class="org.eclipse.jetty.server.ForwardedRequestCustomizer"/></Arg> </Call> </New> <Call name="addConnector"> <Arg> <New class="org.eclipse.jetty.server.ServerConnector"> <Arg name="server"><Ref refid="Server" /></Arg> <Arg name="factories"> <Array type="org.eclipse.jetty.server.ConnectionFactory"> <Item> <New class="org.eclipse.jetty.server.HttpConnectionFactory"> <Arg name="config"><Ref refid="httpConfig" /></Arg> </New> </Item> </Array> </Arg> <Set name="port"><SystemProperty name="jetty.port" default="8080"/></Set> </New> </Arg> </Call> 元素都在其自己的频道上播放。要让它一次播放一个,你应该只使用一个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();
}