html5对应c 类,javascript – 我正在尝试使用HTML5 Web Audio API创建均衡器类型图形,但数据永远不会被带入MediaElementSourc...

我正在尝试使用

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的源,但是有些问题我找不到,因为在控制台中,AudioContext的activeSourceCount属性始终为0,这意味着它从未收到过我把它作为参数的音频元素.

编辑：

我根据idbehold说的修改了我的代码;但是,现在我有2个错误,一个InvalidStateError：Source = context.createMediaElementSource(audio)上的DOM异常11; line和一个TypeError：无法在行var freqByteData = new Uint8Array(analyser.frequencyBinCount)中读取未定义的属性’frequencyBinCount’;此外,MediaElementSource仍然有0个activeSourceCounts.

$(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);这解决了一切.