The HTML <audio> tag is used to embed sound content in webpage. You can play and pause the media by setting src attribute to identify the media source and including a controls attribute.
In the HTML5 it does not require to specify audio formats to browsers. But most commonly used audio formats are ogg, mp3 and wav.
You can use <source> tag to specify media address(url). An audio element allows multiple source elements (different source address) and browser will use the
first recognized format.
You can understand it by a simple example:-
e.g.
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src="/touch/audio.ogg" type="audio/ogg" />
<source src="/touch/audio.wav" type="audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
Result:-
Tips:-
**
There are some limitations on the types of files that can be used. Currently any browser that is based on Webkit, such as Chrome and Safari, supports the use of
regular .mp3 files. Others, such as Firefox, only support the .ogg format.**
*The controls attribute adds audio controls, like play, pause, and volume.
*Audio controls autoplay use to play the audio file automatically.
*The playback volume of any audio portions, in the range 0.0 (silent) to 1.0 (loudest).
*Multiple elements can link to different audio files. The browser will use the first recognized format.
*Any text inside the between will be displayed in browsers that do not support the <audio> tag.
The following attributes can be set for the </audio> tag:-
Attribute
Description
autoplay
Specifies that the audio will start playing as soon as it is ready
controls
Specifies that audio controls should be displayed (such as a play/pause button etc)
loop
Specifies that the audio will start over again, every time it is finished
muted
Specifies that the audio output should be muted
src
Specifies the URL of the audio file
Control attribute shows that audio controls should be displayed.
<audio control="Play|Pause|Seeking|Volume">
The audio will start over again,until you pause it.
<audio loop="loop">
Some time you want to play audio but don't want to see audio player that time you can use <hidden> attribute .
You can understand by above example:-
e.g.
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay hidden="true">
<source src="/audio.ogg" type="audio/ogg" />
<source src="/audio.wav" type="audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
Result:-
Here audio player is hidden but audio is playing.
You can use also div tag to hide audio player
<div style="display:none">
<embed src="sound.mp3"/>
</div>
Sometimes you wants make your website animated and for this you want to add sound with links(when cursor go over link sound play).
You can understand by above example:-
e.g.
<p style="padding-left:294px;"><a href="http://www.watchtvlive.in/p/home.html"onmouseover="mouseoversound.playclip()">HOME</a>
| <a href="http://www.watchtvlive.in/p/we-are-not-owner-of-filespicturesvideos.html"onmouseover="mouseoversound.playclip()">About us</a>
| <a href="http://www.watchtvlive.in/p/contact.html">Contact</a>
|<a href="http://www.watchtvlive.in/p/advertise-with-us.html" target="_blank">Advertise with us</a>
|<a href="http://www.watchtvlive.in/p/admin.html" target="_blank"onmouseover="mouseoversound.playclip()">Admin</a> </p>
<script>
var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list:
"mp3": "audio/mpeg",
"mp4": "audio/mp4",
"ogg": "audio/ogg",
"wav": "audio/wav"
}
function createsoundbite(sound){
var html5audio=document.createElement('audio')
if (html5audio.canPlayType){ //check support for HTML5 audio
for (var i=0; i<arguments.length; i++){
var sourceel=document.createElement('source')
sourceel.setAttribute('src', arguments[i])
if (arguments[i].match(/\.(\w+)$/i))
sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
html5audio.pause()
html5audio.currentTime=0
html5audio.play()
}
return html5audio
}
else{
return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
}
}
//Initialize two sound clips with 1 fallback file each:
var mouseoversound=createsoundbite("https://googledrive.com/host/0B69IAToT7u3TRTBtUi1zZnpFems")
var clicksound=createsoundbite("https://googledrive.com/host/0B69IAToT7u3TRTBtUi1zZnpFems")
</script>
0 comments:
Post a Comment