我正在尝试使用 HTML5 Web Audio API 创建均衡器类型的图形,但出于某种原因,数据从未被引入 MediaElementSource
。
$('.table').on('click', 'tr', function() {
if ($(this) != $('.table tr:first-child')) {
var src = $(this).children().first().attr('data-src');
var audio = new Audio();
audio.src = src;
audio.controls = true;
$('.file-playlist').append(audio);
console.log(audio);
audio.load();
audio.play();
context = new webkitAudioContext();
console.log(context);
analyser = context.createAnalyser();
console.log(analyser);
source = context.createMediaElementSource(audio);
console.log(source);
source.connect(analyser);
console.log(source);
analyser.connect(context.destination);
console.log(analyser);
rafCallback();
}
});
在上面的函数中,我创建了一个音频元素并将其用作上下文 MediaElementSource
的源,但是有一些我找不到的问题,因为在控制台中,activeSourceCount
AudioContext 的属性始终为 0,这意味着它从未收到我作为参数提供给它的音频元素。
编辑:
我根据idbehold所说的修改了我的代码;但是,现在我有 2 个错误,source = context.createMediaElementSource(audio);
行上的 InvalidStateError: DOM Exception 11
和 TypeError: Cannot read
此外,MediaElementSource 仍然有 0 个 activeSourceCounts。var freqByteData = new Uint8Array(analyser.frequencyBinCount);
行中未定义的属性“frequencyBinCount”
$(document).ready(function() {
var context = new webkitAudioContext();
console.log(context);
var audio;
var source;
$('.table').on('click', 'tr', function() {
if ($(this) != $('.table tr:first-child')) {
var src = $(this).children().first().attr('data-src');
if (audio) {
audio.remove();
audio = new Audio();
audio.src = src;
audio.controls = true;
$('.file-playlist').append(audio);
console.log(audio);
audio.addEventListener("canplay", function(e) {
analyser = context.createAnalyser();
console.log(analyser);
source.disconnect();
source = context.createMediaElementSource(audio);
console.log(source);
source.connect(analyser);
console.log(source);
analyser.connect(context.destination);
console.log(analyser);
audio.load();
audio.play();
}, false);
}
else {
audio = new Audio();
audio.src = src;
audio.controls = true;
$('.file-playlist').append(audio);
console.log(audio);
audio.addEventListener("canplay", function(e) {
analyser = (analyser || context.createAnalyser());
console.log(analyser);
source = context.createMediaElementSource(audio);
console.log(source);
source.connect(analyser);
console.log(source);
analyser.connect(context.destination);
console.log(analyser);
audio.load();
audio.play();
}, false);
}
}
rafCallback();
});
});
编辑 2:
在我的 rafCallback() 函数中,我注意到来自 Uint8Array 的数据从未被处理过,所以我添加了 getByteFrequencyData(analyser.frequencyBinCount);
修复了所有问题。
最佳答案
您只能为每个窗口创建一个 AudioContext
,并且您应该等到音频的 canplay
事件触发后再设置您的 MediaElementSource
。您还应该在使用完 MediaElementSource
后断开它。
这是我用来回答类似问题的示例:http://jsbin.com/acolet/1/
关于javascript - 我正在尝试使用 HTML5 Web Audio API 创建均衡器类型的图形,但数据从未被带入 MediaElementSourc,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17436124/