Proste dźwięki do gier w JavaScript

Generowanie dźwięków w grach za pomocą JavaScriptu

W poprzednim artykule Generowanie dźwięku w JavaScript pokazałam, w jaki sposób można samodzielnie stworzyć pojedyncze dźwięki, by wykorzystać je np. w swoich grach. W tym artykule pokażę, jak stworzyć proste dźwięki będące krótkimi muzyczkami, które można wykorzystać np. przy zmianie levelu.

Oto kod, który odgrywa przykładową melodyjkę:

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
	
let New_sound = {
   song: "fffbzfbzz",
   counting: 0,
   scale: {
	f: 349.23,
	b: 493.88,
	z: 0
   },
		
   create() {
	this.oscillator = audioContext.createOscillator();
	this.gainNode = audioContext.createGain();
	this.oscillator.connect(this.gainNode);
	this.gainNode.connect(audioContext.destination);
   },
		
   new_sound(wave, Hz, volume) {
	let now = audioContext.currentTime
	this.oscillator.type = wave;
	this.oscillator.frequency.value = Hz;
	this.gainNode.gain.value = volume;
	this.gainNode.gain.setValueAtTime(1, audioContext.currentTime);
	this.gainNode.gain.exponentialRampToValueAtTime(0.11, now + 1.5);
   }, 
	
   play_sound() {
	const now = audioContext.currentTime;
	if (this.counting == this.song.length) {
		this.counting = 0;
		return;
	}
	if ( this.counting < this.song.length) { 
            let note = this.song.charAt(this.counting); 
            let Hz = this.scale[note]; 
            this.create(); 
            this.new_sound("square", Hz, 1); 
            this.oscillator.start(now); 
            this.counting += 1; } 
            // Aby this w setTimeout odnosiło się do obiektu, a nie do jego metody, trzeba zastosować funkcję strzałkową 
            setTimeout(() => {
		this.oscillator.stop(now + 1.5);
		this.oscillator.disconnect(this.gainNode);
		this.gainNode.disconnect(audioContext.destination);
		let loop = this.play_sound();
	}, 220);
   }
}

New_sound.play_sound();

Najpierw stworzyłam kontekst audio, a następnie obiekt New_sound, który zawiera cały kod melodyjki. Wartość song zawiera nuty melodyjki, a ich wartości wyrażone w Hertzach znajdują się w scale. Counting to licznik nut. W metodzie create stworzyłam oscylator i regulację głośności oraz połączyłam je z kontekstem audio. New_sound przechowuje ustawienia fali dźwiękowej, jak częstotliwość, poziom głośności, typ fali i jej rozłożenie w czasie. W metodzie play_sound zastosowana jest pętla, która odgrywa każdą nutę. W efekcie uzyskujemy melodyjkę zmiany levelu:

Powyższy dźwięk wykorzystałam w mojej grze Lost In Blocks, o której napiszę później 😉

No dobrze, skąd wziąć nuty? Możesz ułożyć je samodzielnie lub poszukać w internecie. A skąd wziąć odpowiadające im częstotliwości? Na przykład ze strony: pages.mtu.edu

(„Middle C” is C₄ )

Źródło: pages.mtu.edu