0


私は立ち往生しています。私の問題は、mp3 ファイルを 経由で初期化し、createAudioBufferすべてのオーディオ ファイルをアナライザーに接続したいということです。ただし、 audioSource[i].start(); を設定した場合のみ。最後のトラックはアナライザーを通過します。タグの再生ボタン (または外部ボタン) を押すと、すべてのオーディオ ファイルがそのアナライザーを通過するようにしたいと考えています。
その仕事を得る方法はありますか？

これが私のコードです：

var canvas, ctx, source, audioCtx, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
var audioCtx    = new (window.AudioContext || window.webkitAudioContext)();
var invocation  = new XMLHttpRequest();

analyser = audioCtx.createAnalyser();

function initSound(i, track){
    canvas = document.getElementById('analyser_render');
    ctx = canvas.getContext('2d');
    var     d = document,
        audio = new Audio();

    if (audio.canPlayType) {
       // Currently canPlayType(type) returns: "", "maybe" or "probably" 
       var canPlayMp3 = !!audio.canPlayType && "" != audio.canPlayType('audio/mpeg');
    }

    trackSource = track.uri + '/stream?client_id=62fa6c34df7382c8dc444a18f4ff72b4';
    audio.src = trackSource;
    audio.controls = true;
    audio.loop = false;
    audio.autoplay = false;
    audio.preload = "none";
    audio.setAttribute('data-tracknumber', i+1);

    $('<div class="audioWrapper"><div class="url"></div><img class="img" /><div class="controls"><button class="play-pause"></button></div></div>').appendTo('#audio_box').append(audio);

    analyser.connect(audioCtx.destination);

    fetchAudioAsset(trackSource, audioCtx, function( buffer ) {
      audioSource = [];
      audioSource[i] = audioCtx.createBufferSource();
      audioSource[i].buffer = buffer;
      audioSource[i].connect(audioCtx.destination);
      audioSource[i].connect(analyser);
    });

    function fetchAudioAsset (path, audioCtx, callback) {
        invocation.open('GET', path, true);
        invocation.responseType = 'arraybuffer';
        invocation.onload = function() {
            if (invocation.readyState != 4) return;
            audioCtx.decodeAudioData(invocation.response, function(buffer) {
                callback && callback(buffer);
            });
        }.bind(this);
        invocation.onprogress = function(ev) {
          $('.loaded').width(((ev.loaded / ev.total) * 100) + '%');
        };

      fetchAudioAsset.request && fetchAudioAsset.request.abort();
      fetchAudioAsset.request = invocation;
      invocation.send();
    };

    soundVisualizer();
}
        function soundVisualizer() {
            window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;


            requestAnimationFrame(soundVisualizer);
            fbc_array = new Uint8Array(analyser.frequencyBinCount);
            analyser.getByteFrequencyData(fbc_array);
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
            ctx.fillStyle = '#00CCFF'; // Color of the bars
            bars = 100;
            for (var i = 0; i < bars; i++) {
                bar_x = i * 3;
                bar_width = 2;
                bar_height = -(fbc_array[i] / 2);
            //fillRect( x, y, width, height ) // Explanation of the parameters below
            ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
        }
    }
4

1 に答える 1

1

これはi、ノードを start() したときに の値が思ったものと異なるという問題のようです。これは Web Audio API の問題ではなく、JavaScript の問題です。

実際にはグローバル値にアクセスしないように、パラメーターを介して渡す必要があります。

于 2014-09-09T12:48:03.253 に答える