wavesurfer.js_使用wavesurfer.js进行动态波形可视化

傷城~ 2023-02-22 01:24 14阅读 0赞

wavesurfer.js

[![format_png][]][format_png 1]

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][format_png 1] [观看演示][format_png 1]

Start by including wavesurfer.js in your page:

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

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

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

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][format_png 1] [观看演示][format_png 1]

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][https_davidwalsh.name_wavesurfer]

wavesurfer.js

[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby93YXZlZm9ybWpzLnBuZw?x-oss-process=image/format,png
[format_png 1]: https://davidwalsh.name/demo/wavesurfer.php
[Web Audio API]: https://davidwalsh.name/web-audio-api
[configuration options]: https://wavesurfer-js.org/docs/options.html
[https_davidwalsh.name_wavesurfer]: https://davidwalsh.name/wavesurfer