Song Bird: ääni 3D-valorakenteeksi

Joulukuussa 2025 rakensimme Song Birdin, pienen verkkosovelluksen, joka muuttaa äänen valosta tehdyksi 3D-rakenteeksi. Työ tehtiin 18.–22. joulukuuta 2025, ja nauhoitimme demon 21. joulukuuta.

Avaa Song Bird selaimessasi. Se toimii parhaiten kannettavalla tietokoneella äänen kanssa.

Miten äänestä tulee viiva

Voisiko musiikin näyttää ajan myötä kasvavana muotona sen sijaan, että se olisi ylös ja alas hyppivä pylväskaavio? Sovellus toimii selaimessa seuraavin vaihein:

1. Se kuuntelee ääntä mikrofonistasi tai lataamastasi tiedostosta.
2. Se jakaa äänen 1 024 taajuuskaistaan nähdäkseen, kuinka voimakas kukin sävelkorkeus on.
3. Voimakkain sävelkorkeus yhdistetään yhteen 12 nuottipisteestä 3D-avaruudessa.
4. Pieni jäljittäjä, jota kutsumme tulikärpäseksi, lentää näiden pisteiden välillä ja jättää perässään viivan.
5. Viivat jäävät näkyviin. Ajan myötä ne rakentavat kartan musiikista.

Kirkkaus määrää, kuinka paksu kukin viiva on. Muotoja on neljä: Orbit, Natural, Fractal ja Mandala. Rakensimme sovelluksen Vitellä, TypeScriptillä, Three.js:llä, React Three Fiberillä, Web Audio API:lla ja Meydalla, joka on äänen analysointiin tarkoitettu kirjasto.

Neljä muotoa, yksi melodia

31. lokakuuta 2026 avasimme live-sovelluksen selaimessa ja syötimme sille kaksi testiääntä: yhden tasaisen sävelen ja 21 sekunnin melodian synteettisistä nuoteista.

Aloitusnäyttö on tumma. Siinä ovat otsikko, teksti "V.7 Spectral Architecture" ja kaksi painiketta, LIVE ja UPLOAD. Kun valitset tiedoston, kuva alkaa heti. Kirkas valkoinen viiva kiitää värillisten pisteiden välillä, ja ohuet punaiset viivat jäävät sen perään. Oikealla lista nimeltä Spectral Data näyttää jokaisen sovelluksen kuulleen nuotin, uusin ensin. Alareunassa on palkki, jossa ovat muotovalikko, kolme värinappia, tauko ja nauhoitus.

Tasaisella sävelellä lista näytti yhden nuotin, A:n, yhä uudelleen. Melodialla se näytti myös nuotteja, jotka eivät olleet melodiassa, kuten C#, D# ja F#. Emme selvittäneet syytä.

Ajoimme saman melodian kaikissa neljässä muodossa ja katsoimme tulosta 15 sekunnin kohdalla.

Mitä opimme

1. Selkeä ääni antaa selkeän kuvan. Yksi tasainen sävel tuotti yhden tasaisen nuotin. Melodia tuotti vilkkaamman listan, jossa oli myös nuotteja, jotka eivät kuuluneet melodiaan. Valitse yksinkertaisia kappaleita tai yksittäisiä ääniä.
2. Muoto ratkaisee tuloksen. 15 sekunnissa vain Mandala muodosti suljetun, ruudulle mahtuvan kuvion. Kolme muuta antoivat muutaman pitkän viivan, jotka lähtevät kuvasta ulos.
3. Kuva tarvitsee aikaa. Punainen kartta on ohut 8 sekunnin kohdalla ja paljon tiheämpi 16 sekunnin kohdalla. Varaa aikaa kokonaiselle kappaleelle.
4. Suunnittele tila. Tausta on lähes musta ja viivat ovat ohuita. Nuottilista on pieni. Käytä pimeää huonetta ja isoa näyttöä.

Missä tästä on hyötyä

• Verkkolinkki on helppo jakaa. Katsojat avaavat sivun. Heidän ei tarvitse asentaa mitään.
• Ääni voi olla visuaalinen brändielementti. Kappale, tunnusmelodia tai puhujan ääni voisi ohjata visuaaleja tapahtuman näytöllä. Olemme työskennelleet generatiivisen musiikin parissa aiemminkin: katso generatiivisen musiikin työmme Vaisalalle.
• Pidä säännöt yksinkertaisina. Selkeä sääntö on helppo selittää asiakkaalle.

Avaa Song Bird kannettavalla, valitse Mandala ja soita yhtä ääntä tai yhtä soitinta kokonainen minuutti.