[EOS/DEMO] Dynamic Metronome / Visualizations in Eos

[fapnip]

Here's a quick demo I tossed together to demonstrate some of what can be done with the setTimeout and setInterval polyfill for Eos.

It generates custom metronome patterns, and visualization animations in a notification title, using the timer polyfills, and a tiny single drum beat sample mp3.

Demo tease here:
https://milovana.com/webteases/showteas ... a243c56878

JSON here:
https://milovana.com/webteases/geteossc ... a243c56878

Feedback on if it worked for you or not (and what browser/device you're using if it doesn't work) would be helpful.

Edit: Updated demo to correct some typos and add tempo adjustment

[boundupone]

Thanks for this, impressive way to build more feeling of interaction into a tease.

[intermolecularpyro]

This is super cool!

Worked totally fine for me on my phone by the way.

[fapnip]

Thanks!

I've updated the demo/example to transition between metronome patterns more smoothly.

[fapnip]

Updated demo to allow you to enter your own beat patterns.

[fapnip]

Added volume fade-in/fade-out

[Darigaaz]

It works like a charm (Chrome on Windows)
This is impressive. I'll have to dig into the json to see if I could use this in my future teases

[fapnip]

I'll have to dig into the json to see if I could use this in my future teases

It's mostly undocumented, but please do give it a try!

API/Configuration may change in future versions, but as of v3.2:

1. Main things you'll need are the first 4 IF actions in the start page, and the two mp3's (the silent one for timer emulation, and the drum beat sample). If actions should be the first things in your start page, in the given order.

2. If you want to change/add beat samples, you need an MP3 with a single sample of the given beat, with no whitespace before the start of the beat sound.

Each sample needs two Audio actions defined. You'll see the example "A" beat sample Audio action definitions in the "!window.beats" (4rd) IF action. The same mp3 is defined twice. One with an ID of 'beatA-1' and another with an ID of 'beatA-2'. If you wanted to add a 'B' sample, you'd add two more Audio actions (before the eval), set the ids to 'beatB-1' and 'beatB-2', set them to continue across pages, and set the volume to almost zero. You could now use both A and B samples in a pattern via something like "+AH+BF+BH+AH+ABF". (You can define samples "A" through "Z" and "a" through "z".)

3. By default it looks for a notification with the ID 'beats' to display visualizations. If you don't want visualizations, don't create that notification. If you want to use a different notification ID, change the "var beats = new Beats()" eval to "var beats = new Beats({notificationId: 'my-notification-id'})".

4. After defining your beats object and loading the patterns (this example uses "beats" as the variable, you can use whatever) you can play your defined beat patterns via "beats.play('patternName', timeScale)", so for example: "beats.play('constant', 0.5)".

To stop the playing pattern, "beats.stop()".
To pause the playing pattern, "beats.pause()".
To re-start the previously paused pattern, if any, "beats.play()".
To change the speed of the playing pattern, "beats.setRunningTimeScale(0.3)"
To speed up the playing pattern a little, "beats.setRunningTimeScale(beats.getRunningTimeScale() - 0.025)"
To slow down the playing pattern a little, "beats.setRunningTimeScale(beats.getRunningTimeScale() + 0.025)"

("timeScale" adjusts how long each measure is. 1 == one second. In this case a (F)ull beat will be one second before the next, a (H)alf will be half a second and so on. If you set the time scale to 0.5, a (F)ull beat will be half a second, (H)alf will be quarter, and so on.)

5. Until there's more documentation, look at the last beats definition eval, in the "!window.beats" (4th) IF action or the "custom" page, for examples on how to define your beat patterns. Look at the "demo" page for how to use the beats.

6. There's a ton of undocumented stuff, like setting the number of iterations a pattern will run, defining onPatternEnd and onPatternLoop callbacks, etc. If you need help, just ask.

7. As always, you can use Magpie to merge pages, images and mp3s from one tease into another.

Edited for v3.2