Demo/Example tease:
https://milovana.com/webteases/showteas ... 80f6304c34
JSON (right-click, save-as):
https://milovana.com/webteases/geteossc ... 80f6304c34
It's "simplified" in respect to how you interface with it and not having the overhead of visualization stuff. (The core code is still a bit of an anti-pattern mess, but you don't need to look at that.)
To INSTALL or UPDATE the core SimpleBeats functions/actions/files into an existing tease:
1. Open The Simple Beats demo as the source in Eos Magpie:
https://codepen.io/fapnip/full/GRjwPXP?id=51698&key=80f6304c34
2. Paste your tease's private share link as the target in Eos Magpie.
3. If installing for the first time, check the box for the "simpleBeatsExample" Magpie module. ("SimpleBeats" and "setTimeout" modules should automatically select.) If updating, flip the switch for "Apply Auto Updates from Source".
4. Click the download button that will appear.
5. In the Eos Editor for your tease, download a back-up copy of your existing tease, just in case. (Seriously. Do it. Things can go wrong.)
6. Restore the downloaded merged magpie JSON from step 4 over your existing tease.
7. Ask for help here.
After you've added the base code to your start page (first two IF actions (!window.setTimeout and !window.SimpleBeats) in the demo's start page), and created your SimpleBeats instance and loaded your beat samples (third IF (!window.beats) action), you can interface with your new instance (called "beats" in the example) via:
Code: Select all
beats.bpm(120) // Start a metronome of 120 bpm (default pattern is '+AF')
beats.bpm(300) // change to 300 bpm (any sane number should work)
beats.bpm(36) // change to 36 bpm
beats.bpm(beats.getBpm() + 10) // increase bpm a touch
beats.bpm(36, '+AH+AH+AF') // change to 36 bpm, but with a triple tap pattern at twice the bpm
beats.bpm(120, '+AF+AF+AF+AF+AF+_F+_F+_F') // change to 120 bpm, with a pattern of 5 beats followed by 3 rests.
beats.setVolume(beats.getVolume() - 0.1) // Decrease metronome volume a touch.
beats.stop() // stop the metronome
beats.bpm(100, '+AF', 30, function(){pages.goto('my-next-page')}) // Since v0.9.0, play +A @ 100BPM, 30 times, then run a function.
beats.bpm(100) // Re-start it (Will run last pattern used if a new pattern is not provided.)
if (beats.isPlaying()) {
// Do something different if the metronome is running
}
// Or do something crazy, like:
// Cycle between 80 and 200 in 5 bpm steps, stepping on every beat.
beats.bpm(80, '+AF<eval>var startBpm = 80; var endBpm = 280; this.$bpmStep = this.$bpmStep || 5; var newBpm = this.getBpm() + this.$bpmStep; if(newBpm > endBpm || newBpm < startBpm){this.$bpmStep = 0 - this.$bpmStep; newBpm = Math.max(Math.min(this.getBpm() + this.$bpmStep, endBpm), startBpm);} this.setBpm(newBpm)</eval>')
// Or goto the start page after every 6 iterations of the beat pattern:
beats.bpm(80, '+AF<eval>if(this.getLoopCount() % 6 === 0) { pages.goto('start') }</eval>')
// ('this' in beat a eval is available as of v0.8.2, and is equal to the SimpleBeats instance running the pattern.)
// Or, as of v0.8.1, you can add an event listener for each loop, and do what you will in it
// Define your listener function (your listener function should be defined only once, like in your init script)
// If you do it in an eval, you'll need to wrap it in something like: if (!window.myLoopListener) { ... }
function myLoopListener(e) {
// 'this' === the beats instance that dispatched the event
// 'e' === Event payload (timestamp, type, etc.)
console.log('Last beat in loop', this, e)
if(this.getLoopCount() >= 20) {
// We did 20 or more beats. That's enough
this.stop()
}
}
// Add the listener to your SimpleBeats instance
beats.addEventListener('loop', myLoopListener)
// and when you no longer want to listen
beats.removeEventListener('loop', myLoopListener)
(ignore everything below until you've got your head mostly wrapped around the above, and you already have some simple beats playing.)
You can create multiple SimpleBeats instances, and each instance can contain multiple beat sounds.
The example "beats" instance is created by:
1. Creating two Audio.play actions, both pointing to the exact same mp3 sample, with Volume = 0, Loops = 1, "Continue across pages" enabled, then with the first Audio.play action having an Identifier of "beatA-1" and the second of "beatA-2".
If you had more sample sounds you wanted to use, you could add two more Audio.play actions for each sample, with the identifiers "beatB-1" and "beatB-2", then "beatC-1" and "beatC-2", etc., all the way to to "Z". (If you're insane, you could move on to lower case a-z to load a total of 52 samples.) These can then be used in your beat patterns like beats.bpm(120, '+AF+BF+CF');, with the "A", "B" and "C" relating to the letter in your sample Identifier.
To get a little ahead, you can also add a prefix to the sample Identifiers. For example, "alt1-beatA-1", "alt1-beatA-2", etc., with "alt1-" being the prefix. (More on this later. The "beats" instance example does not use a prefix.)
2. In an Eval action immediately following the audio actions, you create your SimpleBeats instance:
Code: Select all
// Create new global "beats" instance of SimpleBeats
window.beats = new SimpleBeats()
// Now load all "beat[A-Za-z]-[1-2]" samples into that instance.
beats.loadSamples()
Now, if you created some Audio play actions having a prefix in the Identifier name, like "alt1-beatA-1", "alt1-beatA-2", etc., using beats.loadSamples() isn't going to load them, since it'll be looking for samples without a prefix.
To load samples with a prefix, you'd do something like:
Code: Select all
// Create new global "beats" instance of SimpleBeats
window.beats = new SimpleBeats()
// Now load all "alt1-beat[A-Za-z]-[1-2]" samples into that instance.
beats.loadSamples('alt1-')
Code: Select all
// Create new global "otherBeats" instance of SimpleBeats
window.otherBeats = new SimpleBeats()
// Now load all "alt1-beat[A-Za-z]-[1-2]" samples into that instance.
otherBeats.loadSamples('alt1-')
