Рендеринг изображения из аудио

Question

Есть ли возможность визуализации аудио файла?

Может быть, со SoundManager2 / Canvas / HTML5 Audio? Вы знаете какую-то технику?

Я хочу создать что-то вроде этого:

Answer 1

У вас есть тон сэмплов и уроков здесь: http://www.html5rocks.com/en/tutorials/#webaudio

На данный момент он работает в последнем Chrome и последнем последнем Firefox (Opera?).

Демоверсии: http://www.chromeexperiments.com/tag/audio/

Чтобы сделать это сейчас, для всех посетителей веб-сайта вы можете проверить SoundManagerV2.js, которые проходят через флэш-прокси, для доступа к аудиоданным http://www.schillmania.com/projects/soundmanager2/demo/api/ (они уже работают на ядре HTML5, выпустить его, как только браузеры его реализуют)

Возможность рисовать на холсте 3 разных аудиоданных: WaveForm, Equalizer и Peak.

soundManager.defaultOptions.whileplaying = function() { // AUDIO analyzer !!!
    $document.trigger({ // DISPATCH ALL DATA RELATIVE TO AUDIO STREAM // AUDIO ANALYZER 
        type             : 'musicLoader:whileplaying',
        sound            : {
            position         : this.position,          // In milliseconds
            duration         : this.duration,
            waveformDataLeft : this.waveformData.left, // Array of 256 floating-point (three decimal place) values from -1 to 1
            waveformDataRight: this.waveformData.right,
            eqDataLeft       : this.eqData.left,       // Containing two arrays of 256 floating-point (three decimal place) values from 0 to 1
            eqDataRight      : this.eqData.right,      // ... , the result of an FFT on the waveform data. Can be used to draw a spectrum (frequency range)
            peakDataLeft     : this.peakData.left,     // Floating-point values ranging from 0 to 1, indicating "peak" (volume) level
            peakDataRight    : this.peakData.right
        }
    });
};

С HTML5 вы можете получить:

var freqByteData = new Uint8Array(analyser.frequencyBinCount);
var timeByteData = new Uint8Array(analyser.frequencyBinCount);
function onaudioprocess() {
    analyser.getByteFrequencyData(freqByteData);
    analyser.getByteTimeDomainData(timeByteData);
    /* draw your canvas */
}

Время работать! ;)

Answer 2

Это пока невозможно, за исключением извлечения звука в виде двоичных данных и распаковки MP3 (не форте JavaScript), или , может быть, с использованием Java или Flash для извлечения необходимой вам информации (это кажется возможным, но это также кажется большей головной болью, чем я лично хотел бы взять на себя).

Но вас могут заинтересовать аудиоэксперименты Дейва Хамфри , которые включают в себя некоторые интересные вещи визуализации. Он делает это, внося изменения в исходный код браузера и перекомпилируя его, так что это, очевидно, не является реалистичным решением для вас. Но эти эксперименты могут привести к добавлению новых функций к элементу <audio> в будущем.

Answer 3

Выполните выборки через БПФ, а затем отобразите энергию в данном диапазоне частот как высоту графика в данной точке. Обычно вам нужно, чтобы диапазоны частот составляли примерно от 20 Гц слева до примерно частоты дискретизации / 2 справа (или 20 КГц, если частота дискретизации превышает 40 КГц).

Хотя я не уверен, что сделаю это в JavaScript. Не поймите меня неправильно: JavaScript вполне способен реализовать FFT - но я совсем не уверен, что сделаю это в режиме реального времени. OTOH, для просмотра пользователями вы можете получать около 5-10 обновлений в секунду, что, вероятно, будет значительно более легкой целью. Например, 20 мс сэмплов, обновляемых каждые 200 мс, могут быть наполовину разумными, хотя я определенно не могу гарантировать, что вы сможете справиться с этим.

Answer 4

http://ajaxian.com/archives/amazing-audio-sampling-in-javascript-with-firefox

Проверьте исходный код, чтобы увидеть, как они визуализируют аудио

Answer 5

Для этого вам нужно будет выполнить преобразование Фурье (ищите БПФ), которое будет медленным в javascript, и в настоящее время невозможно в реальном времени.

Если вы действительно хотите сделать это в браузере, я бы посоветовал сделать это в java / silverlight, поскольку они обеспечивают самую высокую скорость обработки чисел в браузере.