Aportación: Player de shoutcast en HTML5

lado2mx · #1 (**permalink**) 16/12/2011, 23:07

Hola a todos, tanto tiempo, bueno ahora estoy empezando a volver a escribir y quiero darles una pequeña aportación, que es como hacer funcionar un Reproductor Shoutcast en HTML5, el código es sencillo pero tiene sus contras:

Código HTML:

<!DOCTYPE html> <html lang="es"> <head>
<meta charset="utf-8" /> <title></title>
</head> <body>
<audio controls="controls" autoplay> <source src="http://lado2.com:8000/;stream.nsv" type="audio/mpeg" />   Este codigo no funciona en este navegador. </audio>
</body></html>

Este código incluso puede funcionar bajo AAC, con solo cambiar la variable type.

Funciona en casi todos los navegadores de PC y Mac, excepto con Mozilla Firefox, y (obviamente) en Aurora. Pero aun así, si funciona con Explorer 9, Chrome, Safari (supongo), y hasta Opera (con excepción del Opera Mobile 10).

Espero ayuden a enriquecer este mensaje, cualquier comentario bienvenido.

Para más información pueden verlo en: http://w3schools.com/html5/html5_audio.asp

carlos_belisario · #2 (**permalink**) 17/12/2011, 07:47

y porque para firefox no?? si en el link que dejas bien indica que lo que no soporta es el mp3?? lo que habria hacer no es que colocar las configuraciones de cada tipo de archivo??
por cierto miren este post con un archivo js externo como indican en el post que probe en firefox y leyo un mp3, según indican en los navegadores viejos tambien funciona, imagino que hacen un condicional para cargarlo con flash en el achivo js, saludos

lado2mx · #3 (**permalink**) 17/12/2011, 15:57

Tienes razón Carlos, es cosa de probarlo así, gracias, solo el detalle era de que no se podia probar nativamente por los problemas legales que tiene Mozilla por conseguir licencias para el MPEG y ponerlo en HTML5.

Pero tienes razón, cosa de probarlo así, gracias

carlos_belisario · #4 (**permalink**) 17/12/2011, 16:05

Aun cuando no se pudiera trabajar con el mp3 en firefox, siempre esta la opcion de convertirlo al formato que es compatible con el navegador e indicarlo o no??.

Esta etiqueta como la de video son las que me han llamado mas la atención ya que, tengo malos recuerdos instalando el plugin de flash para los navegadores, saludos

lado2mx · #5 (**permalink**) 17/12/2011, 16:15

Oye Carlos, acabo de ponerlo y no funciona, es más neutraliza todo, igual porque no aguanta un streaming sino un archivo. Me dice que el media no fué encontrado cuando a leguas si se encontró...

Les enseño el link para que verifiquen... http://lado2.com/estadisticarad.php?...om&puerto=8000

carlos_belisario · #6 (**permalink**) 17/12/2011, 18:17

es interesante yo lo probe en firefox en el localhost y funciono perfectamente, has una prueba e incluye primero esta libreria y luego el JQuery a ver si esta trayendo conflictos estas, aunque no deberia de haber ningun problema entre estas

Greco2 · #7 (**permalink**) 18/12/2011, 17:41

yo he estado probando algo parecido para reproducir streaming de shoutcast pero sin la librería html5media.

Revisando tu ejemplo efectivamente no funciona en firefox, al cargar la página en el lugar del player aparece un texto "NetStream.Play.StreamNotFound, clip [clip]" y luego es reemplazado por un player flash (flowplayer) pero no reproduce. En Chrome y IE si funciona.

lado2mx · #8 (**permalink**) 19/12/2011, 10:41

Acabo de hacer algo más "ornamental", o sea algo más en maña, viendo la librería de html5media mejor decidí hacerlo al viejo estilo de PHP.

Código PHP:

  <? 
$radio="lado2.com";
$puerto="8000";
$es_html5=FALSE; //Aquí se declara la variable falso o verdadero XD
   $usuario = $_SERVER['HTTP_USER_AGENT']; //Con esta leemos la info de su navegador
 
   $usuarios_moviles = "MSIE 9.0, Opera, Chrome"; //En esta cadena podemos quitar o agregar navegadores de dispositivos moviles, te recomiendo que hagas un echo $_SERVER['HTTP_USER_AGENT']; en otra pagina de prueba y veas la info que arroja para que despues agregues el navegador que quieras detectar
 
   $navegador_usuario = explode(',',$usuarios_moviles);
 
   foreach($navegador_usuario AS $navegador){ //Este ciclo es el que se encarga de detectar el navegador y devolver un TRUE si encuentra la cadena
      if(eregi(trim($navegador),$usuario)){
         $es_html5=TRUE;
      }
   }
 
   if($es_html5==TRUE){
      ?><audio controls="controls" autoplay>
  <source src="http://<? echo $radio; ?>:<? echo $puerto; ?>/;stream.nsv" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio><?
   }
   else{ 
   ?><embed 
src="mediaplayer.swf"
width="100%"
height="170"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="file=http://<? echo $radio; ?>:<? echo $puerto; ?>/;stream.nsv&type=mp3&autostart=true&linkfromdisplay=true"/>
    </embed><?
   } ?>

No es malo usar librerías, pero si sabes antes la solución, dala.

carlos_belisario · #9 (**permalink**) 19/12/2011, 14:49

yo creo que en vez de hacer el ciclo con php pudieras hacerlo directamente en el <audio> de esta manera

Código HTML:

Ver original<audio controls="controls" autoplay>
    <source src="http://lado2.com:8000/;stream.nsv" type="audio/mpeg" />
      <embed src="mediaplayer.swf" ....></embed>
</audio>

de tal manera que en vez de decir que no soporta la etiqueta audio, mandas a mostrar el flash, creo que funciona así, no lo probe, saludos

lado2mx · #10 (**permalink**) 19/12/2011, 15:25

Tienes razón, pero eso es en caso que no quiere agarrar por ser un navegador viejo, pero no uno nuevo, te lo digo porque por eso así lo uso. Y así lo voy a usar. Gracias por tus comentarios, quien más opina?

Greco2 · #11 (**permalink**) 19/12/2011, 19:11

aunque mi comentario no tiene que ver con "audio html5" si no más bien con flash, recuerda que el player flash va almacenando todo el streaming que va recibiendo en memoria con lo cual si alguien está escuchando por un periodo largo, el consumo de ram se dispara.
Una solución que utilizo (me la dieron en el foro de flash aquí mismo) es reiniciar la reproducción cada XX minutos.

Saludos

IvanAJauregui · #12 (**permalink**) 10/02/2013, 04:32

Hola

Estaba mirando el tema y se me hizo interesante ya que estoy tratando de poder trasmitir audio en html5 en AACPlus

Coloque el codigo de esta forma.

Cita:

Pero no logro escuchar en un dispositivo android bajo una aplicación que estoy generando.

Saben como puedo lograr que reproduzca la trasmicion bajo audio/aacp mediante esta forma.

Saludos

lee51 · #13 (**permalink**) 12/02/2013, 04:42

Hola amigos,
Estoy probando el código de lado2mx pero no me funciona.
Quiero hacer lo mismo, reproducir el streaming de shoucast pero no lo consigo,
alguien puede ayudarme.
Gracias

mashter · #14 (**permalink**) 13/04/2013, 10:05

aqui otro con varios diseños

[enlace eliminado]

este webplayer tambien compatible con windows, linux, mac, iphone y android

JLRS13 · #15 (**permalink**) 29/05/2013, 18:35

Cita:

Funciona en casi todos los navegadores de PC y Mac, excepto con Mozilla Firefox, y (obviamente) en Aurora. Pero aun así, si funciona con Explorer 9, Chrome, Safari (supongo), y hasta Opera (con excepción del Opera Mobile 10).

Espero ayuden a enriquecer este mensaje, cualquier comentario bienvenido.

Para más información pueden verlo en: [url]http://w3schools.com/html5/html5_audio.asp[/url]

Gracias LadoMX2 !!!!

PROBADO EN MOZILLA - CHROME - IE8 y funciona correctamente.

Complemento tu aporte:

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Radio Seguridad®</title>
<link rel="stylesheet" href="#.css" />
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
<body style="background-color: #F1F1F1; background-image:url('/radio/templates/ja_opal/images/red/mainwrap-bg_top.jpg'); no-repeat center top;">
  <audio controls="controls" autoplay><source src="http://72.29.70.19:8188/;stream.mp3" type="audio/mpeg" /></audio>
  <script src="http://multistreaminghost.com/system/streaminfo.js"></script>
  <script src="http://multistreaminghost.com/js.php/radioseguridad/streaminfo/rnd0"></script>
</body>
</html>

mashter · #16 (**permalink**) 02/11/2013, 23:42

He mejorado el reproductor que antes comparti y lo publique en:

Es un jplayer personalizado, por medio del cual detecta la compatibilidad del reproductor seleccionando html5 o flash como medio de reproduccion sin perder el diseño seleccionado.

Tambien cuenta con integracion a Centova Cast, al colocar tu usuario se enlaza a las caratulas de tu disco, pieza actual, etc.

Ademas de algunas animaciones adicionales para darle algo de vida.

Esta nueva version tiene mas opciones de personalizacion y una integración mas facil con tan solo un copy & paste

Igual que antes con compatibilidad en windows, OS X, linux, android y iphone espero les sirva.

Les agradecere ayuden a la difucion.

radiocelestial · #17 (**permalink**) 28/11/2013, 13:34

Cita:

Iniciado por JLRS13

Gracias LadoMX2 !!!!

PROBADO EN MOZILLA - CHROME - IE8 y funciona correctamente.

Complemento tu aporte:

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Radio Seguridad®</title>
<link rel="stylesheet" href="#.css" />
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
</head>
<body style="background-color: #F1F1F1; background-image:url('/radio/templates/ja_opal/images/red/mainwrap-bg_top.jpg'); no-repeat center top;">
  <audio controls="controls" autoplay><source src="http://72.29.70.19:8188/;stream.mp3" type="audio/mpeg" /></audio>
  <script src="http://multistreaminghost.com/system/streaminfo.js"></script>
  <script src="http://multistreaminghost.com/js.php/radioseguridad/streaminfo/rnd0"></script>
</body>
</html>

hola soy nueva en el foro ¿me podia decir como poner el codigo para mi radio?

gracias y saludos

Carlangueitor · #18 (**permalink**) 28/11/2013, 21:53

¿Que parte de copiar y pegar se te dificulta?