Siri-style Audio Waveform With JavaScript And Canvas – siriwave.js

Category: Javascript , Recommended | February 22, 2021
Author: kopiro
Views Total: 73 views
Official Page: Go to website
Last Update: February 22, 2021
License: MIT

Preview:

Siri-style Audio Waveform With JavaScript And Canvas – siriwave.js

Description:

siriwave.js is a JavaScript library that enables you to draws an animated, customizable, Siri-style audio waveform using plain JavaScript and HTML5 canvas.

How to use it:

1. Install and import the siriwave.js as an ES module.

# Yarn
$ yarn add siriwave

# NPM
$ npm i siriwave
import SiriWave from "siriwave";

2. Or load the siriwave.umd.min.js JavaScript library from dist folder.

<script src="dist/siriwave.umd.js"></script>

3. Create a container to place the Siri waveform.

<div id=”example”></div>

4. Draw a basic Siri waveform.

var instance = new SiriWave({
    container: document.getElementById("example"),
    width: 300,
    height: 120,
});

5. Determine the wave style. Either ‘ios’ (default) or ‘ios9’.

var instance = new SiriWave({
    container: document.getElementById("example"),
    width: 300,
    height: 120,
    style: 'ios9'
});

6. Override the default definition of the curves.

// classic
var instance = new SiriWave({
    container: document.getElementById("example"),
    width: 300,
    height: 120,
    curveDefinition: [
    {
      attenuation: -2,
      lineWidth: 1,
      opacity: 0.1,
    },
    {
      attenuation: -6,
      lineWidth: 1,
      opacity: 0.2,
    },
    {
      attenuation: 4,
      lineWidth: 1,
      opacity: 0.4,
    },
    {
      attenuation: 2,
      lineWidth: 1,
      opacity: 0.6,
    },
    {
      attenuation: 1,
      lineWidth: 1.5,
      opacity: 1,
    }]
});
// modern (iOS 9+)
var instance = new SiriWave({
    container: document.getElementById("example"),
    width: 300,
    height: 120,
    curveDefinition: [
    {
      color: "255,255,255",
      supportLine: true,
    },
    {
      color: "15, 82, 169",
    },
    {
      color: "173, 57, 76",
    },
    {
      color: "48, 220, 155",
    }];
});

7. More options to customize the Siri waveform.

var instance = new SiriWave({

    // ratio of the display
    ratio: 1,

    // animation speed
    speed: 0.2, 

    // amplitude
    amplitude: 1, 

    // frequency (iOS style only)
    frequency: 6, 

    // curve color (iOS style only)
    color: "#fff", 

    // make the canvas cover the entire width or height of the container
    cover: false,

    // auto start on init
    autostart: true, 

    // number of step (in pixels) used when drawed on canvas
    pixelDepth: 0.02, 

    // lerp speed to interpolate properties
    lerpSpeed: 0.1
    
});

8. API methods.

// start the animation
instance.start();

// stop the animation
instance.stop();

// set animation speed
instance.setSpeed(Value);

// set amplitude
instance.setAmplitude(value);

// destroy the instance
instance.dispose();

You Might Be Interested In:


Leave a Reply