27:null 28:["$","title",null,{"children":"Scoring the Spelt Air – Prose | John Cayley | Observable"}] 2d:[{"id":"bc8e8096a1f0d9716c738f1a9c049b092ac966cd54b812056d8b8b9a08d3b8d9a8e829fbcac66a006e3289b9ffda59e42d21261dc93ce851848e50f0dd4b7125","href":"https://static.observableusercontent.com/files/bc8e8096a1f0d9716c738f1a9c049b092ac966cd54b812056d8b8b9a08d3b8d9a8e829fbcac66a006e3289b9ffda59e42d21261dc93ce851848e50f0dd4b7125","name":"melody.json","type":"application/json","lastModified":1739304503890.844,"size":9205}] 2b:{"id":"69527909fd3e5568","slug":null,"title":"Scoring the Spelt Air – Prose","thumbnail":"ed889daffcab81d25093e81a2b34628987b9557d2394624e5fdaee670e7d0a7a","access_level":"public","create_time":"$D2025-02-11T20:08:23.890Z","update_time":"$D2025-02-11T20:08:23.890Z","view_time":null,"first_public_time":"$D2025-02-11T20:08:23.890Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":"pro_2024"},"version":1028,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c3cbd6193f712f7","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":null}],"members":[{"type":"individual","id":"5c3cbd6193f712f7","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":null,"role":"editor"},{"type":"team","id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d82373961f237124","slug":"scoring-the-spelt-air","title":"Scoring the Spelt Air","owner":{"id":"8cad4906c41da0ef","login":"shadoof","name":"John Cayley"}},"type":"notebook","body":{"title":"Scoring the Spelt Air – Prose","cells":[{"id":0,"value":"md`# Scoring the Spelt Air – Prose`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"md`This notebook can take a piece of prose *aligned* by a service like [reduct.video](https://reduct.video) – which provides timestamps based on audio(visual) recordings of spoken English – and play back the prose temporally aligned with the recording.\n\nIf you are working with poetry or spatialized typography, check out these notebooks: [Scoring the Typographic Surface](/@shadoof/stts) and the parent of this one: [Scoring the Spelt Air](/@dla/scoring-air).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"md`It is derived from [@shadoof](https://observablehq.com/@shadoof)’s first Observable experiment with animating poetic texts, [@shadoof/carhartt/](https://observablehq.com/@shadoof/carhartt), which is the engine for amongst other things.\n\nFork at will.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"textcontainer = html`\n

\n${spans}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"play = {\n while (true) {\n yield \"playing [while (true)]\";\n for (let score in scores) {\n let theScore = scores[score];\n for (let unit = 0; unit < theScore.length; unit++) {\n await scorepause(theScore[unit].pause, theScore[unit].id);\n // console.log(`index: ${i}`);\n }\n }\n }\n yield \"not playing [while (false)]\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"scorepause = async (pause, id) => {\n return await Promises.delay(pause * 1000).then(() => {\n let theElem = document.getElementById(`${id}`);\n theElem.classList.toggle('visible');\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"md`*TODO: If \\`toggleVisible(id)\\` is put in as the \\`.then()\\` function above, this breaks the desired asynchronous animation. Perhaps due to \\`id\\` becoming a variety of cross-cell reference? Needs investigating!*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"toggleVisible = id => {\n let theElem = document.getElementById(`${id}`);\n theElem.classList.toggle('visible');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"md`Your maker-composed text can be typed in here:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"text = md`I was burying my goldfish during the nightfall in deep sorrow. I put a fresh yellow rose on the small grave that I built for. Soon, my family left Inverness and moved to Edinburgh though I was against. There was a local flower shop near my new home, selling manjusaka. I asked the shop owner, \"Where can I find yellow roses?\" \"Just go straight for two hundred meters, near the lake,\" he said. \"Thanks,\" I said, and walked hastily towards the lake. I walked faster and faster until I couldn't breathe. When I stopped walking, half of my body was in the middle of the lake. I didn't know what I was doing here and why I was not sinking. I floated too long in the water watching the sunset. Too long that sometimes I forgot I was a goldfish, and had died in the trash companied by a withered yellow rose years ago.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"md`We want to use words as units so we’ll parse the lines into a flat Array of words (removing any lines), but we’ll preface the associated constants with \\`unit\\` to remind ourselves that they could be any size: letter, word, phrase, clause, sentence, etc.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"unitStrings = {\n let words = [];\n let lines = text.innerText.split('\\n');\n for (let l = 0; l < lines.length; l++) {\n words.push(...lines[l].split(' '));\n }\n // this little parser could, btw, be written in a more concise\n // and arguably more elegant manner:\n words = [];\n // before reinitializing in the immediately previous line\n // words has the same value as it does on the actual return below\n lines = text.innerText.split('\\n');\n lines.forEach((line, l) => words.push(...lines[l].split(' ')));\n return words;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"md`At the moment, the only *visual behavior* we are experimenting with is *visibility* – the fading in and out of linguistic units.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"units = {\n let us = {};\n unitStrings.forEach((unitString, u) => {\n let id = 'u' + u;\n us[id] = {};\n let unit = us[id];\n unit['unit'] = unitString;\n });\n\n return us;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"md`Now we’ll generate a long string of initial HTML from the \\`units\\` Object. This will be a string of HTML \\`span\\` elements with appropriate \\`id\\`s and a \\`class\\`. You could add other attributes at this stage (such as position information).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"spans = {\n let spanString = \"\";\n // for prose we are putting a space into each span\n // but change the value of spc for other things\n let spc = \" \";\n Object.keys(units).forEach(key => {\n let unit = units[key];\n spanString += `${unit['unit']}${spc}`;\n });\n return spanString;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"md`Finally, we create an Array to hold one or more \\`scores\\` in it.\n\nThe \\`score\\`s themselves are Arrays of Objects, corresponding to the units we’ve used so far. Currently, each Object consists of an \\`id\\` for the element (\\`span\\`s in our case) in the HTML/DOM and a \\`pause\\` in seconds before any animated behavior. Putting these Arrays in separate constants allows us to give them descriptive names such as the one in this notebook: \\`readThrough_aligned\\`. It also allows for easy editing of the actual \\`scores\\` Array to give us different arrangements of the individual scores.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"scores = [\n readThrough_aligned, // first time fades in\n readThrough_aligned // second time fades out\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"md`\\`scores\\` above is currently an array with two instances of \\`readThrough_aligned\\` and this score is calculated from timing data that was generated by [reduct.video](https://https:reduct.video). This is the JSON data:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"audioAlignment_JSON = FileAttachment(\"melody.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"md`Now we parse this JSON to produce a much simpler Array of word objects from the text and the timestamps associated the reading. You see the parsing code in this cell, and the cell’s value is \\`return\\`ed as the simpler Array. ...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"alignedWords_JSON = {\n let a = [];\n let extraTimeAtEndOfScore = 4;\n Object.keys(audioAlignment_JSON).forEach(segments => {\n audioAlignment_JSON[segments].forEach(speech => {\n a = a.concat(speech.wdlist);\n });\n });\n a.forEach((word, index) => {\n index < a.length - 1\n ? (word.gap = a[index + 1].start - word.end)\n : (word.gap = extraTimeAtEndOfScore);\n });\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"md`Finally, we parse and process the aligned words Array into any even simpler Array that can be – and is – used as a \\`score\\` in the \\`scores\\` Array above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"readThrough_aligned = {\n let a = [];\n let l = alignedWords_JSON.length - 1;\n let p = 0;\n alignedWords_JSON.forEach((word, index) => {\n let o = {};\n o.id = 'u' + index;\n let i = index - 1;\n if (index > 0)\n p =\n alignedWords_JSON[i].end -\n alignedWords_JSON[i].start +\n alignedWords_JSON[i].gap;\n else\n p =\n alignedWords_JSON[l].end -\n alignedWords_JSON[l].start +\n alignedWords_JSON[l].gap;\n\n o.pause = p;\n a.push(o);\n });\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"css = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2c:"$2b:body"