在HTML5中,我可以同时播放多次相同的声音吗?

时间:2012-04-30 14:56:05

标签: javascript html5 audio html5-audio

我正在制作一个经常播放声音的游戏。我注意到声音在播放时不再播放。例如,玩家与墙碰撞,播放“重击”声。但是,如果玩家与一面墙碰撞,然后迅速与另一面墙发生碰撞,则只会发出一声“砰砰”的声音,我相信这是因为第一声音没有完成。真的吗?我该怎样避免这个?我想过将声音预加载三次,总是播放不同的声音副本,但这看起来相当愚蠢......

解决:

原来我是对的...你需要预先加载多个版本的声音,然后循环播放它们。

代码:

var ns = 3; //The number of sounds to preload. This depends on how often the sounds need to be played, but if too big it will probably cause lond loading times.
var sounds = []; //This will be a matrix of all the sounds

for (i = 0; i < ns; i ++) //We need to have ns different copies of each sound, hence:
    sounds.push([]);

for (i = 0; i < soundSources.length; i ++)
    for (j = 0; j < ns; j ++)
        sounds[j].push(new Audio(sources[i])); //Assuming that you hold your sound sauces in a "sources" array, for example ["bla.wav", "smile.dog" "scream.wav"] 

var playing = []; //This will be our play index, so we know which version has been played the last.

for (i = 0; i < soundSources.length; i ++)
    playing[i] = 0; 

playSound = function(id, vol) //id in the sounds[i] array., vol is a real number in the [0, 1] interval
{
    if (vol <= 1 && vol >= 0)
        sounds[playing[id]][id].volume = vol;
    else
        sounds[playing[id]][id].volume = 1;

    sounds[playing[id]][id].play();
    ++ playing[id]; //Each time a sound is played, increment this so the next time that sound needs to be played, we play a different version of it,

    if (playing[id] >= ns)
        playing[id] = 0;
}

4 个答案:

答案 0 :(得分:5)

您可以克隆音频元素。我不知道你是否可以同时播放不止一次,但是这里你不仅可以多次播放声音,而且不会多次下载。

var sound = document.getElementById("incomingMessageSound")
var sound2 = sound.cloneNode()
sound.play()
sound2.play()

我知道这适用于chrome,这是我唯一需要它的地方。 祝你好运!

答案 1 :(得分:2)

多次加载声音以模拟复音。以循环方式播放它们。在matthewtoledo.com查看我的演示。具体来说,函数_initSoundBank()

答案 2 :(得分:1)

是的,单个<audio>对象一次只能播放一首曲目。考虑<audio>对象有一个currentTime属性,指示音轨的当前位置:如果<audio>对象可以播放多个音轨一次,那么currentTime的值是多少反映?

Is playing sound in Javascript performance heavy?上查看我的解决方案,了解此问题的超集。 (基本上,添加具有相同声音的重复<audio>标签。)

答案 3 :(得分:1)

虽然它现在只在FireFox和Chrome中实现,但未来您应该使用 WebAudio API ,这是专门为浏览器中的游戏和音频应用程序设计的。

在那里你可以多次播放任何声音并用它做其他一些有趣的事情。

这方面的一个很好的教程是:http://www.html5rocks.com/en/tutorials/webaudio/games/