is a professionally managed web design and web development company in Hyderabad, India.
Thursday, 14 February 2013
Audio with all controls
I use a html5 audio tag for background-music in a website (html5) which is build with an CMS called CMS Made Simple (Smarty, jQuery):
<div id="audio">
<div style="width:150px;height:15px;margin:0;padding:0;">
<div style="width:57px;float:left;">
<a href="javascript:;" id="play" onclick="document.getElementById('andytimm').play()" title="Play">play</a>
</div>
<div style="width:50px;float:left;">
<a href="javascript:;" id="pause" onclick="document.getElementById('andytimm').pause()" title="Pause">push</a>
</div>
<div style="width:36px;float:left;">
<a href="javascript:;" id="stop" onclick="document.getElementById('andytimm').pause(); document.getElementById('andytimm').currentTime = 0;" title="Stop">stop</a>
</div>
<div style="clear:both;"></div>
</div>
<audio id="andytimm">
<source src="images/Dramatic Intro.wav">
</audio>
<!--[if lt IE 9]>
<object id="andytimmObj" type="audio/x-mpeg" data="mysong.mp3" autoplay="false" height="45">
<param name="src" value="mysong.mp3">
<param name="controller" value="false">
<param name="autoplay" value="false">
<param name="autostart" value="0">
</object>
<script>
document.getElementById('play').onclick = function() { document.getElementById('andytimmObj').play() };
document.getElementById('pause').onclick = function() { document.getElementById('andytimmObj').pause() };
document.getElementById('stop').onclick = function() { document.getElementById('andytimmObj').stop() };
</script>
<![endif]-->
</div>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment