Maciej Korsan

DiscoJS

pół prezentacja, pół dyskoteka: Web Audio API i Web MIDI API na meet.js w Białymstoku

  • web,
  • wizualizacje,
  • dźwięk,
  • wystąpienie
Slajd tytułowy: czerwony napis disco.js, pod nim „meet.js Białystok, special summer edition 2017” i mały rysunek tańczącej postaci

DiscoJS to prelekcja i zestaw dem, które przygotowałem na letnią edycję meet.js w Białymstoku (meet.js++), 26 sierpnia 2017 roku. W zapowiedzi pisałem: „Pół-prezentacja, pół-dyskoteka. Zapomnijcie o nowych frameworkach, idealnym kodzie, standardach i wrzućcie na luz”. Chodziło o to, co da się zrobić z dźwiękiem w samej przeglądarce.

Co było w środku

Slajdy były jednocześnie działającymi demami w JavaScripcie:

  • element <audio> i jego najprostsze sterowanie z JS,
  • Web Audio API: kontekst audio, oscylatory, wzmocnienie i łączenie węzłów w graf od źródła do wyjścia,
  • odmierzanie czasu – dlaczego melodię lepiej planować według audioContext.currentTime niż setTimeout,
  • analizator częstotliwości, który na żywo zmieniał kolory i wysokość słupków na stronie, także z dźwięku z mikrofonu,
  • Web MIDI API – kontroler MIDI odpalający sample w przeglądarce,
  • na koniec dyskoteka: bit z sampli, kamera internetowa i wizualizacja.

Kod jest na GitHubie, a slajdy na slides.com.

Co dalej

DiscoJS wróciło później jako jedno z dem w prelekcji Frontend is an art, grane z klawiatury Launchkey Mini.

Źródła

github.com/maciejkorsan/discojs