jPlayer es un plugin para jQuery que permite reproducir archivos MP3 dentro de una página Web. El reproductor utiliza un archivo swf para reproducir los archivos, pero este no es mostrado en la página por lo que el reproductor puede ser totalmente personalizado con XHTML y CSS.

El reproductor ofrece funciones que permiten reproducir un archivo MP3, pausar, detener y ver el progreso de la pista en una barra, así como controlar el volumen.

Ver demos después del salto.

En el sitio del creador existe una variedad de demos como:

Reproductor con estilo basado en XHTML y CSS

Reproductor con lista de reproducción

Múltiples instancias del reproductor

Entre otros que puedes ver desde aquí

Código para aplicar el estilo al reproductor

1. $(document).ready(function(){
2. $(“#jquery_jplayer”).jPlayer({ // Instantiate the plugin
3. ready: function () { // Executed when the plugin is ready
4. $(“#jquery_jplayer”).changeAndPlay(‘elvis.mp3′); // Auto-play the mp3
5. }
6. });
8. $(“#jquery_jplayer”).jPlayerId(“play”, “play_button”); // Associates play
9. $(“#jquery_jplayer”).jPlayerId(“pause”, “pause_button”); // Associates pause
10. $(“#jquery_jplayer”).jPlayerId(“stop”, “stop_button”); // Associates stop
12. $(“#jquery_jplayer”).onSoundComplete( function() { // Executed when the mp3 ends
13. $(“#jquery_jplayer”).play(); // Auto-repeat
14. });
15. });
18. <div id=“jquery_jplayer”></div>
19. <ul>
20. <li id=“play_button”>play</li>
21. <li id=“pause_button”>pause</li>
22. <li id=“stop_button”>stop</li>
23. </ul>

Enlace: Descarga jPlayer (Reproductor MP3 con jQuery)

Blog: jPlayer

10 Respuestas para “Crea tu propio reproductor MP3 con la ayuda de jQuery”