從音頻呈現圖像

是否有可能呈現音頻文件的可視化？從音頻呈現圖像

也許與SoundManager2 /帆布/ HTML5音頻？你知道一些工藝嗎？

我想創造這樣的事情：

alt text

來源

2010-01-21 Poru

我很欣賞你的「something」 - 「sth」的新縮寫。被過度使用。 – iandisme 2010-01-21 21:19:26

-1

這是不可能的，除了還通過提取音頻作爲二進制數據和拆包的MP3（不是JavaScript的長處），或也許通過使用Java或Flash來提取您需要的信息位（這似乎是可能的，但它也似乎比我個人想要承擔的更頭痛）。

但您可能對Dave Humphrey's audio experiments感興趣，其中包括一些很酷的可視化工具。他通過修改瀏覽器源代碼並重新編譯來做到這一點，所以這顯然不適合您。但是這些實驗可能會導致未來將新功能添加到<audio>元素中。

來源

2010-01-21 22:01:11

更新：webAudio，mozAudio和像JS-Mad這樣的項目讓這種情況發生......甚至在無法支持它的瀏覽器中。事實上，一些瘋狂的polyfilling jsMad可以解碼像IE這樣的超大型瀏覽器中的音頻 – ShrekOverflow 2013-01-11 17:05:56

-1

爲此，您需要做的傅立葉變換（尋找FFT），這將是目前在實時在JavaScript慢，不可能。

如果你真的想在瀏覽器中這樣做，我會建議用java/silverlight來做，因爲它們可以在瀏覽器中提供最快的數字運算速度。

來源

2010-01-21 21:34:30

通過FFT運行樣本，然後將給定頻率範圍內的能量顯示爲給定點處圖形的高度。您通常希望頻率範圍從左邊的20 Hz左右到大約右邊的採樣率/ 2（如果採樣率超過40 KHz，則爲20 KHz）。

雖然我不太確定如何在JavaScript中這樣做。不要誤解我的意思：JavaScript完全可以實現FFT - 但我並不十分確定要實時做到這一點。 OTOH，用戶查看，每秒可以獲得5-10次更新，這可能是一個相當容易達到的目標。例如，每200毫秒更新一次樣本20毫秒可能是期望值的一半，但我當然不能保證您能夠跟上這一點。

來源

2010-01-21 21:39:29

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

退房的源代碼，看看他們是如何可視化音頻

來源

2010-01-21 21:57:31

你有樣本和教程的口吻在這裏：（？歌劇）http://www.html5rocks.com/en/tutorials/#webaudio

它在過去的Chrome和最後的最後Firefox瀏覽器的時刻。

演示：http://www.chromeexperiments.com/tag/audio/

要做到這一點，現在，對於一個網站的所有訪問者，您可以檢查誰穿過閃光「代理」 SoundManagerV2.js進入音頻數據http://www.schillmania.com/projects/soundmanager2/demo/api/（他們已經在HTML5工作音頻引擎，只要專業瀏覽器實現它就可以發佈它）

由您決定在畫布中繪製3種不同的音頻數據：WaveForm，均衡器和峯值。

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 */ 
}

上班時間！ ;）

來源

2012-05-14 18:57:08 molokoloco

從音頻呈現圖像

回答

相關問題