The Tech Blog of Steve J. 2017 November

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.

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

<html>

<head>

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

<label>

Off

</label>

<label>

</label>

</fieldset>

</form>

</body>

</html>

(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);

(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 »

Month: November 2017

Synthesizing Musical Sounds with Web Audio API – Part 2

Synthesizing Musical Sounds with Web Audio API – Part 1

Recent Posts

Recent Comments

Archives

Meta