banner 728x90

Dynamic waveform visualizations with wavesurfer.js

In Mobile Web Development 119 views
banner 728x90

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Dynamic waveform visualizations with wavesurfer.js

Waveform images are a great audition for boring audio widgets. They can be both functional and aesthetically pleasing, allowing users to visually navigate through audio. Recently, I found wavesurfer.js, a great waveform imaging tool that uses web audio API to create super-customizable waveform visualizations that take just a minute to deploy.

Start recording wavesurfer.js on your page:

Create an instance of WaveSurfer, go through the selector of the element and other configuration options:

var wavesurfer = WaveSurfer.create ();

Finally, wavesurfer.js directly to load the audio file:

wavesurfer.load (RodStewartMaggieMay.mp3);

Adding buttons to start pause, skip and mute / cancel is also easy with wavesurfer.js:








wavesurfer.js marks each bar while continuing the song, where you can even skip the whole track while clicking on points in the waveform visualization!

wavesurfer.js takes only a moment to implement, but with its huge configuration list you can spend as much time as you want the waveform to suit your branding.


banner 728x90
author
Author: 
    Build a user settings store with AWS AppSync
    Build a user settings store with AWS AppSync
    Amazon Cognito Sync is a service that
    Synchronize user settings for Android with AWS AppSync
    Synchronize user settings for Android with AWS AppSync
    Amazon Cognito Sync is a service that
    Script & Style Show: Episode 10: Dojo
    Script & Style Show: Episode 10: Dojo
    In this episode welcome David and Todd

    Leave a reply "Dynamic waveform visualizations with wavesurfer.js"

    Must read×

    Top