Reproductor musica

jeyn · #1 (**permalink**) 19/01/2013, 05:32

Hola de nuevo.

Bueno he conseguido poner un reproductor, pero me falta que se escuchen las canciones que quiero:

Código HTML:

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
src="ruta de la cancion.mp3" // Esta seria la ruta del archivo
width="300px" 
height="300px" 
autostart="1" 
ShowStatusBar="1" 
ShowControls="1" 
DisplaySize="4">
 </embed>

En la ruta del archivo no quiero especificarla, pues deberia de ser el archivo que pincho el enlace en la pagina; No se si me explico.

En la pagina hay una lista de canciones, cada cancion tiene su enlace al archivo Mp3,quiero que al pinchar la cancion se reprodudca.

Alguien sabe como hacerlo.

Gracias.

Un saludo.

emprear · #2 (**permalink**) 19/01/2013, 06:17

Te sugiero que cambies ese sistema por audio html5, demo
http://foros.emprear.com/html5/audio...p3/audio5.html

Y si lo querés como un reprodyctor múltiple, de seguro necesitarás javascript

Saludos

jeyn · #3 (**permalink**) 19/01/2013, 06:32

ok, pero y eso como se hace?

Gracias.

Tzar · #4 (**permalink**) 20/01/2013, 20:05

El audio html5 es fácil de usar simplemente usa esto.

Código HTML:

Ver original<audio controls>
  <source src="cancion.ogg" type="audio/ogg">
  <source src="cancion.mp3" type="audio/mpeg">
Tu navegador no soporta el audio HTML5
</audio>

Puedes usar cualquiera de las dos maneras de source y puedes colocar las dos en el mismo código si te apetece. Es importante que tengas bien en cuenta el tipo de archivo.

EDIT #1 Me puse a pensar un poco y creo que lo logré! Espero que te sirva:

El index HTML sería algo así:

Código HTML:

Ver original<!DOCTIPE html>
<html lang="es">
<head>
<script language="javascript" type="text/javascript" src="funcionesReproductor.js">
</script>
</head>
<body>
   <div id="reproductorBox">
   </div>
   <select  id = "selectTrack" multiple onchange="cambiarTrack(this.options[this.selectedIndex]);">
      <option path="E:\Musica\El cuarteto de Nos\Invierno del 92 - El Cuarteto de Nos.mp3">Invierno del 92</option>
      <option path="E:\Musica\El cuarteto de Nos\El día que Artigas se emborrachó.mp3">El dia que artigas se emborachó</option>
      <option path="E:\Musica\El cuarteto de Nos\El Cuarteto De Nos - Nada Es Gratis En La Vida.mp3">Nada es gratis en la vida</option>
      <option path="E:\Musica\El cuarteto de Nos\el cuarteto de nos - miguel gritar(7).mp3">Miguel Gritar</option>
   </select>
   <script>cargarReproductor();</script>
</body>
</html>

Y ahora las funciones de java script:

funcionesReproductor.js

Código Javascript:

Ver originalfunction cambiarTrack(track) {
 
var path = track.getAttribute("path")
viejo_audio = document.getElementById("reproductor")
audio_padre = viejo_audio.parentNode
audio_padre.removeChild(viejo_audio)
nuevo_audio = document.createElement("audio")
nuevo_audio.setAttribute("id","reproductor")
nuevo_audio.setAttribute("controls", "controls")
nuevo_audio.setAttribute("autoplay", "autoplay")
source = document.createElement("source")
source.setAttribute("src", path)
source.setAttribute("type", "audio/mpeg")
source.setAttribute("id", "reproductorSource")
 
nuevo_audio.appendChild(source)
 
audio_padre.appendChild(nuevo_audio)
 
}
 
function cargarReproductor() {
var select = document.getElementById("selectTrack")
var path = select.options[0].getAttribute("path")
 
nuevo_audio = document.createElement("audio")
nuevo_audio.setAttribute("id","reproductor")
nuevo_audio.setAttribute("controls", "controls")    
 
source = document.createElement("source")
 
source.setAttribute("src", path)
source.setAttribute("type", "audio/mpeg")
source.setAttribute("id", "reproductorSource")
 
nuevo_audio.appendChild(source)
 
padre = document.getElementById("reproductorBox")
 
padre.appendChild(nuevo_audio)
 
}