在瀏覽器中循環播放音頻的最佳方式？

我正在製作一個涉及大量多軌音頻循環的網站。我想知道什麼是最好的方式來實現這些（與JavaScript等）？在瀏覽器中循環播放音頻的最佳方式？

我應該使用： -flash或一些相關的Flash庫

或

-html5音頻

或其他什麼東西？

這是非常重要的音頻循環是無縫

什麼是這一些好的庫？在過去，我使用了聲音管理器。這些文件將主要是mp3。

來源

2013-03-08 pepper

您可以使用網絡音頻API，如果你是內容堅持與WebKit瀏覽器..

這裏是一些鍋爐板「抽象」的代碼，讓你開始。需要一臺服務器。

<!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-13 04:34:22 William

這是夢幻般的，但它只能在Chrome瀏覽器？出於某種原因，這是我聽到的任何東西的唯一地方 – pepper 2013-03-15 04:20:31

它在最新版本的Safari中工作。 Safari 6 + – William 2013-03-15 05:05:56

如果你不介意使用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-08 14:56:14 whodeee

在瀏覽器中循環播放音頻的最佳方式？

回答

相關問題