0

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

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

或者

-html5 音频

或者是其他东西？

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

有什么好的图书馆呢？过去我使用过声音管理器。这些文件将主要是 mp3。

4

2 回答 2

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(); 
}
于 2013-03-08T14:56:14.253 回答
1

如果您满足于坚持使用 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>
于 2013-03-13T04:34:22.797 回答