Web Audio 同时加载 .mp3 和 .ogg
Web Audio load both .mp3 and .ogg
我正在使用 javascript 和网络音频构建 canvas 游戏。为了让它在 Firefox 中工作,我有一份 .ogg 格式的所有音频文件的副本。加载这些文件的代码如下。要获得所需的音频文件,我使用' playSound(samplebb[3], channel1); ',我这样做是因为在我的应用程序中,根据数字选择样本很有用,例如可以使用概率和随机性来选择声音。
我在论坛上读到 "the loader will accept both [mp3 and ogg] for the same sound, just pass both paths in an array rather than a single string."
第 4 行代码是我尝试的,但它不起作用。
是否可以像这样为每个 mp3 加载一个替代的 ogg 文件? (在一个缓冲列表中)或者如果浏览器是 Firefox,我是否必须检测浏览器并构建一个 oggs 缓冲列表?
谢谢
function loadSounds() {
bufferLoader = new BufferLoader(audioContext,
[
['sounds/1-KICK.mp3', 'sounds/1-KICK.ogg'], //0 // Not found
'sounds/2-BASS.mp3', //1
'sounds/3-BASS2.mp3', //2
'sounds/4-BASS4.mp3' //3
// ... ... ...
],
finishedLoading
);
bufferLoader.load();
}
function finishedLoading(bufferList) {
for (var i = 0, l = bufferList.length; i < l; i += 1) {
var source = audioContext.createBufferSource();
source.buffer = bufferList[i];
source.connect(audioContext.destination);
var note = {
note: source,
ready: true
};
samplebb.push(note);
}
setTimeout(play, 1000);
}
Are you using BufferLoader
from html5rocks? If so, the JS file 清楚地表明它只需要字符串(而不是数组)作为 url 参数。但是,您可以修改 class 以使其按您希望的方式工作。请改用以下 BufferLoader.loadBuffer()
函数:
BufferLoader.prototype.loadBuffer = function(url, index) {
// Load buffer asynchronously
var request = new XMLHttpRequest(),
mult = typeof url != 'string',
srcInd = 0;
request.open("GET", mult ? url[srcInd++] : url, true);
request.responseType = "arraybuffer";
var loader = this;
request.onload = function() {
// Asynchronously decode the audio file data in request.response
loader.context.decodeAudioData(
request.response,
function(buffer) {
if (!buffer) {
if(!mult || srcInd == url.length) {
console.error('error decoding file data:', url);
return;
} else {
console.info('error decoding file data, trying next source');
request.open("GET", url[srcInd++], true);
return request.send();
}
}
loader.bufferList[index] = buffer;
if (++loader.loadCount == loader.urlList.length)
loader.onload(loader.bufferList);
},
function(error) {
if(!mult || srcInd == url.length) {
console.error('decodeAudioData error:', url);
return;
} else {
console.info('decodeAudioData error, trying next source');
request.open("GET", url[srcInd++], true);
return request.send();
}
}
);
}
request.onerror = function() {
if(!mult || srcInd == url.length) {
console.error('BufferLoader XHR error:', url);
return;
} else {
console.info('BufferLoader XHR error, trying next source');
request.open("GET", url[srcInd++], true);
return request.send();
}
}
request.send();
}
我正在使用 javascript 和网络音频构建 canvas 游戏。为了让它在 Firefox 中工作,我有一份 .ogg 格式的所有音频文件的副本。加载这些文件的代码如下。要获得所需的音频文件,我使用' playSound(samplebb[3], channel1); ',我这样做是因为在我的应用程序中,根据数字选择样本很有用,例如可以使用概率和随机性来选择声音。
我在论坛上读到 "the loader will accept both [mp3 and ogg] for the same sound, just pass both paths in an array rather than a single string." 第 4 行代码是我尝试的,但它不起作用。
是否可以像这样为每个 mp3 加载一个替代的 ogg 文件? (在一个缓冲列表中)或者如果浏览器是 Firefox,我是否必须检测浏览器并构建一个 oggs 缓冲列表?
谢谢
function loadSounds() {
bufferLoader = new BufferLoader(audioContext,
[
['sounds/1-KICK.mp3', 'sounds/1-KICK.ogg'], //0 // Not found
'sounds/2-BASS.mp3', //1
'sounds/3-BASS2.mp3', //2
'sounds/4-BASS4.mp3' //3
// ... ... ...
],
finishedLoading
);
bufferLoader.load();
}
function finishedLoading(bufferList) {
for (var i = 0, l = bufferList.length; i < l; i += 1) {
var source = audioContext.createBufferSource();
source.buffer = bufferList[i];
source.connect(audioContext.destination);
var note = {
note: source,
ready: true
};
samplebb.push(note);
}
setTimeout(play, 1000);
}
Are you using BufferLoader
from html5rocks? If so, the JS file 清楚地表明它只需要字符串(而不是数组)作为 url 参数。但是,您可以修改 class 以使其按您希望的方式工作。请改用以下 BufferLoader.loadBuffer()
函数:
BufferLoader.prototype.loadBuffer = function(url, index) {
// Load buffer asynchronously
var request = new XMLHttpRequest(),
mult = typeof url != 'string',
srcInd = 0;
request.open("GET", mult ? url[srcInd++] : url, true);
request.responseType = "arraybuffer";
var loader = this;
request.onload = function() {
// Asynchronously decode the audio file data in request.response
loader.context.decodeAudioData(
request.response,
function(buffer) {
if (!buffer) {
if(!mult || srcInd == url.length) {
console.error('error decoding file data:', url);
return;
} else {
console.info('error decoding file data, trying next source');
request.open("GET", url[srcInd++], true);
return request.send();
}
}
loader.bufferList[index] = buffer;
if (++loader.loadCount == loader.urlList.length)
loader.onload(loader.bufferList);
},
function(error) {
if(!mult || srcInd == url.length) {
console.error('decodeAudioData error:', url);
return;
} else {
console.info('decodeAudioData error, trying next source');
request.open("GET", url[srcInd++], true);
return request.send();
}
}
);
}
request.onerror = function() {
if(!mult || srcInd == url.length) {
console.error('BufferLoader XHR error:', url);
return;
} else {
console.info('BufferLoader XHR error, trying next source');
request.open("GET", url[srcInd++], true);
return request.send();
}
}
request.send();
}