2012-02-15 19 views
7

¿Cuál es la mejor y más cruzada forma de reproducir un archivo mp3 (muy corto) a través de javascript? He intentado diferentes maneras, pero siempre hay un problema ...Reproduzca el archivo mp3 usando javascript

EDIT 1:

No necesito un jugador "completo", que sólo tiene una función de lo que puedo llamar cada vez que pasa algo

EDIT 2:

Ok, he de explicar mejor mi problema. El servidor es un teléfono inteligente conectado en una LAN, pero no siempre a internet. Quiero usar mp3 porque el archivo pesa solo 3kb (en lugar de 60kb de wav), pero si el mecanismo para reproducir este archivo es demasiado "pesado" (un reproductor o jquery.js), creo que es mejor usar el archivo wav. ¿Otras sugerencias?

+0

etiqueta de audio html5 – Johan

+1

http://jplayer.org –

+0

@Johan Probé la etiqueta de audio html5 con [this] (http://msdn.microsoft.com/en-us/library/gg589489 (v = vs.85)) .aspx) código, pero no funciona en Chrome – supergiox

Respuesta

0

Recomendaría usar Flowplayer. Está escrito en Flash y JavaScript y tiene un respaldo de HTML5.

Nota: en todos los dispositivos iOS (iPads, etc.), no hay reproducción automática.

5

Cargue la página con una descarga directa al archivo de audio. Detecta si el navegador admite MP3. Si lo hace, mejore progresivamente la descarga directa en una etiqueta AUDIO. He aquí una muestra:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Audio demo</title> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script> 
</head> 
<body> 
    <p id="audio"> 
     <a href="BadAppleEnglish.mp3">Listen &raquo;</a>   
    </p> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
    <script src="audio.js"></script> 
</body> 
</html> 

Y el Javascript:

$(function() { 
var audioElement = $('#audio'), 
    href = audioElement.children('a').attr('href'); 
$.template('audioTemplate', '<audio src="${src}" controls>'); 
if (Modernizr.audio.mp3) { 
    audioElement.empty(); 
    $.tmpl('audioTemplate', {src: href}).appendTo(audioElement); 
} 
}); 

Me imagino que la mayoría de los millones y millones de plugins que juegan prebuilt MP3 trabajar así.

ACTUALIZACIÓN:

Puesto que haya editado la pregunta para especificar que prefiere una solución que no utiliza jQuery, voy a señalar que volver a escribir esto no utiliza jQuery es trivial. Es más largo y menos elegante. Tenga en cuenta que las bibliotecas de Javascript cargadas desde CDN generalmente son almacenadas en caché por el navegador.

+0

Edité la pregunta – supergiox

14

Utilice esta:

new Audio('your/url/here').play() 

La documentación para el presente (HTMLAudioElement) se puede encontrar en MDN, tenga en cuenta que la mayoría de los controles son heredados por HTMLMediaElement.

Cuestiones relacionadas