Аудио HTML анализатор издает попсовые звуки - PullRequest
Новая
       11

Аудио HTML анализатор издает попсовые звуки

0 голосов
/ 07 сентября 2018

У меня возникла проблема с производительностью при воспроизведении звука с использованием html / javascript audio api.Анимация выглядит великолепно, но есть раздражающие маленькие поп-звуки.Исходная песня читается с моего жесткого диска, у меня быстрый компьютер, и я использую локальный хост, если это имеет значение.

Код 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>

Кто-нибудь испытывал что-то подобное?Я не мог найти доказательства такой проблемы.Заранее спасибо,

EDIT: включение requestAnimationFrame в функцию setTimeOut действительно помогает, но, очевидно, анимация менее приятна.Однако это возможно: 

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