Added Part 1 of the AudioLooper code demo - #411
Conversation
nbriz
left a comment
nbriz
left a comment
There was a problem hiding this comment.
@christopherlcollins there's a few issues with this file that prevents it from working in the system. First, our backend expects demo filenames to have the following format number--name.json where "name" is a lowercase (no spaces) version of the name you give it. this filename should be autogenerated by the Demo Maker, but i'm guessing this happened since you created this by splitting up the original file (rather than clicking the "download" button in the Demo Maker).
Couple other related issues below...
| @@ -0,0 +1,129 @@ | |||
| { | |||
| "key": "1785789128057-p1", | |||
There was a problem hiding this comment.
not sure how this happened, but the key value should never be a string like "1785789128057-p1" it should always be a number like 1785789128057 otherwise it won't get indexed by our API. I imagine this might have been an artifact of the process behind splitting up the original long demo.
| @@ -0,0 +1,129 @@ | |||
| { | |||
| "key": "1785789128057-p1", | |||
| "name": "An Experimental Audio Instrument (step by step) \u2014 Part 1: Adding Audio Files + Looping", | |||
There was a problem hiding this comment.
This is a really long name, so it gets cut off when listed in the Demo Widget (notice where the ellipsis cuts it off)
Also ends up looking really long when you click into it.
You think you can get the title under 26 characters? that seems to be the sweet spot (might also be something worth calling out in the docs)
There was a problem hiding this comment.
PS: the reason that says "...loading..." is because of the aforementioned issues. Once we fix the filename and key-value the code will load as expected in there.
|
@christopherlcollins the notes above are technical bugs, but what I'm about to say here are more pedagogical notes (so less a request for change and more a topic of discussion). One of the things I try to do with the demos is keep the code as minimal as possible, in general my philosophy is to reduce it to the simplest possible version that communicates the learning goals. Theoretically, all you'd need is this: <audio src="https://file.garden/afFc391fO2fp1fKo/marimba-scale-octave-loop.mp3" controls loop></audio>
<br>
<audio src="https://file.garden/afFc391fO2fp1fKo/marimba-scale-octave-loop.mp3" controls loop></audio>
<br>
<audio src="https://file.garden/afFc391fO2fp1fKo/marimba-scale-octave-loop.mp3" controls loop></audio>which would reduce the amount of code significantly. Maybe that's too minimal? I realize this comes with a bit of an aesthetic compromise, obviously yours looks nicer with the CSS, but if we're not going to explain/cover CSS in this one, it could be nice to keep it HTML only (there' something special about being able to create this Reich style instrument with nothing other than a bit of HTML) thoughts? |
2 participants
Part 1 of the AudioLooper demo has been added. Note that the last annotation contains a placeholder link that will eventually connect to the next part of the demo sequence, but currently does nothing.