The <audio> tag of HTML5 have the power of embedding and controlling audio in your web pages with a single line of coding
I am introducing the <audio> tag in detail here with code examples
To include an audio into your web page
<audio src="/test/audio.ogg"><p>Your browser does not support the audio element.</p></audio>
The src parameter can be a URL of the audio file or the path to the file on the you computer
<audio src="audio.ogg" controls autoplay loop><p>Your browser does not support the audio element </p></audio>
The following attributes may be used in your audio tag
- controls: Displays the standard HTML5 controls for the audio on the web page.
- autoplay: Makes the audio play automatically.
- loop: Make the audio repeat (loop) automatically.
- <audio src="audio.mp3" preload="auto" controls></audio>
The preloadattribute is used in the audio element for buffering large files. It can take one of 3 values:
- "none"does not buffer the file
- "auto"buffers the media file
- "metadata"buffers only the metadata for the file
Controlling an HTML5 audio player to play, pause, increase and decrease volume using some Javascript is straightforward.
<audio id="demo" src="audio.mp3"></audio>
<div>
<button onclick="document.getElementById('demo').play()">Play the Audio</button>
<button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>