【问题标题】:How to render audio waveform on HTML5 canvas? [closed]如何在 HTML5 画布上渲染音频波形? [关闭]
【发布时间】:2012-08-27 09:15:40
【问题描述】:

我想将音频文件(ogg 和/或 mp3)的波形渲染到画布元素。

我想知道是否有任何库可以使这变得简单?我正在寻找这样的结果:http://plucked.de/

【问题讨论】:

    标签: javascript html canvas


    【解决方案1】:

    https://github.com/katspaugh/wavesurfer.js 可能就是您要找的。​​p>

    【讨论】:

    • 你知道如何使用它而不必等待波浪出现才能播放歌曲吗?它真的很慢:/(看看我的网站测试:link
    • 不,我没有,我希望你找到了方法!我最终从事另一个项目。
    • 任何 OSS 替代品?以上是在知识共享 3 下发布的……
    • @AinTohvri 我不知道,如果你发现了什么请分享
    • @nak 如果音频源是麦克风而不是文件怎么办? wavesurfer 还能用吗?
    【解决方案2】:

    如果您不想下载文件内容,则必须在服务器上准备波形图像或数据。

    前段时间,BBC(是的,英国媒体公司)开源了一套工具来有效地做到这一点。所有内容都在他们的博客上进行了描述:http://www.bbc.co.uk/rd/blog/2013/10/audio-waveforms

    简而言之:在 Linux 服务器端,您必须使用 audiowaveform 命令行工具将声音文件(FLAC、WAV 或 MP3)转换为基于 JSON 的波形插值。接下来,您将 JSON 数据提供给浏览器客户端,浏览器客户端将使用 waveform-data.js 在画布元素上呈现波形。

    【讨论】:

      猜你喜欢
      • 2012-07-12
      • 2016-06-14
      • 2010-10-28
      • 2018-06-09
      • 2019-05-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多