banner 728x90

Dynamic waveform visualizations with wavesurfer.js

In Mobile Web Development 51 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: 
    Script & Style Show: Episode 1: Marc Grabanski
    Script & Style Show: Episode 1: Marc Grabanski
    During this second episode of the Script
    AWS AppSync region expansion and new functions for API keys
    AWS AppSync region expansion and new functions for API keys
    AWS AppSync, a managed GraphQL service with
    What is the best time to involve your mobile app users?
    What is the best time to involve your mobile app users?
    When talking to customers about mobile analysis,
    How to make a Twitter bot with Node.js
    How to make a Twitter bot with Node.js
    Twitter bots have been in the news

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

    Must read×

    Top