Q

如何在HTML5畫布上呈現音頻波形？

2012-09-02 76 views 15 likes

15

我想爲音頻文件（ogg和/或mp3）呈現波形到畫布元素。如何在HTML5畫布上呈現音頻波形？

我想知道是否有任何庫可以使這個簡單？我正在尋找這些行的結果：http://plucked.de/

2012-09-02 nak

A

回答

20

https://github.com/katspaugh/wavesurfer.js可能是你在找什麼。

2012-09-02 07:42:42 nak

+0

您知道如何使用它，無需等待波形出現，然後才能播放歌曲？它真的很慢：/（看看我的網站測試：[鏈接]（http://patrickcosta.webs.com/index.html） –

+0

不，我不希望你找到一種方式！我結束了工作另一個項目 – nak

+0

任何OSS的替代品？以上是在Creative Commons 3 ... –

5

如果您不想下載文件的內容，則必須在服務器上準備波形圖像或數據。前段時間英國廣播公司（是的，英國媒體公司）開源的一套工具，以有效地做到這一點。在他們的博客上描述了所有內容：http://www.bbc.co.uk/rd/blog/2013/10/audio-waveforms

不久：在Linux服務器端，您必須使用audiowaveform命令行工具將聲音文件（FLAC，WAV或MP3）轉換爲基於JSON的波形插值。接下來，您將JSON數據提供給瀏覽器客戶端，該客戶端將使用waveform-data.js呈現畫布元素上的波形。

2015-12-23 19:56:56 gertas

1

下面是另一個波形js插件，根據MIT許可證，但它可能特定於SoundCloud並需要額外的工作。

http://www.waveformjs.org/

2015-12-28 15:56:08 Why

+3

歡迎來到Stack Overflow！只是鏈接到一個庫不是一個好的答案。解釋爲什麼它解決了這個問題，並且使用庫提供代碼這樣做會使問題得到更好的解答。請參閱：[**如何以社區友好的方式鏈接到外部資源？]（https ：//meta.stackexchange.com/questions/94022/how-can-i-link-to-an-external-resource-in-a-community-friendly-way） –

相關問題