wavesurfer.js

wavesurfer.js

Waveform images are an awesome addition to boring audio widgets.  They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually.  I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable waveform visualizations that take only a minute to implement.

波形图像是无聊音频小部件的绝佳补充。 它们既实用又美观，允许用户视觉导航音频。 我最近找到了waveurfer.js，这是一个了不起的波形图像实用程序，可用于Web Audio API来创建超级可自定义的波形可视化，只需一分钟即可实现。

View Demo 观看演示

Start by including wavesurfer.js in your page:

首先在页面中包含waveurfer.js：

<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>

Create an instance of WaveSurfer, passing the element's selector and other configuration options:

创建WaveSurfer的实例，并传递元素的选择器和其他配置选项 ：

var wavesurfer = WaveSurfer.create({ // Use the id or class-name of the element you created, as a selector container: '#waveform', // The color can be either a simple CSS color or a Canvas gradient waveColor: 'grey', progressColor: 'hsla(200, 100%, 30%, 0.5)', cursorColor: '#fff', // This parameter makes the waveform look like SoundCloud's player barWidth: 3 });

Lastly, direct wavesurfer.js to load the the audio file:

最后，直接wavesurfer.js加载音频文件：

wavesurfer.load('RodStewartMaggieMay.mp3');

Adding buttons to play pause, skip, and mute/unmute is easy with wavesurfer.js as well:

使用wavesurfer.js也可以轻松添加添加按钮来播放暂停，跳过和静音/取消静音：

<button onclick="wavesurfer.skipBackward()"> Backward </button> <button onclick="wavesurfer.playPause()"> Play | Pause </button> <button onclick="wavesurfer.skipForward()"> Forward </button> <button onclick="wavesurfer.toggleMute()"> Toggle Mute </button>

wavesurfer.js highlights each bar as the song moves on, even allowing you to skip throughout the song as you click on points in the waveform visualization!

当歌曲前进时，wavesurfer.js会突出显示每个小节，甚至允许您在单击波形可视化中的点时跳过整首歌曲！

View Demo 观看演示

wavesurfer.js takes only a moment to implement but with its massive configuration list you can spend as much time as you'd like making the waveform visualization fit your branding.

Wavesurfer.js只需花费一点时间就可以实现，但是凭借其庞大的配置列表，您可以花费尽可能多的时间来使波形可视化适合您的品牌。

翻译自: https://davidwalsh.name/wavesurfer

wavesurfer.js

相关资源：videojs-wavesurfer, 为音频和视频文件添加可以导航波形的video.js 插件.zip