HTML5 Audio Element

Javascript Audio Synthesis - How to use HTML5 audio tag to create sounds

This method generates a raw binary wave (wav) file with a simple frequency (sine wave) and writes it directly to the audio tag output. It is compatible with all modern browsers (tested in Chrome, Safari and Firefox). Not working with Internet Explorer.

To create the binary wave file it uses "riffwave.js" library from the page "HTML5 sound synthesis via PCM encoding": http://www.codebase.es/riffwave/

<script src="/sound/js/riffwave.js"></script>
<script>

function play_tone(freq) {

  var samples = [];
  var samples_length = 44100;            // 1 second (44.1 KHz)
  for (var i=0; i<samples_length; i++) { // fills array with samples
    var t = i/samples_length;            // time from 0 to 1
    // Generate samples using sine wave equation (between 0 and 255)
    samples[i] = 128+Math.round(127*Math.sin(freq*2*Math.PI*t));
  }

  var wave = new RIFFWAVE();          // Create raw wav file
      wave.header.sampleRate = 44100; // 44.1Khz (1 second)
      wave.header.numChannels = 1;    // 1 channel (mono)
      wave.Make(samples);

  var audio = new Audio();    // Create <audio> tag
      audio.src=wave.dataURI;
      audio.play();

}

play_tone(440); // Frequency 440 Hz = "A" note

</script>
</pre>
Change frequency number to hear other notes:


Other method (using Firefox 4 Audio Data API):

It is also possible to synthesize sounds using the Audio API (mozSetup() and mozWriteAudio() methods) that works only in Firefox 4, with the following code that is simple and does not require any other js library:

<script>
function play_tone_moz(freq) {
  audio_output = new Audio();
  audio_output.mozSetup( 1, 44100 ); // 1 Channel at 44.1 Khz
  var samples = [];
  for (var i=0; i<44100; i++) {
    samples[i] = Math.sin( freq *2*Math.PI * i/44100 );
  }
  audio_output.mozWriteAudio( samples );
}
</script>

The Audio API can also be used to analyze and visualize audio spectrum using FFT (Fast Fourier Transform), display graphics based on audio samples and create interactive synthesizers.

About Rodrigo Siqueira

Software developer and director at Insite (www.insite.com.br). I create Internet tools like: online forums, chat rooms, email marketing software, task management and chatter bots. I love to code in JavaScript, jQuery, Node.js and Perl.
This entry was posted in Javascript Audio and tagged , . Bookmark the permalink.

2 Responses to HTML5 Audio Element

  1. Nolan says:
    Hey Rodrigo, great site! Learning a lot already. I was wondering, is there a way to make the sine wave not sound as tinny with riffwave.js? It sounds a lot cleaner in the Firefox example, and I'm guessing it's from the fact that you need to round it for riffwave? Is there any way to get around that?
  2. Tim says:
    @Nolan you have to change the bit depth from 8bit (2^8 = 256) to 16bit (2^16). I'm not sure though if and how you could do that with riffwave.js...

Leave a Reply to Tim Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <font color="" face="" size=""> <span style="">