Web Audio API is a system for creating, controlling, and manipulating audio in a Web browser using JavaScript. This series of articles is intended to demonstrate the basic concepts needed to synthesize musical sounds using Web Audio API. In part 1 of this series, we created a Web page and JavaScript code to start and… Read more »
Month: November 2017
Synthesizing Musical Sounds with Web Audio API – Part 1
Web Audio API is a system for creating, controlling, and manipulating audio in a Web browser using JavaScript. This series of articles is intended to demonstrate the basic concepts needed to synthesize musical sounds using Web Audio API. Let’s start out by simply starting and stopping the sounding of a tone.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Synthesizing Musical Sounds with Web Audio API</title> <style> fieldset { float: left; } fieldset>label { padding-right: 0.75em; } fieldset>label:last-child { padding-right: unset; } </style> </head> <body> <h1>Synthesizing Musical Sounds with Web Audio API</h1> <form id='toneForm' onsubmit='javascript:void(0)'> <fieldset> <legend>Tone</legend> <label> Off <input name='onOff' type='radio' value='0' checked='checked' /> </label> <label> On <input name='onOff' type='radio' value='1' /> </label> </fieldset> </form> <script src="./web-audio-api-sounds.js"></script> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
(function(window, document) { "use strict"; var form = document.forms.toneForm, audioCtx, oscillator; form.onOff.forEach(function (radioBtn) { radioBtn.addEventListener('click', onOffChanged); }); function onOffChanged(evt) { var isOn = !!parseInt(this.value); if (isOn) { startTone(); } else { stopTone(); } } function startTone() { if (oscillator) { return; } audioCtx = audioCtx || new window.AudioContext(); oscillator = audioCtx.createOscillator(); oscillator.connect(audioCtx.destination); oscillator.start(); } function stopTone() { if (!oscillator) { return; } oscillator.stop(); oscillator = undefined; } })(window, document); |
If you… Read more »
Recent Comments