Muchos de vosotros me habéis preguntado sobre cómo reproducir archivos mp3 utilizando jQuery. Es por eso por lo que publico este artículo, para que se beneficie otra gente que, al igual que los que me habéis preguntado a mi, esté buscando una solución a dicho problema. En este tutorial no hablaremos sobre cómo reproducir archivos mp3, sino que aprenderemos a reproducir audio y vídeo utilizando jQuery.
jPlayer: el plugin de jQuery para reproducir audio y vídeo
jPlayer es un plugin de jQuery totalmente gratuito y open source. Funciona con HTML5 y cuenta con compatibilidad con Flash. Es un reproductor multiplataforma que funciona en la mayoría de navegadores IE, Safari, Chrome, Firefox, navegadores de Android... Puedes reproducir archivos de audio como mp3, ogg, m4a, y archivos de vídeo como webmv, ogv.
Reproduciendo archivos mp3 utilizando jplayer circle player
Para reproducir un archivo mp3 usando jplayer circle player, sigue los pasos de más abajo.
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<!-- Jplayer files for circle player -->
<link rel="stylesheet" href="skin/circle.skin/circle.player.css">
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.transform2d.js"></script>
<script type="text/javascript" src="js/jquery.grab.js"></script>
<script type="text/javascript" src="js/mod.csstransforms.min.js"></script>
<script type="text/javascript" src="js/circle.player.js"></script>
<!-- Jplayer files -->
Una vez incluidos todos los ficheros javascript y las hojas de estilo, añadimos el contenedor con un id único que será el que reproduzca el archivo mp3.
<!-- jquery_jplayer_1 is the id here -->
<div id="jquery_jplayer_1" class="cp-jplayer"></div>
<!-- paste the lines below as it is, it will be required by the circle player -->
<div id="cp_container_1" class="cp-container">
<div class="cp-buffer-holder">
<div class="cp-buffer-1"></div>
<div class="cp-buffer-2"></div>
</div>
<div class="cp-progress-holder">
<div class="cp-progress-1"></div>
<div class="cp-progress-2"></div>
</div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li><a class="cp-play" tabindex="1">play</a></li>
<li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
</ul>
</div>
Instanciamos el objeto circle player con javascript utilizando el id que hemos usado antes. No olvides reemplazar la ruta del mp3 del ejemplo por la tuya propia.
<script type="text/javascript">
$(document).ready(function() {
var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
{
mp3: "http://yourwebsite.com/travis.mp3",
}, {
cssSelectorAncestor: "#cp_container_1",
swfPath: "js",
wmode: "window",
supplied: "mp3",
keyEnabled: true
});
});
</script>
Para reproducir archivos de audio m4a u ogg, solo cambia los parámetros de abajo.
var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
{
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
}, {
cssSelectorAncestor: "#cp_container_1",
swfPath: "js",
wmode: "window",
supplied: "m4a, oga",
keyEnabled: true
});
Reproduciendo vídeos utilizando jplayer
jPlayer reproduce vídeos en formato webmv, ogv y m4v. Si quieres reproducir ficheros como mp4 o avi, no podrás hacerlo desde este reproductor. Tendrás que convertirlo a alguna de las extensiones anteriormente dadas para lograrlo. Para reproducir vídeo utilizando jPlayer, sigue los siguientes pasos.
Añade los ficheros necesarios como jQuery, la librería jplayer y las hojas de estilo.
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<!-- Jplayer files-->
<link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<!-- Jplayer files -->
Añadimos el contenedor con un id único que será el que reproduzca el vídeo.
<!-- jp_container_1 is the id here -->
<div id="jp_container_1" class="jp-video jp-video-360p">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class="jp-details">
<ul>
<li><span class="jp-title"></span></li>
</ul>
</div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
Al final asignamos el id del conteneder al javascript del reproductor de vídeo.
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Big Buck Bunny",
m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
});
},
swfPath: "js",
supplied: "webmv, ogv, m4v",
size: {
width: "640px",
height: "360px",
cssClass: "jp-video-360p"
},
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});
});
</script>
Fuente: thesoftwareguy.in