4

我正在尝试使用 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但是存在一些我找不到的问题，因为在控制台中，activeSourceCountAudioContext 的属性始终为 0，这意味着它从未接收到音频我给它作为参数的元素。

编辑：

我根据 idbehold 所说的修改了我的代码；但是，现在我有 2 个错误，一个InvalidStateError: DOM Exception 11在线source = context.createMediaElementSource(audio);，一个TypeError: Cannot read property 'frequencyBinCount' of undefined在线var freqByteData = new Uint8Array(analyser.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);它修复了所有问题。

4

1 回答 1

6

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

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

于 2013-07-02T22:28:39.783 回答