Reproductor MP3

rossijona · #1 (**permalink**) 14/12/2010, 11:54

Buenas estimados.

Tengo una importante cuestión que la verdad me esta atascando en el proyecto.

Resulta que tengo que implementar un reproductor de MP3 en un sitio y vi muchas maneras de realizar esto, la mas sencilla es con un flash...

En fin, resulta que mi estado es el siguiente:

Tengo unas listas ordenadas en forma de menú desplegadle de esta manera:

Artista – Album – Canción., este ultimo “LI” será un enlace directo al MP3 o como sea que deba de hacer el enlace, yo simplemente quiero que al clickear en ese enlace al mp3 este se abra en un div o bien un iframe en un reproductor mp3 (no importa si es flash, si es java....)

En google chrome esto se puede realizar sin problemas, ya que chrome viene con soporte HTML5 para el elemento <audio> y en chrome tu al hacer clic al enlace de un mp3 te abre en targen _blank el reproductor.

Si quedo alguna duda por favor decírmela así me ayudan a resolver este tema que me tiene ya hace 2 semanas....

Muchas gracias!!!

emprear · #2 (**permalink**) 14/12/2010, 12:27

rossijona

Hace un rato conteste un post cuya solución, según mi entender, se aplica a tu caso

http://www.forosdelweb.com/f77/ayuda...0/#post3671009

Saludos

rossijona · #3 (**permalink**) 14/12/2010, 12:56

Cita:

Iniciado por emprear

rossijona

Hace un rato conteste un post cuya solución, según mi entender, se aplica a tu caso

[url]http://www.forosdelweb.com/f77/ayuda-con-video-seleccion-del-mismo-868330/#post3671009[/url]

Saludos

Viendo la instalación y un poco el código del Ajas parece que funcionara como un iframe cargando enlaces con target: “nombre de ID”.

No es exactamente lo que busco, aunque pensándolo bien también puede llegar a ser una solución, el único dilema es que tendría que crear un html para cada canción que suba para que de esa manera se cargue en el iframe...

En principio busco algo mas accesible ya que voy a subir unos 3000 mp3 en distintos servidores...

Alguna idea estimado?.

emprear · #4 (**permalink**) 14/12/2010, 13:51

En primer lugar lo cargarías en un div con ajax, en segundo (pero esto habria que probarlo ya que sigo con la duda que mencione)

harias lo siguiente

la función para llamar al archivo es
ajaxpage('reproductor.php', 'divreproductor')

habría que probar con
ajaxpage('reproductor.php?id=uno', 'divreproductor')
en donde "uno" es el nombre del mp3

ahora el tema pasa por que reproductor usas, supongamos que es el dewplayer ( http://www.alsacreations.fr/dewplayer-en.html ), uno que suelo usar, cuyo código para cargar es

Código HTML:

Ver original<object type="application/x-shockwave-flash" data="/flashdir/dewplayer-mini.swf" width="160" height="20" id="dewplayermini" name="dewplayermini">
<param name="movie" value="/flashdir/dewplayer-mini.swf" />
<param name="flashvars" value="mp3=flashdir/mp3/everywhere.mp3" />
</object>

y se haría con php

Código PHP:

Ver original<?php
 
$id = $_GET['id'];
 
?>
 
<object type="application/x-shockwave-flash" data="/flashdir/dewplayer-mini.swf" width="160" height="20" id="dewplayermini" name="dewplayermini">
<param name="movie" value="/flashdir/dewplayer-mini.swf" />
<param name="flashvars" value="mp3=flashdir/mp3/<?php echo "$id"; ?>.mp3" />
</object>

El dewPlayer, tambien pude reproducir listas, las carga todas desde un xml, es otra variante para analizar. Pero habría que ver bien el conjunto de tu aplicación

Espero que estos datos te orienten

Saludos

rossijona · #5 (**permalink**) 14/12/2010, 14:23

Bueno, antes que nada discúlpame por ser tan espeso.

Me parece que algo no me esta quedando claro, lo estoy intentando probar con un enlace a este mp3 (http://cgroup.freeiz.com/mp3/tan_enamorados.mp3) también e creado el div con ID “divreproductor” inserte el reproductor que indicaste con el código y no me esta funcionando.

Si no fuese mucha molestia podrías pasarme el código de todo el ejemplo?

Creando un simple enlace a la url de la canción que te pase, y con el resto de los pasos que me distes.

Muchas gracias desde ya. Y vuelvo a pedirte disculpas.

Mi código:

Código:

<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
<style type="text/css">
<!--
#divreproductor {
	height: 50px;
	width: 300px;
	border: 2px solid #CCCCCC;
}
-->
</style>

</head>

<body>
<p>
  <!--NO TENGO IDEA DONDE COLOCAR EL OBJET. -->
<?php
 
$id = $_GET['id'];
 
?>
 
<object type="application/x-shockwave-flash" data="/flashdir/dewplayer-mini.swf" width="160" height="20" id="dewplayermini" name="dewplayermini">
<param name="movie" value="/flashdir/dewplayer-mini.swf" />
<param name="flashvars" value="mp3=flashdir/mp3/<?php echo "$id"; ?>.mp3" />
</object>
<p><a href="javascript:ajaxpage('reproductor.php?id=http://cgroup.freeiz.com/mp3/tan_enamorados.mp3', 'divreproductor')">musica</a></p>
<p>&nbsp;</p>
<div id="divreproductor"></div>
</body>
</html>

emprear · #6 (**permalink**) 14/12/2010, 15:06

Si funciona, lo acabo de probar

el codigo del php seria

Código PHP:

Ver original<?php
 
$id = $_GET['id'];
 
?>
<object type="application/x-shockwave-flash" data="dewplayer-mini.swf" width="160" height="20" id="dewplayermini" name="dewplayermini">
<param name="movie" value="dewplayer-mini.swf" />
<param name="flashvars" value="mp3=<?php echo "$id"; ?>.mp3" />
</object>

La demo y el html

http://foros.emprear.com/ajax/ajax-dynamic-content/rep/

Saludos

rossijona · #7 (**permalink**) 15/12/2010, 17:57

Ya probé el recurso mi Maestro y funciono de maravillas, realmente es lo que necesito. sos un Crack!!.

Saludos y muchas gracias!.