Last active
November 14, 2019 21:56
-
-
Save nfreear/3af427127b75e63f4be842011b3ed7f8 to your computer and use it in GitHub Desktop.
Scribbletune editor (Javascript / JSON / YAML) ~~ in the browser!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> <title> Scribbletune — editor </title> | |
| <style> body { font: 1rem/1.6 sans-serif; margin: 1rem auto; max-width: 37rem; } button { font-size: 2rem; margin: 1rem 3rem; } h1 { font-weight:400; } #editor { border: 3px solid #777; border-radius: .3rem; font-size: 1.3rem; } </style> | |
| <center> | |
| <h1> Scribbletune editor </h1> | |
| <button id=start> Start </button> <button id=stop> Stop </button> | |
| </center> | |
| <p> Click below to edit: </p> | |
| <pre id=editor ><code class="yaml" contenteditable="true" title="Click to EDIT me!">--- | |
| # A comment ... (YAML) | |
| metadata: | |
| title: Example 1 ~~ Play a simple poly synth. | |
| author: Jo Bloggs (https://jos.sounds.play) | |
| clips: | |
| - synth: Synth | |
| pattern: "-x" | |
| notes: C4 D4 C4 D#4 C4 D4 C4 Bb3 | |
| sequence: | |
| start: '0' | |
| stop: '8:1' | |
| - synth: PolySynth | |
| pattern: xx[xx] | |
| notes: C3 Cm-3 | |
| sequence: | |
| start: '1:2' | |
| stop: '6:1' | |
| - pattern: xxxx | |
| sample: https://scribbletune.com/sounds/kick.wav | |
| sequence: | |
| start: '0' | |
| stop: '10' | |
| </code></pre> | |
| <p> Built on: <a href="https://scribbletune.com/">Scribbletune </a> and <a href="https://tonejs.github.io/">Tone.js</a>. </p> | |
| <script type="application/json" id="scribble-json-1"> | |
| { | |
| "#": " A comment ... ", | |
| "metadata": { | |
| "title": "Example 1 ~~ Play a simple poly synth.", | |
| "author": "Jo Bloggs <jo@bloggs.com> (https://jos.sounds.io)" | |
| }, | |
| "clips": [ | |
| { | |
| "synth": "Synth", | |
| "pattern": "-x", | |
| "notes": "C4 D4 C4 D#4 C4 D4 C4 Bb3", | |
| "tone_seq": { | |
| "start": "0", | |
| "stop": "8:1" | |
| } | |
| }, { | |
| "synth": "PolySynth", | |
| "pattern": "xx[xx]", | |
| "notes": "C3 Cm-3", | |
| "tone_seq": { | |
| "start": "1:2", | |
| "stop": "6:1" | |
| } | |
| }, { | |
| "pattern": "xxxx", | |
| "sample": "https://scribbletune.com/sounds/kick.wav", | |
| "tone_seq": { | |
| "start": "0", | |
| "stop": "10" | |
| } | |
| } | |
| ] | |
| } | |
| </script> | |
| <script type="application/json" id="scribble-json-2"> | |
| { | |
| "metadata": { | |
| "title": "Ode to Joy", | |
| "author": "Beethoven (https://8notes.com/scores/12180.asp)" | |
| }, | |
| "clips": [ | |
| { | |
| "synth": "Synth", | |
| "pattern": "xxxx", | |
| "notes": "E4 E4 F4 G4 G4 F4 E4 D4 C4 C4 D4 E4", | |
| "tone_seq": { "start": "0", "stop": "4:0" } | |
| }, { | |
| "synth": "Synth", | |
| "pattern": "x[_][x]x__", | |
| "notes": "E4 D4 D4", | |
| "tone_seq": { "start": "4:0", "stop": "5:0" } | |
| }, { | |
| "#": "Line 2", | |
| "synth": "Synth", | |
| "pattern": "xxxx", | |
| "notes": "E4 E4 F4 G4 G4 F4 E4 D4 C4 C4 D4 E4", | |
| "tone_seq": { "start": "5:0", "stop": "7:4" } | |
| }, { | |
| "synth": "Synth", | |
| "pattern": "x[_][x]x__", | |
| "notes": "D4 C4 C4", | |
| "tone_seq": { "start": "8:0", "stop": "8:4" } | |
| } | |
| ] | |
| } | |
| </script> | |
| <script src="https://unpkg.com/tone@13.8.25/build/Tone.js"></script> | |
| <script src="https://unpkg.com/scribbletune@3.4.1/dist/scribbletune.js"></script> | |
| <script> | |
| const scribble = window.scribble; | |
| // Fetch the JSON from a HTML element, or an external file ?! | |
| const M_DEMO = document.location.href.match(/\?demo=(1|2)/); | |
| const DEMO = M_DEMO ? M_DEMO[ 1 ] : 1; | |
| const scribbleJson = JSON.parse(document.querySelector(`#scribble-json-${ DEMO }`).innerText); | |
| // Was: document.querySelector('#scribble-editor').innerText = JSON.stringify(scribbleJson, null, 2); | |
| // TODO: JSON schema validation | |
| // ... | |
| // Array. "Basically, the browser version of Scribbletune, returns a Tone.js Sequence which has a start method." | |
| let toneSequences = []; | |
| console.warn('Scribbletune JSON:', scribbleJson, scribble); | |
| scribbleJson.clips.forEach(clipData => { | |
| const seqObj = clipData.tone_seq; | |
| delete clipData.tone_seq; | |
| const seq = scribble.clip(clipData); | |
| seq.start(seqObj.start); | |
| if (typeof seqObj.stop == 'string') { // Optional. | |
| seq.stop(seqObj.stop); | |
| } | |
| toneSequences.push(seq); | |
| console.debug('Seq:', typeof seq, seq); | |
| }) | |
| </script> | |
| <script> | |
| // Wire up start/stop buttons. | |
| onClickButton('#start', ev => Tone.Transport.start()) | |
| onClickButton('#stop' , ev => Tone.Transport.stop() ) | |
| function onClickButton(selector, handler) { | |
| document.querySelector(selector).addEventListener('click', ev => handler(ev)); | |
| } | |
| </script> | |
| <link href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css" rel=stylesheet /> | |
| <link href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/a11y-dark.min.css" rel=stylesheet /> | |
| <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script> | |
| <!-- <script src="https://unpkg.com/highlight.js@9.15.10/lib/highlight.js"></script>--> | |
| <script> | |
| hljs.initHighlightingOnLoad(); | |
| </script> | |
| <pre> | |
| © 2019-11-13 Nick Freear | License: MIT | |
| * https://gist.github.com/nfreear/3af427127b75e63f4be842011b3ed7f8 | |
| * https://scribbletune.com/documentation/browser/browser-clip | |
| * https://tonejs.github.io/docs/13.8.25/Sequence | |
| * https://github.com/Tonejs/Tone.js/wiki/Time | |
| </pre> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment