DEV Community

Cover image for Five small free apps: your voice, your birthday, your song, your photo, and a bedtime story
Kuga
Kuga

Posted on

Five small free apps: your voice, your birthday, your song, your photo, and a bedtime story

August was for websites. September was for music videos. October finally belonged to the small apps: ideas that had been spinning around in my head for a while, waiting for their turn. This month they got built.

The first four share one rule: everything you see and hear comes from what you give them. Your voice, your name and birth date, your song, your photo. Nothing is random and nothing is picked from a library, so the same input always gives the same result. The fifth is a small gift for anyone with little kids.

All five are free and run entirely in the browser. No account, no server, and nothing you record, type or upload ever leaves your device. Videos are rendered frame by frame and encoded straight to MP4, not recorded from the screen, so they don't stutter and open on any phone.

They all live on one small site: My Little Apps | Kuga Lab, https://mylittleapps.pages.dev

1. Rosonata: say your name, get a rosette that plays music

Say your name into the microphone. Two seconds later you have a glowing rosette with petals, rings and little gold spikes. Press Play, and a needle starts reading it like a music box, while a real piano (or a harp, a cello and a French horn) plays what it finds.

Where it came from

Before Rosonata there was a simpler app: say a name, get a mandala-like rosette, with one strict rule that everything must come from the voice. Looking at one of those rosettes, it suddenly looked like the disc from an old music box: rings, bumps, a steady rhythm around the circle. It looked like a score. So the question became: what if the rosette could sing?

Listening to the voice

The recording is cut into short overlapping frames, and for each one the app measures loudness, pitch, brightness, 12 frequency bands, and how often the wave crosses zero, which is how it finds hissing sounds like s, sh and ch. Silence is trimmed, and the loudness peaks split the name into syllables.

Drawing the rosette

Every measurement has one job:

  1. the median pitch of the voice sets the number of arms (10 to 18) and the base colour
  2. every syllable becomes a ring
  3. the pitch and loudness of that syllable shape the petals in its ring
  4. hissing sounds become spikes, loud moments become dots
  5. a medallion in the centre sums up the whole name

The number of arms is one line. pc is where the voice falls inside an octave (0 to 11):

const N = Math.round(14 - 4 * Math.cos(2 * Math.PI * pc / 12)); // 10..18 arms
Enter fullscreen mode Exit fullscreen mode

It goes around the octave like a circle instead of up a ladder, so low voices don't always get fewer arms. A deep voice and a high voice can both land on 18.

Reading it like a music box

As the disc turns, wherever a petal line crosses the needle, a note sounds. Further from the centre means higher. To keep it from sounding like a cat on a keyboard, every note snaps to a pentatonic scale in the key of the voice that said the name:

const PENT = [0, 2, 4, 7, 9];
const deg2semi = d => 12 * Math.floor(d / 5) + PENT[((d % 5) + 5) % 5];
let key = 57 + Math.round(pc); // the key comes from your voice
Enter fullscreen mode Exit fullscreen mode

There are two ways to read. Classic: the needle stands still, the medallion gives the bass, and on the last arm the disc slows down like a music box running out of spring. Complex: the needle travels from the centre to the edge like a gramophone, the dots and spikes set the rhythm, and every phrase reads a different line.

The sound comes from real recorded instruments (tonejs-instruments). There are three sounds: Piano, Salon (piano, harp, cello) and Film (French horn, harp, piano, cello), all through a concert-hall reverb. You can keep the rosette as a PNG, a 1080×1080 MP4 or a WAV.

The detours

The first version had no instruments at all. You recorded your name, then sang "laaa", and your own voice became a choir. It crackled, for three reasons. The click or breath at the start of the recording was replayed on every note. A deep voice pushed two octaves up sounded like broken glass. And the phone simply couldn't mix dozens of voices live: the exported WAV was clean, but live playback crackled. The fix for that last one stayed in the app. The whole piece is rendered offline first, and only one finished buffer is played:

const oc = new OfflineAudioContext(2, Math.ceil(seconds * 44100), 44100);
// ...schedule every note into oc...
const buffer = await oc.startRendering(); // then play just this
Enter fullscreen mode Exit fullscreen mode

It hasn't crackled since, even on a mid-range Android phone.

The next discovery: every melody went up, down, up. Of course, because petals go out and come back. So came other paths through the rosette: a golden spiral, a nautilus (which, by the way, is not a golden spiral, that's a popular myth), sunflower seeds at 137.5°, Archimedes' spiral, a rose curve, Lissajous figures. At one point there were about twelve reading modes and six instruments.

A scoring function then measured which option was the most "melodic". On paper, the spirals won. To the ear, plain piano going up and down sounded best, and the violin was shrieking. And a visitor who sees fifteen buttons just leaves. So the extra code was removed, not hidden, and the best ideas from the experiments were folded into Complex.

Try it: https://mylittleapps.pages.dev/rosonata/app

2. Melodentity: your name and birthday as a melody nobody else has

It started with a claim seen online: if you match name and birth time down to the minute, only 1 to 5 people in the world share yours, even for the most common names.

It's wrong. About 250 babies are born every minute worldwide. The most common full name on Earth, Wang Wei, belongs to roughly 290,000 people. Spread over about 70 years of birthdays, that's around 10 per calendar date, and divided by the 1,440 minutes in a day, 0.007 Wang Weis per minute. The "1 to 5" only appears if you forget the birth year.

So for almost everyone alive, name + date + time of birth is already unique. Which means it could become something that belongs to only one person: a melody.

You type your full name, in any alphabet, your date and your time of birth. You get a short tune with a synth or a real grand piano, the same tune as real piano sheet music, and a PNG of the score and an MP3 of the melody. Change one letter or one minute and you get a completely different tune.

Version 1, and how it broke

The first version mapped things directly: each digit of the date became a melody note, each letter of the name an accompaniment note, the time of birth set the tempo. It sounded nice and felt unique. Then came the question: can two people get the same tune? The math said yes, in several ways:

  1. Only the first 5 letters were heard, so Marko Petrović and Marko Jovanović sounded identical.
  2. The note was charCode % 10, so A, K and U shared a note. Nina = Dina, Hana = Rana.
  3. Tempo depended on the distance from noon, so 10:00 and 14:00 sounded the same.
  4. Cyrillic letters were silently deleted, so every name written in Cyrillic got no accompaniment.

Patching each hole would only patch the holes found so far.

Version 2: a fingerprint

Name, date and time are joined into one string and run through SHA-256. The result is a 256-bit fingerprint, and changing a single character changes the whole thing. Every musical decision is then read from that number, one after another:

// each choice "uses up" part of the fingerprint
function hashReader(hex){
  let big = BigInt('0x' + hex);
  return n => {
    const N = BigInt(n);
    const r = Number(big % N);
    big /= N;
    return r;
  };
}

const R = hashReader(sha256(`${name} | ${date} | ${time}`));
const tempo = BPMS[R(8)];         // one of 8 tempos
const pitch = PENT8[R(8)];        // one of 8 notes
const length = DURATIONS[R(3)];   // short, long, or short + rest
Enter fullscreen mode Exit fullscreen mode

Every letter counts, every alphabet works, and there are no symmetries. Before hashing, the name is normalized: upper and lower case are the same, extra spaces don't count, and Ана Петровић = Ana Petrović, because it's the same person in two scripts. But č is not c: Petrović and Petrovic are spelled differently.

Two modes

In Date + fingerprint mode, the melody is your birth date, one note per digit, so you can actually hear your birthday. The accompaniment comes from the fingerprint and tells apart the roughly 360,000 people born that day. It has 16 notes, because that's where the chance of two people sharing a tune drops below one in a million, and 8 digits × 2 eighth notes fill the bar exactly. In Pure fingerprint mode, 24 melody notes come from the fingerprint of everything, over 4 slow bass notes. An honest caveat: a hash makes uniqueness overwhelmingly likely, not mathematically guaranteed.

Sheet music a pianist can play

The score is drawn with VexFlow as a grand staff. A phrase can be 9, 10, 11 or 12 eighth notes long, so instead of forcing it into 4/4, each bar gets its true time signature: 11/8, 9/8. Long bass notes are written with ties, short notes get staccato dots, accented notes get accent marks. 120 combinations were checked in both modes: every note on paper starts and ends exactly where the sound does.

The piano uses 12 recordings from the Salamander Grand Piano. The MP3 uses the same offline rendering as Rosonata, encoded in the browser with lamejs.

The rule that caught the Nina = Dina problem: agree first, code second. The first version felt unique. Only "prove that two people can't get the same tune" showed the holes.

Try it: https://mylittleapps.pages.dev/melodentity/app

3. Songlyph: 25 visualizer experiments, one app

After a month of making music videos in code, the phone was full of experiments with names like tacke-v11-2.html and linija-v4-1.html. About 25 files, many of them slightly different versions of the same idea. Four ideas survived:

  1. Line: a line that wanders, spirals or writes rows across the canvas, steered by the song.
  2. Dots: discs that fall on every beat and fill the canvas as the song goes.
  3. Circle of fifths: the harmony of the song drawn as a path around the circle of fifths, with rings and chord lines on each beat.
  4. Signature: a line whose whole behaviour comes from a few numbers measured from the entire song.

Instead of four apps, there's one, with a Layers switch that stacks several modes on the same canvas. That's Songlyph: song + glyph.

You upload any song, and the app first listens to all of it: tempo and beats, chords, loudness, bass and treble, stereo width, and the points where the song changes parts. Then it draws while the song plays, and every trait leaves its own trace. Beats drop shapes, chords pick the colour and the direction, loudness sets size and brightness, stereo width splits the line in two, and new parts of the song leave rings. You can save a full-resolution PNG, or a video with the song in 1:1, 9:16 or 16:9.

There are a lot of switches: four modes with their own options, layers, six palettes, a dark or light canvas, bokeh lights, "breathing", a seed and a manual tempo fix. If you like visualizers, drop in a song you love and play. If you write code, open the source: one HTML file, a hand-written FFT and beat detection, no frameworks. Change a number and you get a different drawing. Take it apart.

Try it: https://mylittleapps.pages.dev/songlyph/app

4. Kaleidosong: the kaleidoscope, back where it belongs

Almost everyone had one as a kid. A cardboard tube, a few pieces of coloured glass, three little mirrors. You held it up to the light, turned it slowly, and a new pattern bloomed every second. Nobody had to explain it, and nobody owned it. It was the cheapest toy in the shop, and every child in the world got to hold one.

So it was strange to find kaleidoscope apps that charge for HD, for a longer video, or to remove a watermark.

Kaleidosong is free. Give it one picture and one song, and it turns them into a living kaleidoscope that moves with the music: squares like mirrored tiles, or hexagons, exactly like three mirrors in a tube. No account, no watermark, no limit. Take a photo of your street, your cat, your grandmother's tablecloth, put your favourite song under it, and turn the tube.

Try it: https://mylittleapps.pages.dev/kaleidosong/app

5. Storyglobe: four picture books, free for every child

This one is a small present for everyone with little kids at home.

Four picture books, each with a gentle lesson, illustrations and a little song at the end:

  1. Lioner Learns to Stay Safe
  2. Greenosaur Learns to Brush His Teeth
  3. Foxin Learns to Share
  4. Owlo, a little owl who doesn't want to go to bed

Read them together on the screen, in your own language, or download them and keep them. No account, no ads, no price. Good stories for kids should be free, just like the kaleidoscope.

Read them: https://mylittleapps.pages.dev/storyglobe/


If you try any of them, show what you got in the comments: your rosette, your tune, your drawing, your kaleidoscope. And if you read a book with your kid, tell me if I made some mistakes in your mother's language 🙂

Credits: piano samples from the Salamander Grand Piano by Alexander Holm (CC BY 3.0). Instrument samples from tonejs-instruments, VSCO 2 Community Orchestra and Freesound (CC BY 3.0). Sheet music by VexFlow (MIT). MP3 encoding by lamejs (LGPL-3.0). Video export with mp4-muxer (MIT).

All five apps were built on a phone, in conversation with Claude. This post was written with help from AI.

Cheers 🥂
Kuga

Top comments (2)

Collapse
 
onecoderegister profile image
Andrew Cluev •

The musical kaleidoscope is a lovely idea. Turning a photo and a favourite song into something personal sounds fun. It's especially nice that the app is free, with no sign-up or watermarks. Thanks for sharing these projects!

Collapse
 
branislav_kuga_4118d3b3ab profile image
Kuga •

Thank you, Andrew! That was exactly the idea: something as simple as the kaleidoscope we all had as kids, just with your own photo and your own song.🌀