👩‍🌾 256B MUSIC VIDEO

396 words ~ 2-3 mins

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=...*99

To 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.


Other recent projects

There are many experiments and projects like 👩‍🌾 256B MUSIC VIDEO to discover other here.


Let's talk

Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.