JarCasting
JarCasting JarCasting

siriwave

WebJar for siriwave

License

License

MIT
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

siriwave
Last Version

Last Version

1.3.2
Release Date

Release Date
Type

Type

jar
Description

Description

siriwave
WebJar for siriwave
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/kopiro/siriwave

Download siriwave

Filename Size
siriwave-1.3.2.pom
siriwave-1.3.2.jar 3 MB
siriwave-1.3.2-sources.jar 22 bytes
siriwave-1.3.2-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/siriwave/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>siriwave</artifactId>
    <version>1.3.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/siriwave/
implementation 'org.webjars.npm:siriwave:1.3.2'
// https://jarcasting.com/artifacts/org.webjars.npm/siriwave/
implementation ("org.webjars.npm:siriwave:1.3.2")
'org.webjars.npm:siriwave:jar:1.3.2'
<dependency org="org.webjars.npm" name="siriwave" rev="1.3.2">
  <artifact name="siriwave" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='siriwave', version='1.3.2')
)
libraryDependencies += "org.webjars.npm" % "siriwave" % "1.3.2"
[org.webjars.npm/siriwave "1.3.2"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : lerp jar [1.0.3,2)
org.webjars.npm : raf jar [3.4.0,4)

Project Modules

There are no modules declared in this project.

SiriWave

The "Apple Siri" wave replicated in pure Javascript using the Canvas API.

Read blog post here

Demo

npm version

Classic style

iOS 9+ style

Usage

Browser (via CDN) usage

<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";

Init

Create a div container and instantiate a SiriWave object

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

Constructor options

Key Type Description Default Required
container DOMElement The DOM container where the DOM canvas element will be added. null yes
style "ios", "ios9" The style of the wave. "ios" no
ratio Number Ratio of the display to use. Calculated by default. calculated no
speed Number The speed of the animation. 0.2 no
amplitude Number The amplitude of the complete wave-form. 1 no
frequency Number The frequency of the complete wave-form. Only available in style "ios" 6 no
color String Color of the wave. Only available in style "ios" "#fff" no
cover Bool The canvas covers the entire width or height of the container false no
autostart Bool Decide wether start the animation on boot. false no
pixelDepth Number Number of step (in pixels) used when drawed on canvas. 0.02 no
lerpSpeed Number Lerp speed to interpolate properties. 0.01 no
curveDefinition ICurveDefinition[] Override definition of the curves null no

API

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)

Grapher plots

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 by @semmel

Versions

Version
1.3.2