Question

我正在创建一个涉及大量多轨音频循环的网站。我想知道用javascript等实现这些的最佳方法是什么？

我应该使用： -flash或一些相关的flash库

或

-html5 audio

或其他什么？

音频循环是无缝的非常重要

这有什么好的库？过去我曾经使用过soundmanager。这些文件大多是mp3。

Answer 1

如果您不介意使用Flash，可以导入音频，收听COMPLETE事件，然后重新播放......

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

Answer 2

如果您满足于坚持使用WebKit浏览器，则可以使用Web Audio API。

这是一些锅炉板“抽象”代码，以帮助您入门。需要服务器。

<!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 个答案: