Wir verschlüsseln Musik im Browser

  • Tutorial
Es gibt regelmäßig Artikel zum Erstellen von Javascript-Code, der im Browser Geräusche macht. Sie erklären, wie sich die Frequenz der Note von der Frequenz der A-Note unterscheidet. Codebeispiele geben regelmäßig einen „Beep-Beep“ aus.

Machen wir etwas Ähnliches, aber mit dem Ergebnis eher wie Musik. Und relativ visuelle Notation im Sinne von ABC , so etwas: Sie können

Bild

den Code ausführen und hier anhören .

Wie funktioniert es?


Für die Wiedergabe wird die WebAudioFont- Technologie verwendet . Instrumentenskripte werden direkt aus dem Projekt auf GitHub entnommen .

Notizen mit einer Dauer werden in ein Array gehämmert, von dem jedes Element eine Funktion des Formulars ist:

function bass(pitch, duration) {
	return {
		preset : _tone_Rubber_32Bass000079_461_460_45127,
		pitch : pitch,
		duration : duration
	};
}

Das heißt, Geben Sie einfach das Objekt zurück, das die Voreinstellung enthält (ein Werkzeug, wenn in Bezug auf WebAudioFont ), die Tonhöhe und die Dauer der Note.

Zur Verdeutlichung setzen wir die Höhe in vorgegebenen Konstanten (var C = 0; var Cs = 1; var D = 2; usw.) und die Dauer in Bruchteilen der vollständigen Note.

Für Trommeln sind Höhen mit Dauer natürlich nicht sinnvoll und werden daher mit den gleichen Werten eingestellt.

Um Sound auszugeben, sortieren wir das Array in einer Schleife und stellen jedes Preset in die Wiedergabewarteschlange:

function beats(notes) {
	for (var n = 0; n < notes.length; n++) {
		var beat = notes[n];
		for (var i = 0; i < beat.length; i++) {
			if (beat[i]) {
				player.queueWaveTable(audioContext
				, audioContext.destination
				, beat[i].preset
				, startTime + n * beatLen
				, beat[i].pitch
				, beat[i].duration);
			}
		}
	}
}

Wir senden das Array mit einem bestimmten Intervall unendlich an den Player:

setInterval(function () {
	if (audioContext.currentTime > startTime - 1 / 4 * N) {
		nextPiece();
		startTime = startTime + pieceLen;
	}
}, 20);

Nach jedem Senden erhöhen wir die Variable startTime, in der die Startzeit des aktuellen Stücks gespeichert ist.

Warnung: Wenn in modernen Browsern der Fokus auf ein anderes Fenster umgeschaltet wird, werden die Funktionen setTimeout und setInterval gewaltsam verlangsamt und die Melodie wird "gestört".

Ein weiteres Beispiel für JSFiddle


Alles ist ungefähr gleich, aber es werden mehr Noten und Instrumente über einen eigenen GainNode gespielt, um die Lautstärke anzupassen: Sie können

Bild

das Beispiel hier ausführen und anhören .

In JSFiddle können Sie sich im Gegensatz zu JSBin auf reinen JS-Code ohne HTML beschränken und Skripte von Tools und dem WebAudioFont- Player im linken Teil des Editors im Abschnitt Externe Ressourcen angeben.
Warnung für Anfängergitarristen: Wenn Sie vor dem Kauf eine Gitarre in einem Musikgeschäft überprüfen und mechanisch mit dem Spielen von „Smoke over Water“ beginnen, wird sofort eine Geldstrafe von 150 Rubel berechnet.

Beispiele funktionieren auch in mobilen Browsern, aber das Bearbeiten des Codes auf kleinen Bildschirmen von Telefonen ist nicht sehr praktisch.

Jetzt auch beliebt: