在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缩放画布图像。您可以使用宽度和高度属性更改画布大小。