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>

No comments:

Post a Comment