đ©âđŸ 256b music video
Music video with Speech synthesis, Web Audio music and animated visuals about a woman farmer in 255 bytes of HTML+Javascript
Open the page then click somewhere to start the little show. Note that the music may start a few seconds after the speech in some browsers.
Source code
<html onclick="with(new AudioContext)with(o=createOscillator())connect(destination),start(setInterval(`c.style.fontSize=o.frequency.value='41312521313'[++t/9&4+t%8]*99||s${a='peechSynthesis'}.speak(new S${a}Utterance(c.innerText))`,t=99))"id=c>đ©âđŸHow does it work
Initialization & set up
When the users clicks on the page, a new AudioContext and oscillator are created, connected and started.
<html onclick="with(new AudioContext)with(o=createOscillator())connect(destination),start(...)"id=c>đ©âđŸAt the same time, we start a setInterval with a delay of 99ms to update visuals and music ~10x per second as we increase the variable t, the "time" counter.
setInterval(`...`,t=99)Music
The music is stored in an 11 characters long string '41312521313', where each number represent a note. This note is multiplied by 99 to get the correct frequency of the melody.
o.frequency.value=...*99To make the melody more interesting and last longer, we don't progress through the string of notes just like that. Instead we use a little formula as we increase t to repeat some parts of 8 notes with t%8, and jump 4 notes to the next "pattern" every 9 notes with t/9&4.
'41312521313'[++t/9&4+t%8]That way our short melody expands to 8 Ă 9 Ă 2 = 144 notes.
Speech synthesis
If you counted well, you noticed that we repeat 8 notes and jump 4 which leads to 12 notes out of an 11 characters long string.
When we reach the 12th note, which is undefined we fall back to the speech synthesis to speak a new speech synthesis utterance using the innerText of our web page. The đ©âđŸ emoji.
||s${a='peechSynthesis'}.speak(new S${a}Utterance(c.innerText))The ${a=...} and ${a} are ES6 template strings to save 3 bytes compared to expanded version
||speechSynthesis.speak(new SpeechSynthesisUtterance(c.innerText))Visuals
As for the visuals, they set the font size of our page to the same value as the frequency of the oscillator to make the woman farmer dance in synch with the music.
c.style.fontSize=o.frequency.value=...Why a woman farmer ?
Honestly. The emoji looks, and sounds great. That's it :)
Feedback
Hope you like it this music video in 255 bytes.
You can find đ©âđŸ music video on Pouet.net, the demoscene archive, and leave your feedback there or contact me.