在HTML5画布中创建MP3波形的缩略图

Question

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

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

现在，我想保存在我的服务器上的波形（从mp3文件）的缩略图。由于waves wave.js使用HTML5画布，因此我不知道如何创建波形的缩略图。我如何创建缩略图？

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缩放画布图像真实。您可以使用它的宽度和高度属性来改变画布大小。