Generowanie dźwięku w HTML5

HTML5 od samego początku był projektowany pod kątem ścisłej integracji z multimediami takimi jak dźwięk czy wideo. Jednak przeglądając dokumentację brakuje pewnych metod - m.in. do generowania dźwięku. Co prawda Mozilla oraz Google już pracują nad rozszerzonym API do dźwięku, ale na ostateczną wersję musimy jeszcze trochę zaczekać. W międzyczasie powstała biblioteka, która omija ten problem przekazując jako źródło bezpośrednio dane binarne.

Biblioteka jsfx zaprogramowana przez Egona Elbre udostępnia użytkownikowi oprócz samej podstawy generowania dźwięku także generator pięciu predefiniowanych typów odgłosów, jednocześnie dając parametry, które umożliwiają ich modyfikację.

Działanie biblioteki opiera się na przekazywaniu w parametrze źródła (src) dla obiektu <audio> bezpośrednio danych binarnych dźwięku w formacie WAV zakodowanych w base64.
Oznacza to, że przeglądarka musi wspierać sporo nowych lub niestandardowych rzeczy:

• obiekt <audio> oraz format WAV
• kodowanie danych binarnych (atob) 
• przekazywanie danych w postaci binarnej/base64

Biblioteka składa się z trzech plików:

• audio.js - zawiera podstawowe elementy do tworzenia plików WAV
• jsfx.js - zawiera metody związane z generowaniem i generatorami dźwięku
• jsfxlib.js - trzy dodatkowe metody do łatwiejszego generowania dźwięku

Sposób generowania dźwięku

Wykorzystując jsfxlib.js utworzenie biblioteki grających obiektów polega na podaniu nazwy oraz odpowiednich parametrów dla generatora.

audioLibParams = {
   test : ["saw",0.0000,0.4000,0.5810,0.2640,2.1270......],
   explosion : ["noise",0.0000,0.4000,0.0000,0.2040......]
};

samples = jsfxlib.createWaves(audioLibParams);
samples.test.play();
samples.explosion.play();

Jeżeli jednak chcemy mieć bezpośredni dostęp do danych (przykładowo generowanych w innym miejscu) wówczas używamy obiektu audio. W ramach tego obiektu mamy dwie interesujące metody:

• make(arr) - gdzie jako parametr podajemy wartości od -1 do 1 (mogą być zmiennoprzecinkowe ;) ) - są to kolejne próbki dźwięku; zwraca obiekt typu Audio (taki sam jak obiekt <audio>, tyle że nie umieszczony w DOM)
• makeWaveFile(arr) - przyjmuje taki sam parametr jak funkcja wyżej, natomiast po wygenerowaniu pliku przenosi nas do strony gdzie został wygenerowany plik (przykładowo w chromie wówczas wyświetla się kontrolka do odtwarzania pliku muzycznego)

var data = [0, 0, 0.5, 0.5, 1....];
var obj = audio.make(data);
obj.play();

Generowanie dźwięku w przykładach

Sequencer

Generator beatów produkcji japońskiej. Do części muzycznej wykorzystuje bibliotekę jsfx, zaś do wizualnej jQuery UI. Bardzo ciekawe rozwiązanie, które oprócz predefiniowanych sampli umożliwia tworzenie własnych.

Draw Your Own Audio Snippet

Kreowanie dźwięku za pomocą myszki i rysowania nią fali dźwiękowej. Rozwiązanie oparłem na samej klasie audio, która umożliwiła utworzenie i zagranie dowolnej kombinacji danych przesłanych jako tablica. W celu ułatwienia wyobrażenia jak wygląda fala dźwiękowa zdecydowałem się na narysowanie jej na elemencie <canvas> i łatwą modyfikację przy użyciu myszki.
Projekt zakwalifikował się do Chrome Experiments.