Web Audio

The Web Audio API is a JavaScript based API for sound synthesis and processing in web applications. It is compatible to most browsers and can thus be used on almost any device. Rad the W3C Candidate Recommendation for an in-depth introduction and documentation:

https://www.w3.org/TR/webaudio/

The Sine Example

The following Web Audio example features a simple sine wave oscillator with frequency control and mute button. Since HTML is kept minimal, the code is compact but the GUI is very basic.

Sine Example

Sine Example.

Frequency

Code

sine_example/sine_example.html (Source)

<!doctype html>
<html>

<blockquote style="border: 2px solid #122; padding: 10px; background-color: #ccc;">

  <head>
    <title>Sine Example</title>
  </head>

  <body>
    <p>Sine Example.</p>
    <p>
      <button onclick="play()">Play</button>
      <button onclick="stop()">Stop</button>
      <span>
        <input id="pan" type="range" min="10" max="1000" step="1" value="440" oninput="frequency(this.value);">
        Frequency
      </span>
    </p>

  </body>

</blockquote>


  <script>
    var audioContext = new window.AudioContext
    var oscillator = audioContext.createOscillator()
    var gainNode = audioContext.createGain()

    gainNode.gain.value = 0

    oscillator.connect(gainNode)
    gainNode.connect(audioContext.destination)

    oscillator.start(0)

    function play()
    {
      gainNode.gain.value = 1
    }

    function stop()
    {
      gainNode.gain.value = 0
    }

    function frequency(y)
    {
      oscillator.frequency.value = y
    }


  </script>
</html>

References

  • Chris Chafe. Browser-based sonification. In Proceedings of the 17th Linux Audio Conference. 2019.
    [BibTeX▼]


  • Contents © Henrik von Coler 2020 - Contact