Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
353 views
in Technique[技术] by (71.8m points)

html - HTML5 audio multiple play

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

I just want to do this:

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

Thank you so much.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

My experience :

it is better to create more audio html tags with the same source . I 'm a fan of js but this time it is better to have html audio tags in html form.

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.

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

     }

    }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...