Question

使用html / javascript音频api进行音频播放时，我遇到了性能问题。动画看起来不错，但有令人讨厌的小流行声音。正在从硬盘驱动器中读取源歌曲，我有一台快速的PC，并且在需要时使用本地主机。

javascript代码：

function analyserInit() {
        document.getElementById('audio_box').appendChild(audio);
        context = new AudioContext();
        analyser = context.createAnalyser();
        canvas = document.getElementById('analyser_render');
        ctx = canvas.getContext('2d');
        // Re-route audio playback into the processing graph of the AudioContext
        source = context.createMediaElementSource(audio);
        source.connect(analyser);
        analyser.connect(context.destination);
        frameLooper(); // creates the actual graphics according to audio
    }

function frameLooper() {
    window.requestAnimationFrame(frameLooper); 
    fbc_array = new Uint8Array(analyser.frequencyBinCount); 
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
    ctx.fillStyle = '#00CCFF'; //colors of bars
    bars = 30;
    barsOffset= 60; // bars will start to appear with an offset
    for (var i = 0; i < bars; i++) { // create each bar out of the 100 hundred bars
        bar_x = barsOffset + (i * 6); 
        bar_width = 4; // each bar is 4 px
        bar_height = -(fbc_array[i] / 2);

        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);

    }
}


function playAudio() {
    audio.play();
    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(400);
    showDuration();
}

//Play Button
$('#play').click(function(){
    if (analyserInitiated == undefined) {analyserInitiated = true; analyserInit();}
    playAudio();
});

analyserInitiated变量阻止函数analyserInit（）多次执行，例如，如果用户播放另一首歌曲。当用户单击“播放”按钮时，一切开始。

HTML：

         <div id="mp3_player">
             <div id="audio_box"> </div>
            <canvas id="analyser_render">  </canvas>
        </div>

有人经历过类似的事情吗？我找不到此类问题的证据。预先感谢，

编辑：将requestAnimationFrame约束到setTimeOut函数中确实有帮助，但显然动画效果不太好。但是，这是有可能的：

setTimeout(function() {
        window.requestAnimationFrame(frameLooper);}, 100);

音频HTML分析器在播放时发出流行声音

0 个答案: