How to generate sound in JavaScript?

Jak stworzyć dźwięki w JavaScript?

Robiąc małą grę w JavaScript chciałam wygenerować w niej krótkie dźwięki, imitujące strzelanie, zderzenie z przeszkodą, zmianę levelu itp. Wykorzystałam w tym celu Web Audio API, co pozwoliło mi samodzielnie stworzyć „melodyjki” potrzebne w grze. Poniżej pokażę Ci, w jaki sposób samodzielnie możesz stworzyć własne dźwięki za pomocą JavaScript 😉

W pierwszej kolejności trzeba utworzyć kontekst audio, który będzie sterował wszystkimi procesami tworzenia dźwięku:

let audioContext = new AudioContext();

Aby kod działał poprawnie we wszystkich przeglądarkach możesz użyć:

let audioContext = new (window.AudioContext || window.webkitAudioContext)();

 

Następnie należy stworzyć źródło dźwięku – w tym przypadku będzie to oscylator (matematycznie obliczony dźwięk), który reprezentuje mi.in rodzaj i częstotliwość fali dźwiękowej.

(Inne źródła dźwięku to np. dźwięk pobrany ze źródła audio/video lub audio stream – dźwięk z kamerki internetowej lub mikrofonu. Tutaj skupiamy się jednak na oscylatorze).

let oscillator = audioContext.createOscillator();

Można również dodać metodę, która kontroluje głośność dźwięku:

let gainNode = audioContext.createGain();

 

Aby całość działała poprawnie, trzeba utworzone metody połączyć ze sobą i z kontekstem audio. Można to zrobić w sposób:

oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);

 

Teraz można ustawić rodzaj fali (np. sine, square, sawtooth, triangle lub custom), częstotliwość dźwięku (w hertzach) oraz głośność:

oscillator.type = "sine";
oscillator.frequency.value = 440;
gainNode.gain = 1;
oscillator.start();

 

Powyższy przykład wygeneruje nam ciągły, nieustający dźwięk. Jeśli chcemy uzyskać możliwość kontroli nad włączaniem i wyłączaniem dźwięku, musimy podpiąć metody oscillator.start(); i oscillator.stop(); pod przyciski:

See the Pen Generating sound in JavaScript – continuous uninterrupted sound by Joanna (@JoannaEl) on CodePen.

Ponieważ metody oscillator.start(); można użyć tylko raz, dźwięk po zastopowaniu nie odtworzy się ponownie.

 

Aby móc odtwarzać dźwięk wielokrotnie, przy pomocy przycisków START i STOP, musimy generować nową falę dźwiękową za każdym razem, kiedy kliknięty zostanie przycisk START.

See the Pen Generating sound in JavaScript – on button click by Joanna (@JoannaEl) on CodePen.

 

Gdy wiemy już, jak wygenerować prosty dźwięk, możemy pobawić się zmieniając typ i częstotliwość fali. Spróbuj ustawić wyższe lub niższe tony i zciszyć/zgłośnić dźwięk, a także wybrać rodzaj fali:

See the Pen Generating sound in JavaScript – on button click -part II by Joanna (@JoannaEl) on CodePen.

 

Możemy też wygenerować dźwięk, który trwa tylko chwilę:

let audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);

oscillator.type = "sine";
oscillator.frequency.value = 440;

const now = audioContext.currentTime;
gainNode.gain.setValueAtTime(10, now);
gainNode.gain.exponentialRampToValueAtTime(0.11, now + 1);
oscillator.start(now);
oscillator.stop(now + 1);

See the Pen Generating sound in JavaScript – continuous uninterrupted sound by Joanna (@JoannaEl) on CodePen.

 

Zmiana częstotliwości dźwięku podczas jego trwania wygląda i brzmi tak:

let audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);

oscillator.type = "sine";
oscillator.frequency.value = 440;

const now = audioContext.currentTime;
gainNode.gain.setValueAtTime(10, now);
gainNode.gain.exponentialRampToValueAtTime(0.11, now + 2);
oscillator.start(now);
oscillator.stop(now + 2);

oscillator.type = "triangle";
oscillator.frequency.setValueAtTime(250, context.currentTime + 0.2);
oscillator.frequency.setValueAtTime(220, context.currentTime + 0.4);
oscillator.frequency.setValueAtTime(350, context.currentTime + 0.6);
oscillator.frequency.setValueAtTime(370, context.currentTime + 0.8);

See the Pen Generating sound in JavaScript – change frequency value by Joanna (@JoannaEl) on CodePen.

 

Teraz generowanie prostych dźwięków na stronie internetowej, w mini grze lub aplikacji nie będzie już problemem 😉