[Aportes] Reproductor de radio Personalizado en HTML5

Hola esta ves les traigo un reproductor en HTML5, esta es una buena opcion para dejar de usar flash, ya que estos no son seguros y ultimamente los navegadores estan prohibiendolo por una falla de seguridad que no actualizan los dueños "Adobe" y creo no lo haran, asi que buscando por la web encontre esto, creanme que fue algo dificil encontrarlo personalizado, no soy experto en programacion web pero algo he aprendido.

Bueno como ven en la imagen colocada arriba, es un reproductor que puse en mi blog, de la emisora Top Latino, ya que usaba la version flash tuve que buscar la ip y puerto y cambiarla al html5, pero dejare 2 cogidos, uno de la radio toplatino para que lo incluyan directamente a su web o blog y el otro sera para que ustedes coloquen su propia radio...

Codigo Reproductor de Radio HTML5 Top Latino directo a tu web:
Copiar el siguiente codigo y pegarlo en la parte que deseeas que aparesca el reproductor, este reproductor tiene medidas de 560px de ancho y 290px de alto!
<div style="background-image:url(http://i59.tinypic.com/125rrrc.jpg); height: 290px; text-align: center; width: 560px;"> <table width="560" height="290" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <th height="50" align="center" valign="middle" scope="row"><img class="pushbutton" src="http://i57.tinypic.com/5x361u.jpg" height="50" onclick="document.getElementById('player').play();" width="50" /><img class="pushbutton" src="http://i61.tinypic.com/20at1td.jpg" height="50" onclick="document.getElementById('player').pause();" width="50" /> <img class="pushbutton" src="http://i57.tinypic.com/bjhouc.jpg" height="50" onclick="document.getElementById('player').volume -= 0.1;" width="50" /> <img class="pushbutton" src="http://i57.tinypic.com/29muceu.jpg" height="50" onclick="document.getElementById('player').volume += 0.1;" width="50" /> </th> </tr> <tr> <th height="100" align="center" valign="middle" scope="row"><table width="558" height="100" border="0" cellpadding="0" cellspacing="0"> <tr> <th width="80" align="left" scope="row"><img src="http://i60.tinypic.com/15i2qoi.jpg" width="73" height="100" border="0" heigth="50px" /></th> <td width="398" align="center" valign="middle"><img src="http://i61.tinypic.com/11kwqqp.jpg" width="368" height="100" border="0" heigth="50px" /></td> <td width="80" align="left" valign="middle"><img src="http://i60.tinypic.com/15i2qoi.jpg" width="73" height="100" border="0" heigth="50px" /></td> </tr> </table> </th> </tr> <tr> <th height="120" scope="row"><style type="text/css"> .pushbutton:hover { position: relative; top: 1px; left: 1px; } ? </style><audio autoplay="autoplay" id="player" src="http://184.154.94.194:8028/;"> </audio></th> </tr> </table> </div> <br />

Codigo Reproductor Radio HTML5
<div style="background-image:url(); height: 290px; text-align: center; width: 560px;"> <table width="560" height="290" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <th height="50" align="center" valign="middle" scope="row"><img class="pushbutton" src="http://i57.tinypic.com/5x361u.jpg" height="50" onclick="document.getElementById('player').play();" width="50" /><img class="pushbutton" src="http://i61.tinypic.com/20at1td.jpg" height="50" onclick="document.getElementById('player').pause();" width="50" /> <img class="pushbutton" src="http://i57.tinypic.com/bjhouc.jpg" height="50" onclick="document.getElementById('player').volume -= 0.1;" width="50" /> <img class="pushbutton" src="http://i57.tinypic.com/29muceu.jpg" height="50" onclick="document.getElementById('player').volume += 0.1;" width="50" /> </th> </tr> <tr> <th height="100" align="center" valign="middle" scope="row"><table width="558" height="100" border="0" cellpadding="0" cellspacing="0"> <tr> <th width="80" align="left" scope="row"><img src="http://i60.tinypic.com/15i2qoi.jpg" width="73" height="100" border="0" heigth="50px" /></th> <td width="398" align="center" valign="middle"><img src="http://i61.tinypic.com/11kwqqp.jpg" width="368" height="100" border="0" heigth="50px" /></td> <td width="80" align="left" valign="middle"><img src="http://i60.tinypic.com/15i2qoi.jpg" width="73" height="100" border="0" heigth="50px" /></td> </tr> </table> </th> </tr> <tr> <th height="120" scope="row"><style type="text/css"> .pushbutton:hover { position: relative; top: 1px; left: 1px; } ? </style><audio autoplay="autoplay" id="player" src="http://TU-IP:Tu-PUERTO/;"> </audio></th> </tr> </table> </div>

Colocar tu ip de radio donde dice TU-IP y el puerto al lado donde dice TU-PUERTO, si quieres agregarle un fondo, busca una imagen de fondo que deesees con medidas de 560px de ancho y 290px de alto, y al iniciar el codigo dice "background-image: url(aqui pegas el link de la imagen para el fondo)" solo que en este codigo esta vacio le colocas el que desees.

Y bueno es todo si te gusto dale Like y Comparte para poder seguir subiedo post asi o si quieres algun otro avisame si en los comentarios, para poder ponerlo!