Create a Triangular Sound Wave

This JavaScript Reference section displays the code for an example program that shows how to generate a triangular sound wave.

GenerateTriangleWaves.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>XoaX.net's JavaScript</title>
  </head>
  <body>
    <h1>Triangular Wave: 440 Hz</h1>
    <button>Play Sound</button>
    <p id="idMessage">No Message Yet</p>
    <h3>Buffer Properties</h3>
    <ul>
    	<li>Channels: <span id="idChannels"></span></li>
    	<li>Samples: <span id="idSamples"></span></li>
    	<li>Samples Per Second: <span id="idSampleRate"></span></li>
    </ul>
  </body>
  <script>
    var gqSoundButton = document.querySelector("button");

    var gqAudioContext = null;
    var gqAudioBufferSourceNode = null;

    function Initialization() {
    	
      gqAudioContext = new AudioContext();
      // Create the buffer of 2 seconds of data
      const qAudioBuffer = new AudioBuffer({
        numberOfChannels: 1,
        length: gqAudioContext.sampleRate * 2.0,
        sampleRate: gqAudioContext.sampleRate,
      });
      
      // Fill in the sound information
      var qChannelsElement = document.getElementById("idChannels");
      qChannelsElement.innerHTML = qAudioBuffer.numberOfChannels;
      var qSamplesElement = document.getElementById("idSamples");
      qSamplesElement.innerHTML = qAudioBuffer.length;
      var qSampleRateElement = document.getElementById("idSampleRate");
      qSampleRateElement.innerHTML = qAudioBuffer.sampleRate;
      
      // Get the data for the first channel. (There is only one.)
      var daBufferData =  qAudioBuffer.getChannelData(0);
      var dWaveFrequency = 440;
      var iSamplesPerWave = Math.floor(gqAudioContext.sampleRate/dWaveFrequency);
      // The data is in the interval [-1.0, 1.0]
      for (var i = 0; i < qAudioBuffer.length; ++i) {
      	// We are going to make a triangular wave with frequency 400hz or an A note.
      	var iMod = (i % iSamplesPerWave);
      	// These are the two regions of the wave: rising from -1 to 1 and falling from 1 to -1
      	if (iMod <= iSamplesPerWave/2) {
      		daBufferData[i] = -1 + 4*(iMod/iSamplesPerWave);
      	} else {
      		daBufferData[i] = 1 - 4*((iMod - iSamplesPerWave/2)/iSamplesPerWave);
      	}
      }
      // Create the source node, give it a buffer of data, and connect it to the destination
      gqAudioBufferSourceNode =  gqAudioContext.createBufferSource();
      gqAudioBufferSourceNode.buffer = qAudioBuffer;
      gqAudioBufferSourceNode.connect(gqAudioContext.destination);
    }

    gqSoundButton.onclick = () => {
    	Initialization();
    	gqAudioBufferSourceNode.start();
    	var qMessageElement = document.getElementById("idMessage");
    	qMessageElement.innerHTML = "Playing";
    	
    	gqAudioBufferSourceNode.onended = () => {
    		var qMessageElement = document.getElementById("idMessage");
    		qMessageElement.innerHTML = "Done";
      };
    };
  </script>
</html>

Core JavaScript

Create a Triangular Sound Wave

GenerateTriangleWaves.html

Output