Einfacher Synthesizer

Mit der JavaScript AudioContext-API können komplexe Audioberechnungen durchgeführt werden, die dann im Browser wiedergegeben werden können!

 

https://developer.mozilla.org/de/docs/Web/API/AudioContext
https://www.keithmcmillen.com/blog/making-music-in-the-browser-web-audio-api-part-1/

 

 

Beispiel eines einfachen Synthesizers:

 

<!DOCTYPE html>
<html>
<head>
<title>Easy Synth</title>
</head>

<body>
<button id="osc">play</button>
<input type="range" id="oscPitch" min="50" max="5000" step="1" value="90">


<script>
//Objekt für die Audiobearbeitung erstellen
var context = new AudioContext();
var osc=document.getElementById("osc");
var oscillator;

//Eventhandler für den Button bei mousedown
osc.onmousedown=function()
{
//Daten vom Slider holen
var oscPitch=document.getElementById("oscPitch").value;
//einen Tonerzeuger=Oscillator als globales Objekt erstellen.
oscillator=context.createOscillator();
//Wellenform sinus auswählen
oscillator.type="sine";
//Tonhöhe aus slider zuweisen
oscillator.frequency.value=oscPitch;
//Den Oscillator auf den Lautsprecher verbinden.
oscillator.connect(context.destination);
//Ton starten mit Startverzögerung in Sekunden
oscillator.start(0);
//https://developer.mozilla.org/de/docs/Web/API/AudioContext
//https://www.keithmcmillen.com/blog/making-music-in-the-browser-web-audio-api-part-1/
}

//Eventhandler für den Button bei mouseup
osc.onmouseup=function()
{
//Oscillator vom Lautsprecher abhängen
oscillator.disconnect();
}

osc.onmouseout=function()
{
oscillator.disconnect();
}

</script>
</body>
</html>