在 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

这可用于在画布中绘图。 https://github.com/bbcrd/waveform-data.js

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

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