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

Preview:

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
    // override the default random ranges of the curves.
    ranges: null,
    // globalCompositeOperation of the canvas, controls wave overlap design
    globalCompositeOperation: 'lighter',
    
});

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();

Changelog:

v2.4.0 (10/19/2023)

• Add ranges and globalCompositionOperation override to Siriwave Options

v2.3.0 (12/16/2021)

• Adding support for color in curveDefinition/classic

v2.2.3 (03/06/2021)

• Update