HTML5音频多重播放
HTML5音频多重播放
提问于 2011-03-04 22:17:57
我正在编写一个Javascript游戏，我想在多次使用一个声音。我可以通过将一个声音多次加载到一个数组中来做到这一点。但是我想加载一次声音并将其“复制”到数组中，这样我就可以多次播放它。这是我现在拥有的方法：
this.list = [
"LaserShot", //http://www.freesound.org/samplesViewSingle.php?id=39459
"Ding", //http://www.freesound.org/samplesViewSingle.php?id=5212
"Rocket" //http://www.freesound.org/samplesViewSingle.php?id=47252 -> http://creativecommons.org/licenses/sampling+/1.0/
];
...
for (i in this.list) {
this.sounds[this.list[i]] = new Array();
for (var j = 0; j < this.channels; j++) {
this.sounds[this.list[i]][j] = new Audio("./sounds/"+ this.list[i] + type);
}
}我只想这么做：
for (i in this.list) {
this.sounds[this.list[i]] = new Array();
var tempAudio = new Audio("./sounds/"+ this.list[i] + type);
for (var j = 0; j < this.channels; j++) {
this.sounds[this.list[i]][j] = realCopyOfTempAudio;
}
}非常感谢。
回答 1
Stack Overflow用户
发布于 2016-02-17 22:16:40
我的经验是：
最好创建更多具有相同来源的音频html标签。我是js的粉丝，但是这次最好有html格式的html音频标签。
我制作了一个复制的音频标签，并修饰了我的需求。如果您想在一秒内多次播放相同的声音，请添加更多的克隆。
你也可以修复自动播放的bug (你可以使用覆盖点击事件来代替EXE_JUST_ONE_TIME，现在不重要了)：
<audio controls id="LaserShot" >
<source src="LaserShot.mp3" type="audio/mpeg">
<source src="LaserShot.ogg" type="audio/ogg">
</audio>
<audio controls id="LaserShot_CLONE" >
<source src="LaserShot.mp3" type="audio/mpeg">
<source src="LaserShot.ogg" type="audio/ogg">
</audio>
<script>
var EXE_JUST_ONE_TIME = false;
document.addEventListener("click" , function(e) {
if (EXE_JUST_ONE_TIME == false){
EXE_JUST_ONE_TIME = true;
document.getElementById("LaserShot").play();
document.getElementById("LaserShot").pause();
document.getElementById("LaserShot_CLONE").play();
document.getElementById("LaserShot_CLONE").pause();
// Buffering in progress
// now you can play programmability from code
// One click or touch can prepare max 6 audios
}
}
Last part (need to be handled) this handler works only for one clone:
var play_shoot = function(){
if (document.getElementById('LaserShot').duration > 0 &&
!document.getElementById('LaserShot').paused) {
document.getElementById('LaserShot_CLONE').play();
} else {
document.getElementById('LaserShot').play();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5194898
复制相关文章
相似问题