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.


Prześlij dalej:

2 komentarze:

Piotrek Reinmar Koszuliński pisze...

Bardzo fajny pomysł z tym rysowaniem :) Prosty do zaimplementowania (chyba - wybacz jeśli nie doceniam :), ale można się sporo pobawić.

Szkoda tylko, że pod Firefoksem tak powoli (przynajmniej u mnie) odświeża się linia podczas rysowania, bo pod Chromem nie słyszę niestety dźwięku.

BTW. masz dużo świetnych treści na tym blogu i zero komentarzy (więc pewnie też nienajwięcej odwiedzin). Promuj trochę swojego bloga, bo aż szkoda żeby się marnował. Ja trafiłem tutaj kiedy szukałem ciekawych polskich blogów i na siłę przeklikiwałem się przez komentarze na innych stronach. Gdyby nie to, to bym pewnie nigdy nie usłyszał o tym miejscu.

Michał Biniek pisze...

Dzięki!

Fakt, że z samym mechanizmem dużo zabawy nie było, ale żeby potem spiąć wszystko w jedną całość to już zajęło nieco czasu. Co do wydajności canvasa to najlepiej wychodzi pod Operą.

Co do braku dźwięku pod chromem to aż dziwne bo głównie developowałem to właśnie pod tą przeglądarką, ale sprawdzę w takim razieraz jeszcze - no i myślę, że Google by nie puściło tego dalej, jakby coś nie banglało.

Prześlij komentarz