41:null 42:["$","title",null,{"children":"New Year Countdown Demo | Decalendar | Observable"}] 48:[{"id":"5f764f47fa9b6d84b538b0d630ecb761331bd8c93cfdb0760614907fa7fb77b0e63f2542448f10b31fde9d43a5d9214220d187c0f9cfde354fa07efcfc349dd2","href":"https://static.observableusercontent.com/files/5f764f47fa9b6d84b538b0d630ecb761331bd8c93cfdb0760614907fa7fb77b0e63f2542448f10b31fde9d43a5d9214220d187c0f9cfde354fa07efcfc349dd2","name":"Auld_Lang_Syne_-_Concert_Band_-_United_States_Air_Force_Heritage_of_America_Band.mp3","type":"audio/mpeg","lastModified":1740687020186.763,"size":1900489}] 46:{"id":"950c8f5e02f3ce0b","slug":"ount","title":"New Year Countdown Demo","thumbnail":"2ae5504b8be2246074edd697054d4fa635e4fef78518314a7305509e5b466269","access_level":"public","create_time":"$D2025-02-19T18:46:10.027Z","update_time":"$D2025-03-04T19:39:34.015Z","view_time":null,"first_public_time":"$D2025-02-19T21:03:22.673Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4d2c79bb5e10ae73","login":"dec","name":"Decalendar","avatar_url":"https://avatars-next.observableusercontent.com/3c5aab661f4412ebb09266240b4c149ecdc2623ea7af89b8a12d28de877dcd08","tier":"starter_2024","bio":"","following":false},"version":996,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cad5899c8da00e88","login":"maptv","name":"Martin Laptev","avatar_url":"https://avatars-next.observableusercontent.com/151417083a7dd128b16c6956be7439a7a308f776c93e74d9ef2e0ef922bee777","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"4d2c79bb5e10ae73","login":"dec","name":"Decalendar","avatar_url":"https://avatars-next.observableusercontent.com/3c5aab661f4412ebb09266240b4c149ecdc2623ea7af89b8a12d28de877dcd08","tier":"starter_2024","role":"editor"},{"type":"individual","id":"cad5899c8da00e88","login":"maptv","name":"Martin Laptev","avatar_url":"https://avatars-next.observableusercontent.com/151417083a7dd128b16c6956be7439a7a308f776c93e74d9ef2e0ef922bee777","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"New Year Countdown Demo","cells":[{"id":0,"value":"# New Year Countdown Demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"This notebook shows how to get [Dec](https://maptv.github.io/dec) [dates](https://maptv.github.io/dec/date) for Year ${nowYear} and ${newYear}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"\n${nowYearDate}\n${newYearDate}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":523,"value":"You can change the year using the input below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":517,"value":"viewof newYear = Inputs.range([decYear, decYear + 2], {step: 1, label: \"New Year\", value: decYear + 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"nowYear = newYear - 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"nDays = 365 + (newYear % 4 == 0 && newYear % 100 != 0 || newYear % 400 == 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## 0. Convert UNIX time from milliseconds to days","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"Observable provides UNIX time as the builtin variable `now`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"now","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"There are 86400000 (${tex`8.64\\times10^7`}) milliseconds in 1 day.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"unixDays = now / 86400000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"## 1. Get New Year in UNIX days","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":382,"value":"Add a day for each year that is divisible by 4 but not by 100 unless also by 400.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"yd2d = (y, d) => y * 365 + Math.floor(y / 4) - Math.floor(y / 100) + Math.floor(y / 400) + d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"The UNIX epoch Dec date is `1969+306`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":580,"value":"unixEpoch = yd2d(1969, 306)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"The UNIX days for the start of ${newYear}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"newYearDiff = yd2d(newYear, 0) - unixEpoch","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"The UNIX days for the start of ${nowYear}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":582,"value":"nowYearDiff = yd2d(nowYear, 0) - unixEpoch","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"## 2. Get days until New Year (countdown)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"countdown = newYearDiff - unixDays","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"## 3. Get Old and New Year Dec snaps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"The Year ${nowYear} day of the year (doty) is ${nDays} minus the Year ${newYear} countdown.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":445,"value":"doty = Math.abs(nDays - countdown)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"A [Dec](https://maptv.github.io/dec) [snap](https://maptv.github.io/dec/snap) combines a year, a doty, and a time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"nowYearDate = `${nowYear}${unixDays < nowYearDiff ? \"-\" : \"+\"}${doty.toFixed(5).padStart(9, \"0\")}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"After the start of Year 2025, the Year 2025 countdown becomes the Year 2025 date!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"newYearDate = `${newYear}${unixDays < newYearDiff ? \"-\" : \"+\"}${Math.abs(countdown).toFixed(5).padStart(9, \"0\")}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"# Bonus","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"## Isolate the time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"The [Dec](https://maptv.github.io/dec) Zone 0 [time](https://maptv.github.io/dec/time) is the decimal part of UNIX days.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"time = unixDays % 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"The time since and until midnight add up to 1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"time.toFixed(5).slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"(1 - time).toFixed(5).slice(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"## Compare quick calculations to official algorithm","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":683,"value":"The `date2snap` function below is based on the [civil_from_days](https://howardhinnant.github.io/date_algorithms.html#civil_from_days) algorithm created by [Howard Hinnant](https://howardhinnant.github.io) and described in his manuscript entitled \"[`chrono`-Compatible Low-Level Date Algorithms](https://howardhinnant.github.io/date_algorithms.html)\". The quick calculations above require us to set the year beforehand and are not guaranteed to work with negative years. The `dote2snap` will work with any dote that can fit in the available computer memory.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":646,"value":"function dote2snap(dote) {\n const cote = Math.floor((\n dote >= 0 ? dote\n : dote - 146096\n ) / 146097),\n dotc = dote - cote * 146097,\n yotc = Math.floor((dotc\n - Math.floor(dotc / 1460)\n + Math.floor(dotc / 36524)\n - Math.floor(dotc / 146096)\n ) / 365);\n return [\n yotc + cote * 400,\n dotc - (yotc * 365\n + Math.floor(yotc / 4)\n - Math.floor(yotc / 100)\n )]}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"`${yd[0]}+${yd[1].toFixed(5).padStart(9, \"0\")}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"nowYearDate","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"decYear = dote2snap(Date.now() / 864e5 + unixEpoch)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"yd = dote2snap(unixDays + unixEpoch)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"## Play song at specified time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":944,"value":"Set the time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":912,"value":"playTime = \"0.00000\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"Push the button to enable the audio.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":866,"value":"// https://observablehq.com/@mbostock/wait-until-button\nviewof button = html`

${Object.assign(html``;\n btn.addEventListener('click', onClick);\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"The string below silently tells us whether audio is playing.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":783,"value":"mutable state = md`the audio is not playing at the moment`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"I only added one mp3 file, but feel free to add another.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":781,"value":"files = [\n FileAttachment(\"Auld_Lang_Syne_-_Concert_Band_-_United_States_Air_Force_Heritage_of_America_Band.mp3\")\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"viewof soundUrl = {\n const selector = select({\n title: 'choose the sound effect to be played',\n options: _files.map(({ url, name }) => ({\n value: url,\n label: `file name: ${name}`\n }))\n });\n return selector;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":812,"value":"// https://observablehq.com/@rabelais/play-sound-on-demand","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"AudioInstance = () => {\n let _a = new Audio();\n _a.addEventListener(\n 'loadeddata',\n () => (mutable state = md`the audio is loaded`)\n );\n _a.addEventListener(\n 'playing',\n () => (mutable state = md`the audio is playing`)\n );\n _a.addEventListener(\n 'ended',\n () => (mutable state = md`the audio has finished playing`)\n );\n _a.playAudio = _url => {\n _a.setAttribute('src', _url);\n _a.load();\n _a.play();\n };\n return _a;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"audio = AudioInstance()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"_files = {\n const fetchUrls = files.map(f =>\n f.url().then(url => ({ url, name: f.name }))\n );\n const urls = await Promise.all(fetchUrls);\n return urls;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"playMusic = _url => {\n audio.playAudio(_url);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 47:"$46:body"