Música de fondo flotante

Hace unos días a mi hijo se le ocurrió que los reproductores de música que pongo de fondo en algunos de mis blogs esté visible mediante un gadget que le permita a los visitantes apagar la música si la considera molesta.

Esto quiere decir que hay que evitar que el visitante ande de aquí para allá buscando dónde se nos ha ocurrido ocultar el widget.

Se me ocurrió que lo más fácil era combinar dos trucos que desde Ciudad Blogger se habían puesto a mi disposición.

El primero es el de anuncio flotante que permanece llamando la atención del visitante en la parte superior izquierda de la pantalla. El truco era suplantar ese anuncio por los reproductores de audio HTML5 que el mismo Potro había publicado un tiempo atrás.

En los reproductores se debe añadir la URL de tu canción en formato MP3 y otra URL de tu misma canción pero en formato OGG, ambas almacenadas en algún host del estilo de Dropbox. Son dos formatos  porque algunos navegadores no admiten aun el formato MP3, específicamente el navegador Opera pues según sé Firefox desde la versión 21 ya admite MP3.

Hay varios programas para PC y Mac que convierten archivos de audio y video en formato OGG, pero además hay varios sitios en línea que también lo hacen, uno de mis favoritos es media.io

En el código te facilito debes cambiar lo marcado en rojo por las URL de tus archivos de audio.

<audio controls>
<source src="URL del archivo mp3" type="audio/mpeg">
<source src="URL del archivo ogg" type="audio/ogg">
<embed src="URL de tu archivo mp3" type="audio/mp3" width="200"
height="100"/>
</audio>

Tambien puedes jugar con los atributos del elemento AUDIO y VIDEO que son: controls, autoplay, loop, muted, y preload

• controls permite que se muestren los controles y el reproductor en sí.
• autoplay hace que el archivo se reproduzca al cargar la página.
• loop reproducirá el archivo una y otra vez.
• muted quitará el audio del archivo.
• preload define si el reproductor se debe cargar cuando se cargue la página.

Todos deben ser colocados a continuación de "audio controls"

 Sólo debes copiar y pegar este código en un elemento HTML/Javascript de tu blog.

<center> <style type="text/css"> #anuncio { position: absolute; border: 0px; padding: 2px; width: 300px; height: 80px; visibility: hidden; z-index: 200; top: 27px; left: -13px; } </style> <script type="text/javascript"> //<![CDATA[ var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session var startX = 30 //set x offset of bar in pixels var startY = 5 //set y offset of bar in pixels var verticalpos="fromtop" //enter "fromtop" or "frombottom" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("anuncio").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("anuncio").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("anuncio"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar //]]> </script> <br /> <div id="anuncio"> <a href="javascript:void" onclick="closebar(); return false"><img align="right" border="0" src="https://lh4.googleusercontent.com/-sZ4-J0SS3yI/U3wFVMfDQNI/AAAAAAAAlHI/J-tJT9kfl3A/s14/icono-cerrar.png" /></a><br /> <audio controls autoplay loop> <source src="URL del archivo mp3" type="audio/mpeg"></source> <source src="URL del archivo ogg" type="audio/ogg"></source> <embed height="100" src="URL del archivo mp3" type="audio/mp3" width="200"></embed> </audio> </div>