Fibonacci Flowers Audio API

Przedstawiam rozbudowaną aplikację Fibonacci Flowers o reaktywność audio. Tworzę dynamiczną przypominającą kwiat wizualizację opartą na spirali Fibonacciego, której wygląd reaguje na odtwarzany utwór audio. W aplikacji zostało wykorzystane web audio api czyli przeglądarkowe api umożliwiające nie tylko odtwarzanie dźwięku, ale też jego analizę. Typowy przepływ danych wygląda następująco:

• Użytkownik uruchamia odtwarzanie pliku audio w kontrolce odtwarzacza.
• Element <audio> zostaje podłączony do AudioContext.
• Dźwięk trafia do AnalyserNode.
• Analizator wykonuje szybkie próbkowanie sygnału.
• JavaScript pobiera dane o aktualnym widmie częstotliwości lub amplitudzie.
• Parametry wizualizacji są aktualizowane przed narysowaniem kolejnej klatki.

const audioContext = new AudioContext();
const source = audioContext.createMediaElementSource(audioElement);
const analyser = audioContext.createAnalyser();

source.connect(analyser);
analyser.connect(audioContext.destination);

const dataArray = new Uint8Array(analyser.frequencyBinCount);

function readAudioData() {
  analyser.getByteFrequencyData(dataArray);
}