在浏览器中循环音频的最佳方法？ [英] best way to loop audio in the browser?
问题描述
我正在制作一个涉及大量多轨音频循环的网站。
我想知道什么是最好的方式来实现这些（与JavaScript等）？
我应该使用：
-flash或一些相关的Flash库
$ b $或者
$ b $ -html5音频
音频循环是无缝的非常重要的
什么是一些好的库为了这？在过去，我使用了声音管理器。
文件将主要是MP3。
如果您满足于使用WebKit浏览器，则可以使用Web Audio API。 b
下面是一些锅炉板抽象的代码，让你开始。需要一个服务器。
<！DOCTYPE html>
< meta charset =UTF-8>
< title>< / title>
< div id =kickDrum> < / DIV> // click and will loop
< div id =snareDrum>< / div> //不会循环
< script>
var kickDrum = new audioApiKey（kickDrum，kick.mp3，true）; //第一个参数是div名称，下一个是音频文件名称&最后一个参数是循环开启/关闭。 true表示循环在
var snareDrum = new audioApiKey（snareDrum，snare.mp3，false）;
//下面是抽象的胆量。
var context = new webkitAudioContext（）;
函数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）; //立即播放声音
};
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
<风格>
#kickDrum {
background-color：orange;
position：absolute;
top：25％;
剩下：25％;
width：200px;
height：200px;
border-radius：120px;
border-style：solid;
border-width：15px;
border-color：gray;
}
#snareDrum {
background-color：orange;
position：absolute;
top：25％;
剩下：50％;
width：200px;
height：200px;
border-radius：120px;
border-style：solid;
border-width：15px;
border-color：gray;
}
< / style>
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
or
-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.
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>
这篇关于在浏览器中循环音频的最佳方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
