Proste dźwięki do gier w JavaScript

Create game sound in JavaScript

 

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:

See the Pen Change level sound in JavaScript by Joanna (@JoannaEl) on CodePen.0

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 C4 )

Note Frequency (Hz) Wavelength (cm)
C0 16.35 2109.89
 C#0/Db0 17.32 1991.47
D0 18.35 1879.69
 D#0/Eb0 19.45 1774.20
E0 20.60 1674.62
F0 21.83 1580.63
 F#0/Gb0 23.12 1491.91
G0 24.50 1408.18
 G#0/Ab0 25.96 1329.14
A0 27.50 1254.55
 A#0/Bb0 29.14 1184.13
B0 30.87 1117.67
C1 32.70 1054.94
 C#1/Db1 34.65 995.73
D1 36.71 939.85
 D#1/Eb1 38.89 887.10
E1 41.20 837.31
F1 43.65 790.31
 F#1/Gb1 46.25 745.96
G1 49.00 704.09
 G#1/Ab1 51.91 664.57
A1 55.00 627.27
 A#1/Bb1 58.27 592.07
B1 61.74 558.84
C2 65.41 527.47
 C#2/Db2 69.30 497.87
D2 73.42 469.92
 D#2/Eb2 77.78 443.55
E2 82.41 418.65
F2 87.31 395.16
 F#2/Gb2 92.50 372.98
G2 98.00 352.04
 G#2/Ab2 103.83 332.29
A2 110.00 313.64
 A#2/Bb2 116.54 296.03
B2 123.47 279.42
C3 130.81 263.74
 C#3/Db3 138.59 248.93
D3 146.83 234.96
 D#3/Eb3 155.56 221.77
E3 164.81 209.33
F3 174.61 197.58
 F#3/Gb3 185.00 186.49
G3 196.00 176.02
 G#3/Ab3 207.65 166.14
A3 220.00 156.82
 A#3/Bb3 233.08 148.02
B3 246.94 139.71
C4 261.63 131.87
 C#4/Db4 277.18 124.47
D4 293.66 117.48
 D#4/Eb4 311.13 110.89
E4 329.63 104.66
F4 349.23 98.79
 F#4/Gb4 369.99 93.24
G4 392.00 88.01
 G#4/Ab4 415.30 83.07
A4 440.00 78.41
 A#4/Bb4 466.16 74.01
B4 493.88 69.85
C5 523.25 65.93
 C#5/Db5 554.37 62.23
D5 587.33 58.74
 D#5/Eb5 622.25 55.44
E5 659.25 52.33
F5 698.46 49.39
 F#5/Gb5 739.99 46.62
G5 783.99 44.01
 G#5/Ab5 830.61 41.54
A5 880.00 39.20
 A#5/Bb5 932.33 37.00
B5 987.77 34.93
C6 1046.50 32.97
 C#6/Db6 1108.73 31.12
D6 1174.66 29.37
 D#6/Eb6 1244.51 27.72
E6 1318.51 26.17
F6 1396.91 24.70
 F#6/Gb6 1479.98 23.31
G6 1567.98 22.00
 G#6/Ab6 1661.22 20.77
A6 1760.00 19.60
 A#6/Bb6 1864.66 18.50
B6 1975.53 17.46
C7 2093.00 16.48
 C#7/Db7 2217.46 15.56
D7 2349.32 14.69
 D#7/Eb7 2489.02 13.86
E7 2637.02 13.08
F7 2793.83 12.35
 F#7/Gb7 2959.96 11.66
G7 3135.96 11.00
 G#7/Ab7 3322.44 10.38
A7 3520.00 9.80
 A#7/Bb7 3729.31 9.25
B7 3951.07 8.73
C8 4186.01 8.24
 C#8/Db8 4434.92 7.78
D8 4698.63 7.34
 D#8/Eb8 4978.03 6.93
E8 5274.04 6.54
F8 5587.65 6.17
 F#8/Gb8 5919.91 5.83
G8 6271.93 5.50
 G#8/Ab8 6644.88 5.19
A8 7040.00 4.90
 A#8/Bb8 7458.62 4.63
B8 7902.13 4.37

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

Joanna

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *