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

У меня возникли проблемы с визуализацией звуковой частоты. Я использую аудиотег 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

Благодарю вас!


person TomasB    schedule 29.04.2018    source источник
comment
Здесь не полно нулей "0": 191, "1": 209, "2": 219, "3": 208, "4": 207, "5": 195, "6": 167, "7": 145, "8": 151,   -  person pokeybit    schedule 29.04.2018
comment
О, интересно! У меня полно нулей - я использую Firefox Quantum 59.0.2   -  person TomasB    schedule 29.04.2018
comment
То же самое здесь, ваш код выводит нули в моем firefox 59/linux. Выкладываю модифицированную версию, которая работает в моем браузере. Это должно быть то, что вы ищете ;)   -  person NVRM    schedule 29.04.2018


Ответы (1)


После моих экспериментов с веб-аудио 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>

person NVRM    schedule 29.04.2018
comment
Вау, удивительно, это действительно сработало! Спасибо! Есть ли причина Почему мне нужно смешивать getByteTimeDomainData в начале с getByteFrequencyData в интервале? - person TomasB; 29.04.2018
comment
Ну это странно. После запуска вашего кода здесь даже мой НЕИЗМЕННЫЙ проект начинает работать. - person TomasB; 29.04.2018
comment
В заметке об удобстве использования для будущих посетителей, которые найдут этот вопрос, веб-аудио может воспроизводиться только после взаимодействия со страницей, простая загрузка аудио с помощью автозапуска или blah.play() на основе JS ничего не даст, пока пользователь не взаимодействует со страницей (к сожалению), например. нажатием кнопки или т.п. - person Mike 'Pomax' Kamermans; 08.04.2020