The Siri wave replicated in a JS library.
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit 8a53442 Jun 2, 2018
Failed to load latest commit information.
tests Refactored all the things and included audio tests Oct 19, 2016
LICENSE Create LICENSE Sep 22, 2015 Update Jun 1, 2018
index.html Removed ios 9 Oct 19, 2016
package.json 2.0.0 Oct 19, 2016
siriwave.js fix typo Feb 14, 2017
test.html Closed #14 Oct 8, 2016



Have you ever thought on how to get the Siri wave effect on your website or mobile app?

SiriWaveJS is a library that easily allows you to get this effect.

Embed the script... and Surf!



<div id="siri-container"></div>
<script src="/path/to/your/siriwave.js"></script>
var siriWave = new SiriWave({
	container: document.getElementById('siri-container'),
	width: 640,
	height: 200,
	speed: 0.2,
	color: '#000',
	frequency: 2

Constructor options

style (String, default: 'none')

  • default - Default iOS9- style
  • ios9 - Style of for iOS9+

container (DOM Object)

The DOM container where the canvas to draw the wave is added.

[speed] (Number, from 0 to 1, default: 0.1)

The speed of the wave.

[amplitude] (Number, from 0 to 1, default: 1)

The noise (amplitude) of the wave.

[frequency] (Number, from 0 to N, default: 1)

The frequency of the wave.

Not available in iOS9 Style

[color] (String, Color, default: #fff)

The color of the wave, in hexadecimal form (#336699, #FF0)

Not available in iOS9 Style

[cover] (Boolean, default: false)

The canvas covers the entire width or height of the container.

[speedInterpolationSpeed] (Number)

The speed to interpolate the speed property.

[amplitudeInterpolationSpeed] (Number)

The speed to interpolate the amplitude property.



Start the animation


Stop the animation.


Set the new value of speed (animated)


Set the new value of amplitude (animated)

Projects/examples that uses this script

Some math