javascript - 在 HTML5 Canvas 中创建 MP3 波形的缩略图

Question

我想从服务器上的 MP3 文件创建 WaveForm 图像。

我尝试过使用 wavesurfer.js插入。我宁愿不使用插件，但我找不到教程或任何好的资源。

现在，我想在我的服务器上保存波形的缩略图(来自 mp3 文件)。由于wavesurfer.js 使用 HTML5 Canvas，我不知道如何创建波形的缩略图。如何创建缩略图？

Answer 1

本文解释了他们如何在浏览器中获取音频波形图像。 http://www.bbc.co.uk/rd/blog/2013/10/audio-waveforms

这可用于与波形数据交互、生成波形数据等(例如，转换为 JSON)。 https://github.com/bbcrd/peaks.js

这可用于在 Canvas 上绘图。 https://github.com/bbcrd/waveform-data.js

您可以通过将 Canvas 图像缩放到所需大小然后将其上传到您的服务器来创建缩略图，尽管 wavesurfer.js 也是如此

您可以使用http://www.w3schools.com/tags/canvas_scale.asp缩放 Canvas 图像。您可以使用 Canvas 的宽度和高度属性来更改 Canvas 大小。