Я использую ReactJS для разработки веб-страницы (. html +. js) , которая будет включена в USB-накопитель и отправлено клиентам . Этот USB-накопитель содержит некоторые аудиофайлы (.wav) , которые воспроизводятся через элемент HTML5 audio на веб-странице. Клиенты откроют файл HTML через свой браузер и будут слушать песни, доступные на USB-накопителе.
Я использовал недавний Web Audio API (в частности, узел analyser), чтобы проанализировать частотные данные текущего воспроизводимого звука, а затем нарисовать своего рода визуальный звук спектр на элементе HTML5 canvas.
К сожалению, я использовал NodeJS локальный веб-сервер во время разработки. Теперь я подготовил все для производства, просто чтобы обнаружить, что из-за ограничений, связанных с CORS , мой код JS не может получить доступ к аудиофайлу через API веб-аудио. (Это потому, что протокол URL будет «file: //», и для этого протокола не определена политика CORS - это поведение на Chrome и Firefox, с использованием Safari это просто работает.)
Визуальный звуковой спектр является неотъемлемой частью дизайна этой веб-страницы, и я бы не хотел выбрасывать его только из-за политики CORS. Моя идея состоит в том, чтобы встроить в код JS представление JSON частотных данных для аудиофайла , а затем использовать объект JSON в синхронизации c с воспроизводимым аудиофайлом. чтобы нарисовать поддельный (не в реальном времени) спектр.
Я пробовал - изменяя исходный код, который я использовал для рисования спектра - чтобы использовать JS requestAnimationFrame l oop, чтобы получить данные о частоте для каждого кадра и сохранить их в файл JSON, но данные JSON кажутся неполными, а некоторые кадры (много)
this.audioContext = new AudioContext();
// this.props.audio is a reference to the HTML5 audio element
let src = this.audioContext.createMediaElementSource(this.props.audio);
this.analyser = this.audioContext.createAnalyser();
src.connect(this.analyser);
this.analyser.connect(this.audioContext.destination);
this.analyser.smoothingTimeConstant = 0.95;
this.analyser.fftSize = 64;
this.bufferLength = this.analyser.frequencyBinCount;
this.frequencyData = new Uint8Array(this.bufferLength);
[...]
const drawSpectrum = () => {
if (this.analyser) {
this.analyser.getByteFrequencyData(this.frequencyData);
/*
* storing this.frequencyData in a JSON file here,
* this works but I get sometimes 26 frames per seconds,
* sometimes 2 frames per seconds, never 60.
*/
}
requestAnimationFrame(drawSpectrum);
};
drawSpectrum();
Есть ли у вас идея получше подделать визуальный звуковой спектр? Как бы вы от go до «обошли» ограничения, связанные с CORS в этом случае? Что может быть за метод solid для экспорта данных звуковой частоты в JSON (а затем доступ к нему) ?