Audio tag usage and audio codes into html
The <audio> tag identifies sound, music, or other audio media. The HTML audio tag is used to embed audio and play audio content in an HTML page without requiring any additional plug-in player. It started to be used with HTML5.
<audio controls="controls" src="formula.mp3">
Audio tag to play the audio file in the file.
</audio>
<audio controls="controls" autoplay loop src="audio.mp3">
<source src="formula.mp3" type="audio/mpeg">
<source src="formula.ogg" type="audio/ogg">
Assuming that the audio playback format in your browser may be different, you can upload audio files with different extensions.
</audio>
Auto-Play Feature (Autoplay)
In order for the audio to start automatically, we need to add the autoplay attribute to the audio tag.
<audio controls autoplay>
Looping Audio Continuously (loop)
The loop attribute must be added to the audio tag so that the sound will start again and continue after it is finished.
<audio controls autoplay loop>
Mute feature (muted)
In order for the sound to be muted, the muted attribute must be added to the audio tag.
<audio controls autoplay muted>
Canceling the preload (preload)
The preload="none" attribute must be added to the audio tag to cancel the preload of the audio before it starts.
<audio controls autoplay preload="none">
Play and Pause Features
Playing these audio recordings normally or looping them over and over again doesn't make much sense. For example, if js is involved (jquery is enabled here, of course), more colorful things may emerge. We can start playback and pause operations. First, let's generate an html output.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support this feature.
</audio>
<button id="play">Play</button> <button id="pause">Stop</button>
Now let's add commands to click events in jquery to stop or play our sound file. We will use the play() and pause() methods for this.
// html audio element
var audio = $('audio');
// play function
$('#play').on('click', function(e){
audio[0].play();
e.preventDefault();
});
// stop function
$('#pause').on('click', function(e){
audio[0].stop();
e.preventDefault();
});
Adding [0] to the end of $('audio') allows us to convert it to an html audio element. Otherwise it would be a jquery object. As you can imagine, we had to do this because the audio methods only work on audio elements.
Calculating Total Duration and CurrentTime
duration and current Time are used to calculate the total duration of the audio file and the current duration while playing it.
We will get the current time using the above playback event.
// function that converts seconds
function readableDuration(seconds) {
sec = Math.floor( seconds );
min = Math.floor( sec / 60 );
min = min >= 10 ? min : '0' + min;
sec = Math.floor( sec 60% );
sec = sec >= 10 ? sec : '0' + sec;
return min + ':' + sec;
}
// html audio object
var audio = $('#audio');
// play event
$('#play').on('click', function(e){
audio[0].play();
e.preventDefault();
});
// stop event
$('#pause').on('click', function(e){
audio[0].pause();
e.preventDefault();
});
// print the total time when ready
audio.bind('canplay', function(){
var duration = audio[0].duration;
$('.duration').text( readableDuration(duration) );
});
// print current time on change
audio.bind('timeupdate', function(){
var current = audio[0].currentTime;
$('.current').text( readableDuration(current) );
});