html5音频文件生成波形图代码

作者：菜鸟追梦旅行 | 2024-02-22 12:50:21

踩

h5文件导出波形

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8290

本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、能不能开头不要废话？

能！

如果你想实现下图所示的波形图效果，可以借助wavesurfer.js。

二、了解wavesurfer.js

要想实现一个音频的波形效果，很简单，按照下面的步骤来就好了！

三、显示声音波形图

引入JS：

如果是学习测试，可以用上面的在线地址；如果是实际开发，请下载到本地。

写入一个

容器，用来呈现波形图，例如：

使用全局的WaveSurfer对象创建一个实例：

var wavesurfer = WaveSurfer.create({

container: '#waveform'

});

用创建的wavesurfer去加载我们的音频资源，可以是本地mp3：

wavesurfer.load('../audio/zxx.mp3');

也可以是在线地址&#x

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/130179