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.

Solution

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>