2b:null 2c:["$","title",null,{"children":"“Happy Birthday” Synchronizer | Observable | Observable"}] 31:T46b,viewof play = Inputs.button("Play tuning tone", { reduce() { // Create our audio nodes (oscillator generates the pitch, envelope controls volume) const oscillator = audio.createOscillator(); const envelope = audio.createGain(); // Set the envelope volume automation times to have a short ramp up to 100% and a longer tail back to 0% const attackTime = msPerBeat / 1000 * 0.01; const releaseTime = msPerBeat / 1000; // Configure the oscillator oscillator.type = "triangle"; oscillator.frequency.setValueAtTime(firstNote, audio.currentTime); // Configure the volume automation envelope.gain.setValueAtTime(0, audio.currentTime); envelope.gain.linearRampToValueAtTime(1, audio.currentTime + attackTime) envelope.gain.linearRampToValueAtTime(0, audio.currentTime + attackTime + releaseTime) // Connect the nodes so audio data flows oscillator.connect(envelope); envelope.connect(audio.destination); // Start generating sound, then stop after the note is done oscillator.start(); oscillator.stop(audio.currentTime + attackTime + releaseTime); } })32:[] 2f:{"id":"fd1a691f78889698","slug":"happy-birthday-synchronizer","title":"“Happy Birthday” Synchronizer","thumbnail":"e0e4c72affa69c90e9c08c1cfd4b910971a17d8cd314b62b263d767a4ea3b7ab","access_level":"public","create_time":"$D2021-04-07T21:36:49.354Z","update_time":"$D2022-07-12T18:43:28.405Z","view_time":null,"first_public_time":"$D2021-05-25T14:35:42.026Z","fork":true,"stars":16,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":824,"publish_version":824,"role":null,"authored":false,"authors":[{"type":"individual","id":"60915c927486082e","login":"molliemarie","name":"Mollie Pettit","avatar_url":"https://avatars-next.observableusercontent.com/ea4997d987555e3642bfea886f1e3c0639a3d4a9d84d149c4d8030d94f03a9d0","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":56,"collection":{"id":"919944e6e52b89b4","slug":"templates-remote-work","title":"Templates: Remote Work","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"“Happy Birthday” Synchronizer","cells":[{"id":0,"value":"md`# “Happy Birthday” Synchronizer\nSometimes you want to sing the public-domain classic “Happy Birthday to You” to someone on a call, but the lag compounds as everyone tries to follow everyone else. You need a shared clock! \n\nThis template syncs to the ${new Intl.NumberFormat(\"en-US\").format(startTime /\n duration)}th rendition since the UNIX epoch. Your singers should be as in-sync as their system clocks!\n\nWe can’t promise that it won’t still result in a cacophony of sound, but we think that’s part of the fun :)\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"lyricsAnimation = html`

\n${lyrics.map(\n ([text, time]) => html`${text}`\n)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"metronome = html`\n \n ${tick % 2 ? \"👐\" : \"🙏\"}\n restarts in ${countdown} seconds…`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"md`*1. Enter the birthday person’s name below! If their name is fewer than three syllables, consider adding “dear” before their name.*\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"name = \"dear Tony\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`\n*2. Play the below tone to start your harmonization!*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"md`*3. Now wait until the Happy Birthday song resets, and get to celebrating!*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"md`*Optional: You can adjust the beats per minute below, but watch out: if your value is different from other singers’, you won’t even start at the same time!*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"bpm = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"relativeTime = now - startTime","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"tick = Math.floor(relativeTime / msPerBeat)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"msPerBeat = (1 / bpm) * 1000 * 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"duration = (lyrics.map(([, time]) => time).slice(-1)[0] + padding) * msPerBeat","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"// pad by one measure, rounding up to an even number of beats so the metronome doesn't skip\npadding = Math.ceil(meter / 2) * 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"// beats per measure\nmeter = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"startTime = new Date(nextStartTime - duration)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"nextStartTime = {\n while (true) {\n const time = new Date(Math.ceil((Date.now() + 1) / duration) * duration);\n yield time;\n await Promises.when(time);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"countdown = Math.ceil((nextStartTime - now) / 1000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`---\n\n### Lyrics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"lyrics = [\n [\"Hap\", [0, 2]],\n [\"py \", [0, 2.5]],\n [\"birth\", [1, 0]],\n [\"day \", [1, 1]],\n [\"to \", [1, 2]],\n [\"you! \", [2, 0]],\n [\"Hap\", [2, 2]],\n [\"py \", [2, 2.5]],\n [\"birth\", [3, 0]],\n [\"day \", [3, 1]],\n [\"to \", [3, 2]],\n [\"you! \", [4, 0]],\n [\"Hap\", [4, 2]],\n [\"py \", [4, 2.5]],\n [\"birth\", [5, 0]],\n [\"day, \", [5, 1]],\n [`${name}, `, [5, 2]],\n [\"Hap\", [7, 0]], // this leaves an extra beat after the name\n [\"py \", [7, 0.5]],\n [\"birth\", [7, 1]],\n [\"day \", [7, 2]],\n [\"to \", [8, 0]],\n [\"you!\", [8, 1]]\n].map(([text, [t0, t1]]) => [text, t0 * meter + t1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"md`---\n\n### Tuning tone`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"// G4\nfirstNote = 2 ** (10 / 12) * 440 / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"audio = new (window.AudioContext || window.webkitAudioContext)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"md` ---\n\n### Customize this notebook further\nAs is, this notebook does the job it set out to do—assisting you in singing a joyous and potentially hilarious round of Happy Birthday to your coworker. But, did you know you can tweak it further? \n\nAs with any project, there are always more ideas than end up being implemented. Here are some fun ideas on how you could extend this notebook:\n- Auto-time name using [syllable](https://github.com/words/syllable).\n- Add buttons with celebratory sounds, such as party poppers, dj horn, or applause.\n- Cute little bouncing ball atop the syllables.\n- Whatever other fun ideas that come to mind. :)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"