Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Alguna idea para Shoutcast Live Streaming en HTML5

Estas en el tema de Alguna idea para Shoutcast Live Streaming en HTML5 en el foro de HTML en Foros del Web. Hola amigos tal como dice el titulo del asunto estoy intentando montar un live streaming shoutcast de audio con html5 hasta ahorita no me ha ...
  #1 (permalink)  
Antiguo 11/01/2013, 15:17
Avatar de MarkFL  
Fecha de Ingreso: mayo-2011
Mensajes: 85
Antigüedad: 13 años
Puntos: 4
Alguna idea para Shoutcast Live Streaming en HTML5

Hola amigos tal como dice el titulo del asunto estoy intentando montar un live streaming shoutcast de audio con html5 hasta ahorita no me ha funcionado en los siguientes navegadores obvio en sus versiones actuales:
Opera
Safari
Mozilla

En estos si funciona:
IE
Chrome

Para estas pruebas he usado la compilacion de: [URL="http://kolber.github.com/audiojs/"]audio.js[/URL]
Les pongo copia de mi codigo aqui:
Código:
<html lang="es-mx">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>Documento sin título</title>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href=".includes/index.css" media="screen">
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>
</head>

<body>
<audio src="http://mistreaming.com:8080/;" preload="none"> </audio>
</body>
</html>
Me gusta esta etiqueta HTML5 de <audio> por todas las ventajas que supone su implementacion pero no he logrado hacerlo funcionar del todo he buscado bastante y no encuentro nada concreto espero alguien pueda echarme una mano con esto.
  #2 (permalink)  
Antiguo 11/01/2013, 15:43
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 8 meses
Puntos: 187
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

es muy probable que tu streaming esté transmitiendo en un formato que no pueden reproducir los navegadores que mencionas.

para ayudarte mejor sería bueno saber en que formato lo hace y mucho mejor sería conocer la URL

Saludos
  #3 (permalink)  
Antiguo 11/01/2013, 19:19
Avatar de MarkFL  
Fecha de Ingreso: mayo-2011
Mensajes: 85
Antigüedad: 13 años
Puntos: 4
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

El streaming esta utilizando el clasico Shoutcast de Winamp y el paquete NSV para la codificacion de la emision tipo mp3
  #4 (permalink)  
Antiguo 11/01/2013, 21:32
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 3 meses
Puntos: 181
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Hola,

En una web estoy utilizando jplayer para el live streaming y hasta ahora funciona todo bien.



Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #5 (permalink)  
Antiguo 12/01/2013, 07:04
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 8 meses
Puntos: 187
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Como puedes ver acá:

http://html5doctor.com/native-audio-in-the-browser/

El formato mp3 solo es soportado por Google Chrome, Safari e Internet Explorer.

Como bien apunta pitufoweb el jplayer ( http://jplayer.org/ ) un reproductor HTML5 con fallback a Flash te va a permitir reproducirlo en todos los navegadores.
  #6 (permalink)  
Antiguo 12/01/2013, 15:05
Avatar de MarkFL  
Fecha de Ingreso: mayo-2011
Mensajes: 85
Antigüedad: 13 años
Puntos: 4
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Amigos antes que nada gracias por contestar!!!

Ya baje el JPlayer he hice mis pruebas de funcionamiento y al igual que el Audio.js solo me deja reproducir el live streaming en IE9 y Chrome 23.0.1271.97 m en los demás Opera 12.12, Firefox 18, y Safari 5.1.7 no lo he logrado aun

Según en la ayuda proporcionada en el sitio web para los streaming shoutcast como es mi caso recomiendan usar
Código:
/;stream/1
al final de la url source

También vi que por default esta activada la propiedad
Código:
wmode: "window"
que es la que realiza función de fallback que me comentan estoy comenzando a creer que no esta trabajando dicha función para llamar el reproductor flash en dichos navegadores

Aquí mi código usado con JPlayer:
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />

<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as an audio live-stream player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

	var stream = {
		title: "Mi radio",
		mp3: "http://miradio.com/;stream/1"
	},
	ready = false;

	$("#jquery_jplayer_1").jPlayer({
		ready: function (event) {
			ready = true;
			$(this).jPlayer("setMedia", stream);
		},
		pause: function() {
			$(this).jPlayer("clearMedia");
		},
		error: function(event) {
			if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
				// Setup the media stream again and play it.
				$(this).jPlayer("setMedia", stream).jPlayer("play");
			}
		},
		swfPath: "js",
		supplied: "mp3",
		preload: "none",
		wmode: "window"
	});

});
//]]>
</script>
</head>
<body>

		<div id="jquery_jplayer_1" class="jp-jplayer"></div>

		<div id="jp_container_1" class="jp-audio-stream">
			<div class="jp-type-single">
				<div class="jp-gui jp-interface">
					<ul class="jp-controls">
						<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
						<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
						<li><a href="javascript:;" class="jp-mute" tabindex="1" title="Silenciar">mute</a></li>
						<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="Escuchar">unmute</a></li>
						<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="Volumen máximo">max volume</a></li>
					</ul>
					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>
				</div>
				<div class="jp-title">
					<ul>
						<li>Mi radio</li>
					</ul>
				</div>
				<div class="jp-no-solution">
					<span>Update Required</span>
					To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
				</div>
			</div>
		</div>
</body>

</html>
De antemano gracias por sus comentarios!!!
  #7 (permalink)  
Antiguo 12/01/2013, 17:22
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 3 meses
Puntos: 181
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Hola,

Asegurate de que el Jplayer.swf este dentro de la carpeta "js"



Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #8 (permalink)  
Antiguo 14/01/2013, 19:04
Avatar de MarkFL  
Fecha de Ingreso: mayo-2011
Mensajes: 85
Antigüedad: 13 años
Puntos: 4
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Amigo pitufoweb ya comprobe el player y si esta en la carpeta

No se si podrias compartirme algo mas de informacion de como lo hiciste funcionar tu para ver si es posible emular tu configuracion gracias y seguire intentado

Ah un detalle que omiti comentar tanto en Firefox, Safari y Opera solo aparece el UI del player y al dar clic simplemente no hace nada

Gracias por sus comentarios
  #9 (permalink)  
Antiguo 14/01/2013, 19:26
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 3 meses
Puntos: 181
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Hola,

Te enviare la URL del reproductor por mensaje privado (No quiero hacerlo publico) así podrás comparar el código.


Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #10 (permalink)  
Antiguo 16/01/2013, 14:16
Avatar de MarkFL  
Fecha de Ingreso: mayo-2011
Mensajes: 85
Antigüedad: 13 años
Puntos: 4
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Amigo pitufoweb ya revise tu enlace pero no logre hacer que funcione ya te envié los detalles por MP ojala puedas echarle un vistazo una vez mas gracias por comentar!!! :)
  #11 (permalink)  
Antiguo 10/02/2013, 17:13
 
Fecha de Ingreso: marzo-2012
Mensajes: 2
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Si colocas este codigo si funciona

Cita:
<!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>

solamente estoy buscando la forma que funcione en audio/aac ya que el servicio que ofrezco es de AACPlus y es mucho mejor que el mp3 convencional.

Saludos
  #12 (permalink)  
Antiguo 12/02/2013, 13:57
 
Fecha de Ingreso: febrero-2013
Mensajes: 7
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Hola Ivan.
Tu codigo funciona sin ningun problema en los exploradores, pero cuando lo reproduzco del telefono android, ja sea con el crhome o el que trae de serie, la parte del volumen no se ve, y los botones no salen correctamente.
Tambien estoy probando las opciones de crear una app para android online de forma gratuita que le pones el codigo o la url y deberia de funcionar. y tampoco. Me ocurre lo mismo, los botones no se muestran correctamente.
He probado con un ejemplo de radiolondon que tienen en Jplayer y tampoco funciona.

No se si tu o alguien me podria ayudar. llevo dos semanas peleandome con lo mismo...

Saludos
  #13 (permalink)  
Antiguo 30/09/2013, 03:42
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 12 años, 5 meses
Puntos: 51
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Hola amigos, ¿cuál fue la solución finalmente?
Yo no puedo reproducir un live-streaming en firefox. Por ello es que estoy utilizando jplayer.

Tengo este jsfiddle: http://jsfiddle.net/XLNCY/5616/

Saludos, Daniel
__________________
Diseño Web Jaén
  #14 (permalink)  
Antiguo 30/09/2013, 04:23
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 12 años, 5 meses
Puntos: 51
Respuesta: Alguna idea para Shoutcast Live Streaming en HTML5

Hola, ¡¡lo conseguí!!

La radio en cuestión emite en formato mp3, probando y probando dejé sólo supplied: "mp3" (quité oga) e igual en setMedia.

Os dejo el jsfiddle actualizado: http://jsfiddle.net/XLNCY/5617/

Espero que os sirva, Daniel
__________________
Diseño Web Jaén

Etiquetas: html5, shoutcast, streaming
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:22.