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が、コンソールでは AudioContext の属性が常に 0 であるため、見つけられない問題がいくつかありますactiveSourceCount。これは、オーディオを受信したことがないことを意味します。パラメータとして指定した要素。

編集：

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ウィンドウごとに 1 つだけです。オーディオのcanplayイベントが発生するまで待ってからMediaElementSource. MediaElementSourceまた、使用が終了したら、 を切断する必要があります。

同様の質問に答えるために使用した例を次に示します: http://jsbin.com/acolet/1/

于 2013-07-02T22:28:39.783 に答える