Получение звуковой частоты, а затем ее рисование на холст

Question

Как получить звуковую частоту звука html5, а затем нарисовать ее на холсте?

Answer 1

Вы можете использовать новый Web Audio API, чтобы получить обработанные данные FFT (а также данные образца).

Web Audio API - это низкоуровневый высоко оптимизированный API, который поддерживается непосредственно в браузере. Но пару заметок:

• Это в рабочем состоянии (не полный)
• Это не widely supported кросс-браузер еще (но в приличных браузерах).

Отрывок взят на первой ссылке ниже:

function setupAudioNodes() { 

    // setup a javascript node 
    javascriptNode = context.createJavaScriptNode(2048, 1, 1); 
    // connect to destination, else it isn't called 
    javascriptNode.connect(context.destination); 

    // setup a analyzer 
    analyser = context.createAnalyser(); 
    analyser.smoothingTimeConstant = 0.3; 
    analyser.fftSize = 512; 

    // create a buffer source node 
    sourceNode = context.createBufferSource(); 
    sourceNode.connect(analyser); 
    analyser.connect(javascriptNode); 
} 

(обратите внимание, что некоторые из этих примеров, вероятно, написана с WebKit приставкой вызовов, так что шансы, что вам нужно использовать Chrome, чтобы увидеть их, но Web Аудио API также доступен в других браузерах).

Некоторые примеры анализаторов спектра:
http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound
http://tx81z.blogspot.mx/2012/10/quick-project-d3-html5-web-audio.html
http://www.storiesinflight.com/jsfft/visualizer_webaudio/