</div></div></div> </article> <div class="terms"></div> </div> <div class="clearfix"> <div class="links"></div> </div> </div> </div> </div> </div> </div> </div> </div><!--content area--> <div id="right-sidebar" class="span3"> <div class="region region-right-sidebar"> <div id="block-block-17" class="clearfix block block-block"> <div class="content"><html> <head> <style> .drop-shadow { margin:2em 5% 4em;width: 0px; } #player { height: -60px; //distancia de los botones desde el borde superior padding: 10px; position:relative; width: 220px; //ancho de la pista } button { background: #00007B; //color del fondo de los botones border:1px; -moz-border-radius: 5px; border-radius: 5px; bottom: 10px; color: #fff; padding: 5px; position:absolute; width:45px; } #audioStop { font-size:15px; left:160px; line-height:11px; } #audioPlay{ font-size:11px; left: 95px; line-height:11px; } #audioPause{ font-size:11px; left: 95px; line-height:11px; } #audioPlay.hidden, #audioPause.hidden { display:none; } #audioSeek { background: #00007B; //color del fondo de la pista cuando se hace clic border: 10px solid #000; //color del borde de la pista -moz-border-radius: 10px; border-radius: 10px; display:block; height:5px; } #audioLoaded { background: #00007B; //color del fondo de llenado de la pista border: 1px solid #000; color del borde de llenado de la pista -moz-border-radius: 10px; border-radius: 10px; display:block; height:4px; } #audioTimes { float:right; list-style:none; margin: 5px 0 0; } #audioTimes li { font:bold 13px Arial, Helvetica sans-serif; float: left; } #audioTimes li:first-child { border-right: 1px solid #000; margin-right: 15px; padding-right: 15px; } #audioTimes li:first-child { border-right: 1px solid #00007B; //color de la linea que divide el tiempo margin-right: 15px; padding-right: 15px; } </style> <title>Audio Player con HTML5</title> </head> <body onload="init()"> <div class="logo"><img src="websiteps/radio/logoradio.gif" /></div> <div class="drop-shadow curved curved-hz-1"> <div id="player"> <audio id="audioResource" src="http://www.powersoft.net.ec:8000/stream.ogg" ></audio> <div class="playerControls"> <button id="audioPlay" title="Play" onclick="play();">►</button> <button id="audioPause" class="hidden" title="Pause" onclick="pause();">▐▐</button> <button id="audioStop" title="Stop" onclick="stop();">■</button> <div id="audioSeek"> <div id="audioLoaded"></div> </div> <ul id="audioTimes"> <li id="audioElapsed">00:00:00</li> <li id="audioDuration">00:00:00</li> </ul> </div> </div> </div> <script type="text/javascript" > function init(){ audio = document.getElementById("audioResource"); audioDuration = document.getElementById("audioDuration"); audioElapsed = document.getElementById("audioElapsed"); audioPlay = document.getElementById("audioPlay"); audioPause = document.getElementById("audioPause"); audioStop = document.getElementById("audioStop"); audioLoaded = document.getElementById("audioLoaded"); audio.onloadedmetadata=setDuration(); audio.addEventListener("timeupdate", setElapsed, true); play(); //PowerSoft autoplay del reproductor } function setDuration(event) { audioDuration.innerHTML = formatTime(audio.duration); } function fillZero(str) { if (str.length > 2) return str; for (i=0; i<(2-str.length); i++) { str = "0" + str; } return str; } function formatTime(seconds){ var minute = 60, hour = minute * 60, hStr = "", mStr = "", sStr = ""; var h = Math.floor(seconds / hour); hStr = fillZero(String(h)); var m = Math.floor((seconds - (h * hour)) / minute); mStr = fillZero(String(m)); var s = Math.floor((seconds - (h * hour)) - (m * minute)); sStr = fillZero(String(s)); return (hStr + ":" + mStr + ":" + sStr); } function setElapsed(event) { audioElapsed.innerHTML = formatTime(audio.currentTime); amountLoaded = (audio.currentTime/audio.duration)*100; audioLoaded.style.width = amountLoaded + 'px'; } function play() { audio.play(); audioPlay.className = 'hidden'; audioPause.className = ''; } function pause(){ audio.pause(); audioPlay.className = ''; audioPause.className = 'hidden'; } function stop() { audio.pause(); audio.currentTime=0; audioPlay.className = ''; audioPause.className = 'hidden'; } </script> </body> </html></div> </div> </div> </div> </div><!--content zone--> </div> <div id="zone3"> <!--bottom region --> <!--footer region--> <div id="footer-bar" class="row-fluid"> <div id="footer-note" class="span7"> <div class="inner"> Copyright PowerSoft 2012 - Derechos Reservados © - Nº VISITAS: <div class="region region-footer"> <div id="block-block-2" class="clearfix block block-block"> <div class="content"><div style="margin: -15px auto -10px auto" id="statcounter_image" style="display:inline;"><a title="drupal counter" href="http://statcounter.com/drupal/" class="statcounter"><img src="http://c.statcounter.com/8850054/0/4d785172/0/" alt="drupal counter" style="border:none;" /></a></div></div> </div> </div> </div> </div> </div><!--footer bar--> </div> </div><!--container fluid and page wrapper--> <span class="divider"></span> <div id="feedback-div" class="visible-desktop"> <a data-original-title="Give us your valuable feedback" rel="tooltip" data-placement="right" id="feedback-link" href="#myModal" role="button" data-toggle="modal"><img src="/sites/all/themes/icompany/img/feedback.png" alt="" /></a> </div> <div id="toTop" ><img class="visible-desktop" src="/sites/all/themes/icompany/img/toTop.png" alt="Go to top" /></div> <div id="preLoad" style="display:none; visibility:hidden;"> <!-- Preload Images for backgrounds --> </div> <script type="text/javascript" src="http://www.powersoft.net.ec/sites/all/themes/icompany/js/bootstrap.js?nhrpp5"></script> <!-- Bootstrap scripts --> <script type="text/javascript"> (function ($) { $(document).ready(function () { $("[rel=tooltip]").tooltip(); $('.carousel').carousel() $("a[rel=popover]").popover({html : true}); }); })(jQuery); </script> </body> </html>
