HTML5 音频多重播放 [英] HTML5 audio multiple play

问题描述

我正在编写一个 Javascript 游戏，我想多次使用一种声音.我可以通过将一个声音多次加载到数组中来做到这一点.但是我想一次加载一个声音并将其复制"到数组中，这样我就可以多次播放它.这是我现在拥有的方法:

I'am programming a Javascript game and I want to use one sound in multiple times. I can do it with loading one sound more times to an array. But I want to load one sound once and "copy" it to array, so I can play it multiple times. This is method what I have now:

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;
        }
    }

非常感谢.

推荐答案

我的经验:

最好用相同的源创建更多的音频html标签.我是 js 的粉丝，但这次最好有 html 格式的 html 音频标签.

我制作了一个重复的音频标签，并满足了我的需求.如果您想在一秒钟内多次播放相同的声音，请添加更多克隆.

I made a duplicate audio tags and I adorned my needs. If you want to play the same sound several times in one second , then add more clones.

您也可以修复自动播放错误(而不是 EXE_JUST_ONE_TIME 你可以使用覆盖点击事件，现在不重要):

also you can fix the autoplay bug ( instead of EXE_JUST_ONE_TIME you can use override click event , not important now ) :

    <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();

     }

    }

这篇关于HTML5 音频多重播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！