javascript - 我正在尝试使用 HTML5 Web Audio API 创建均衡器类型的图形，但数据从未被带入 MediaElementSourc

Question

我正在尝试使用 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 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); 修复了所有问题。

Answer 1

您只能为每个窗口创建一个 AudioContext，并且您应该等到音频的 canplay 事件触发后再设置您的 MediaElementSource。您还应该在使用完 MediaElementSource 后断开它。

这是我用来回答类似问题的示例:http://jsbin.com/acolet/1/