HTML5 Audio - Получение массива частот, заполненного нулями - PullRequest
Новая
       20

HTML5 Audio - Получение массива частот, заполненного нулями

0 голосов
/ 29 апреля 2018

У меня проблемы с построением визуализации частоты звука. Я использую аудио тег HTML5: 

<audio id="music" src="https://cdn.glitch.com/02dcea11-9bd2-4462-ac38-eeb6a5ad9530%2F331_full_beautiful-minds_0171_preview.mp3?1522829295082" crossorigin="use-URL-credentials" controls="true"></audio>

(песня с www.premiumbeat.com)

используется с AudioContext и Analyzer, как показано ниже: 

const audio = document.getElementById('music');
audio.load();
audio.play();

const ctx = new AudioContext();
const audioSrc = ctx.createMediaElementSource(audio);
const analyser = ctx.createAnalyser();
audioSrc.connect(analyser);
analyser.connect(ctx.destination);

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);
analyser.getByteFrequencyData(frequencyData);

setTimeout(() => {
   analyser.getByteFrequencyData(frequencyData);
   console.log(frequencyData);
}, 5000);

Выход: Даже если песня воспроизводится, когда я вызываю getByteFrequencyData (), на выходе получается массив из 128 элементов, полный нулей.

Ожидаемое поведение: Через 5 секунд консоль должна вывести массив из 128 элементов данных текущей частоты. (Я делаю это так, потому что requestAnimationFrame задерживает окно, однако я попробовал это сделать, и результат тот же).

Есть идеи, что я делаю не так? (я использую Firefox Quantum 59.0.2.)

Попробуйте здесь: Пример JSFiddle

Спасибо!

1 Ответ

0 голосов
/ 29 апреля 2018

После моих экспериментов с веб-аудио API я изменил ваш скрипт, чтобы использовать getByteTimeDomainData вместо getByteFrequencyData.

https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteTimeDomainData

Использование демонстрационных интервалов вместо тайм-аута. 

const audio = document.getElementById('music');
audio.load();
audio.play();

const ctx = new AudioContext();
const audioSrc = ctx.createMediaElementSource(audio);
const analyser = ctx.createAnalyser();

audioSrc.connect(analyser);
analyser.connect(ctx.destination);

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);

setInterval(() => {
   analyser.getByteFrequencyData(frequencyData);
   console.log(frequencyData);
}, 1000);
<audio id="music" src="https://cdn.glitch.com/02dcea11-9bd2-4462-ac38-eeb6a5ad9530%2F331_full_beautiful-minds_0171_preview.mp3?1522829295082" crossorigin="use-URL-credentials" controls="true"></audio>
...