best way to loop audio in the browser?

问题

I'm making a site that involves a lot of multi-tracked, audio loops. I'm wondering what the best way to implement these in (with javascript, etc)?

should I use: -flash or some related flash library

-html5 audio

or something else?

it's very important that the audio loops be seamless

what are some good libraries for this? In the past I've used soundmanager. The files will mostly be mp3s.

回答1:

You can use the Web Audio API if you are content to sticking with WebKit browsers..

Here is some boiler plate "abstracted" code to get your started. Requires a server.

<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>

<div id="kickDrum"> </div>    // click and will loop
<div id="snareDrum"></div>    // Won't loop




 <script>
 var kickDrum = new audioApiKey("kickDrum","kick.mp3",true);     // first argument is the div name, the next is the audio file name & url the last parameter is loop on/off. true means loop on

 var snareDrum = new audioApiKey("snareDrum","snare.mp3", false);





 // Below is the abstracted guts.

 var context = new webkitAudioContext();

 function audioApiKey(domNode,fileDirectory,loopOnOff) {
    this.domNode = domNode;
    this.fileDirectory = fileDirectory;
    this.loopOnOff = loopOnOff;                      
    var bufferFunctionName = bufferFunctionName;
    var incomingBuffer;
    var savedBuffer;
    var xhr;
       bufferFunctionName = function () {
       var source = context.createBufferSource();
       source.buffer = savedBuffer;
       source.loop = loopOnOff;
       source.connect(context.destination);
       source.noteOn(0); // Play sound immediately
       };
    var xhr = new XMLHttpRequest();
    xhr.open('get',fileDirectory, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
    context.decodeAudioData(xhr.response,
       function(incomingBuffer) {
       savedBuffer = incomingBuffer;
       var note = document.getElementById(domNode);
       note.addEventListener("click", bufferFunctionName , false);
         }
      );
   };
 xhr.send();
 };

 </script>

CSS

<style>

#kickDrum {
   background-color:orange;
   position:absolute;
   top:25%;
   left:25%;
   width: 200px;
   height:200px;
   border-radius:120px;
   border-style:solid;
   border-width:15px;
   border-color:grey;
 } 

#snareDrum {
   background-color:orange;
   position:absolute;
   top:25%;
   left:50%;     
   width: 200px;
   height:200px;
   border-radius:120px;
   border-style:solid;
   border-width:15px;
   border-color:grey;
 }

</style>

回答2:

If you don't mind using Flash, you can import the audio, listen for the COMPLETE event, then play it again...

import flash.events.Event; 
import flash.media.Sound; 
import flash.net.URLRequest; 

var snd:Sound = new Sound(); 
var req:URLRequest = new URLRequest("smallSound.mp3"); 
snd.load(req); 

var channel:SoundChannel = snd.play(); 
channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete); 

public function onPlaybackComplete(event:Event) 
{ 
    trace("The sound has finished playing.");
    snd.play(); 
}

来源：https://stackoverflow.com/questions/15289643/best-way-to-loop-audio-in-the-browser

标签

flash

audio

html5-audio

soundmanager2