SiriWave

The "Apple Siri" wave replicated in pure Javascript using the Canvas API. To learn more about the project, read the blog post here, check the demo or codepen.

iOS (classic) style

The classic, pre-iOS9 style.

iOS9 style

The new fluorescent wave introduced in iOS9.

iOS13 style

work in progress

The wave reinvented as a bubble.

Usage

Browser (via CDN) usage

Import the UMD package via the unpkg CDN and it's ready to use.

<script src="https://unpkg.com/siriwave/dist/siriwave.umd.min.js"></script>

ES module

Install it through npm install siriwave or yarn add siriwave first:

import SiriWave from "siriwave";

Initialize

Create a div container and instantiate a new SiriWave object:

<div id="siri-container"></div>
<script>
  var siriWave = new SiriWave({
    container: document.getElementById("siri-container"),
    width: 640,
    height: 200,
  });
</script>

Constructor options

API

new SiriWave

curveDefinition

By passing this argument, you're overriding the default curve definition resulting in a completely different style.

The default definition for the ios classic style is:

[
  { 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 },
];

and it results in 5 different sin-waves with different parameters and amplitude.

The ios9 style definition is instead:

[
  { color: "255,255,255", supportLine: true },
  { color: "15, 82, 169" }, // blue
  { color: "173, 57, 76" }, // red
  { color: "48, 220, 155" }, // green
];

and it results in 3 different colored waves + 1 support wave that needs to be there.

start()

Start the animation

stop()

Stop the animation.

setSpeed(newValue)

Set the new value of speed (animated)

setAmplitude(value)

Set the new value of amplitude (animated)

dispose()

Stop the animation and destroy the canvas, by removing it from the DOM. Subsequent start() calls on this SiriWave instance will fail with an exception.

Grapher plots

• GCX default
• GCX iOS 9

Build and development

If you wanna make some modifications in your local environment, use:

yarn dev

```

this will create a watchable build with RollupJS and automatically create a server to see your changes in the browser.

To finally build all targets:

```

yarn build

```

## QA

#### How do I integrate this library with a microphone user input?

You can find an excellent demo [here](https://jsitor.com/PPQtOp9Yp) by @semmel
```