Audio Tag:

This is a native audio playback within html5 which is not consistent in every browser. Not all browsers have OGG or MP3 support.

Audio Tag Documentation

More examples:

Quick Tutorial by HTML5Rocks Audio Tag and Processing.js

This audio tag allows for simple music playback with basic controls.

<audio controls="controls"> <source id="audio" src="audio/song.mp3"/ type="audio/mpeg"> <source id="audio" src="audio/song.ogg"/ type="audio/ogg"> This browser doesn't support HTML5 audio! </audio>

With this configuration, the audio controls are hidden and the audio is preloaded when the page loads.

<audio id="background_audio" autoplay="" loop="loop"> <source src="audio/bgmusic.mp3" type="audio/mp3" /> <source src="audio/bgmusic.ogg" type="audio/ogg" /> </audio> <div id="container"> <input type="button" value="Mute//Unmute" id="mutebutton" onclick="muteOrUnmute()" > </input> <input type="range" min="0" max="10" step="0.2" onchange = "background_audio.volume=this.value"/> </div> <script type="text/javascript" > var mutebutton = document.getElementById('mutebutton'); background_audio.onvolumechange = function(e) { background_audio.value = background_audio.muted ? 'Muted' : 'Unmuted'; } function muteOrUnmute() { background_audio.muted = !background_audio.muted; } </script>

Toggle Mute/Unmute

Soundmanager 2:

Soundmanager 2 is a wrapper and extension of HTML5 audio and Flash audio APIs combining them into a single javascript API. This API does not work on local machine, it will not initiate Flash and terminate. Parameters for playback can be defined at playback or when the API initializes.

Soundmanager 2 Documentation

more examples:

Basic Examples from Soundmanager2

This API contains a library of buit-in functions for audio playback. For example, to mute a sound file you only have to call soundmanager.toggleMute('audio-id') instead of making a button that calls a javascript function to switch from mute and unmute. There are also built-in events, which allows for different variations in playback.

<div id = "container"> <button onclick="soundManager.play('song1',{onfinish: function() {soundManager.play('sound2',{volume:20});}});">Play Sound</button> <button onclick="soundManager.togglePause('song1')">Toggle Pause/Play Sound</button> <button onclick="soundManager.toggleMute('song1')">Toggle Mute/Unmute Sound</button> <input type="range" min="0" max="100" step="5" onchange="soundManager.setVolume('song1',this.value);"/> </div>

Play Sound Toggle Pause/Play Sound Toggle Mute/Unmute Sound

This API also contains buit-in functions that allow for greater control of the audio playback. You can set volume similar to the Audio Tag, but you can also set the Pan and Position of sound file.

soundManager.setVolume('sound3',20); //volume 0-100(high) soundManager.setPan('sound3',-50); //pan (left)-100 to 100(right) <button onclick="soundManager.play('sound2',{volume:50})">Play Footstep at 50%</button> <button onclick="soundManager.play('sound3')">Play Bark at 25% and Left Pan</button>

Play Footstep at 50% Play Bark at 25% and Left Pan

Using this API, you can extract the metadata from the sound files and create visualizations. 360-player canvas visualizations
drum machine
christmas lights
paint brush

Web Audio API:

This API is a high level javscript API for processing and synthesizing audio within HTML5. It is not a stable API at this time as it is still in development. This API is developed by w3c, and there is similar but lower level API called Audio Data API is being developed by mozilla. Web Audio API documentation

More examples:

Getting Started with the Web Audio API
Developing Game Audio with the Web Audio API
Positional Audio and WebGL
Audio Visualization with Three.js
Reverb and Guitar
List of Demos
More Examples

Unlike working with audio elements, you can't simply set the source and have it load. Most often, you will load the audio file with an XMLHttpRequest and an asynchronous callback. Depending the web audio elements are linked together defines the output. The most basic connection is source and the destination, and you can add gain, filters, convolver, and panner to modify the source before sending the source to the destination.

Play

Stop

Adding effects using filters to the audio.

3D sound capabilities based on the OpenAL library. There is an audioListener and audioSource with audioPannerNode.

Interfaceing Javascript with Processing.js