¿Cómo reproducir un mp3 usando Javascript?

Tengo un directorio en mi sitio web con varios mp3. Creo dinámicamente una lista de ellos en el sitio web usando php.¿Cómo reproducir un mp3 usando Javascript?

También tengo una función de arrastrar y soltar asociada a ellos y puedo seleccionar una lista de los mp3 para jugar.

Ahora, dando esa lista, ¿cómo puedo hacer clic en un botón (Reproducir) y hacer que el sitio web reproduzca el primer mp3 de la lista? (También sé dónde está la música en el sitio web)

Fuente

2012-07-04 aF.

En los navegadores modernos, se puede usar [de HTML5 '

Si desea una versión que funciona para navegador de edad, he hecho esta biblioteca:

function Sound(source,volume,loop) 
{ 
    this.source=source; 
    this.volume=volume; 
    this.loop=loop; 
    var son; 
    this.son=son; 
    this.finish=false; 
    this.stop=function() 
    { 
     document.body.removeChild(this.son); 
    } 
    this.start=function() 
    { 
     if(this.finish)return false; 
     this.son=document.createElement("embed"); 
     this.son.setAttribute("src",this.source); 
     this.son.setAttribute("hidden","true"); 
     this.son.setAttribute("volume",this.volume); 
     this.son.setAttribute("autostart","true"); 
     this.son.setAttribute("loop",this.loop); 
     document.body.appendChild(this.son); 
    } 
    this.remove=function() 
    { 
     document.body.removeChild(this.son); 
     this.finish=true; 
    } 
    this.init=function(volume,loop) 
    { 
     this.finish=false; 
     this.volume=volume; 
     this.loop=loop; 
    } 
}

Documentación:

Sound tiene tres argumentos. La url del sonido, el volumen (de 0 a 100) y el bucle (verdadero en bucle, falso en no bucle).
stop permiten a start después (contrario a remove).
init restablecer el volumen del argumento y el ciclo.

Ejemplo:

var foo=new Sound("url",100,true); 
foo.start(); 
foo.stop(); 
foo.start(); 
foo.init(100,false); 
foo.remove(); 
//Here you you cannot start foo any more

Fuente

2012-07-04 14:39:28 Mageek

¿es posible saber cuándo termina una música? –

¿Tienes la duración de la música? – Mageek

navegadores compatibles con audio simple: http://caniuse.com/#search=audio –

Puede usar la etiqueta <audio> HTML5 para reproducir audio usando JavaScript.

Pero esto no es una solución de navegador múltiple. Solo es compatible con navegadores modernos. Para la compatibilidad entre navegadores, probablemente necesite usar Flash para eso (por ejemplo, jPlayer).

La tabla de compatibilidad de navegadores se proporciona en el enlace que he mencionado anteriormente.

Fuente

2012-07-04 14:23:08 antyrat

¿Puedes proporcionar un ejemplo de flash? –

@aF. Puedes ver muchas demos aquí: http://jplayer.org/latest/demos/. jPlayer es de código abierto y publicado bajo licencia GPL y MIT. – antyrat

probar este generador de scripts reproductor de audio:

http://www.scriptgenerator.net/44/Audio-player-script-generator/

Fuente

2012-07-04 14:27:23

es probable que desee utilizar el nuevo elemento HTML5 audio para crear un objeto Audio, cargar el mp3, y juega con él.

Debido a las inconsistencias del navegador, este código de muestra es un poco largo, pero debe ajustarse a sus necesidades con un poco de ajuste.

//Create the audio tag 
var soundFile = document.createElement("audio"); 
soundFile.preload = "auto"; 

//Load the sound file (using a source element for expandability) 
var src = document.createElement("source"); 
src.src = fileName + ".mp3"; 
soundFile.appendChild(src); 

//Load the audio tag 
//It auto plays as a fallback 
soundFile.load(); 
soundFile.volume = 0.000000; 
soundFile.play(); 

//Plays the sound 
function play() { 
    //Set the current time for the audio file to the beginning 
    soundFile.currentTime = 0.01; 
    soundFile.volume = volume; 

    //Due to a bug in Firefox, the audio needs to be played after a delay 
    setTimeout(function(){soundFile.play();},1); 
}

Editar:

Para añadir soporte para Flash, se agregaría un elemento object dentro de la etiqueta audio.

Fuente

2012-07-04 14:28:12

Sé que esta respuesta tiene 4 años. Pero de la lista de ellos aquí, este es el mejor. Lo puse un poco para servir a mis propósitos. Pero funciona en todo. Incluso IE. Y eso realmente está diciendo algo. – durbnpoisn

Puede probar SoundManager 2: manejará de forma transparente la etiqueta <audio> donde sea que sea compatible, y usará Flash donde no lo esté.

Fuente

2012-07-04 14:28:13

Suponiendo que el navegador admita la reproducción de MP3 y es bastante nuevo para admitir funciones de JavaScript más recientes, le sugiero que consulte jPlayer. Puede ver una demostración corta tutorial sobre cómo implementarla.

Fuente

2012-07-04 14:28:28

new Audio('<url>').play()

Fuente

2012-07-04 14:37:06 Ties

Documentación completa: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement – aymericbeaumet

Disfrútalo;)

<html> 
<head> 
    <title>Play my music....</title> 
</head> 
<body> 
    <ul> 
     <li> 
     <a id="PlayLink" href="http://www.moderntalking.ru/real/music/Modern_Talking-You_Can_Win(DEMO).mp3" onclick="pplayMusic(this, 'music_select');">U Can Win</a> 
     </li> 
     <li> 
     <a id="A1" href="http://www.moderntalking.ru/real/music/Modern_Talking-Brother_Louie(DEMO).mp3" onclick="pplayMusic(this, 'music_select');">Brother Louie</a> 
     </li> 
    </ul> 
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 
</body> 
</html>

Fuente

2012-07-04 15:50:52 RAM

Jquery agregado para el reproductor de audio mp3 http://www.jplayer.org/0.2.1/demos/

Fuente

2012-07-05 10:59:11 Parag

¿Cómo reproducir un mp3 usando Javascript?

Respuesta

Cuestiones relacionadas