Reproductor de audio personalizado con el plugin Audio Controls de jQuery

En este tutorial veremos como crear un reproductor de audio HTML5 personalizado mediante el plugin de jQuery Audio Controls. Con este gran plugin podrás crear reproductores de audio extremadamente rápidos para tus propios proyectos web. Actualmente funciona con el tag audio de HTML5, asi que es bastante sencillo de personalizar. Simplemente hay que dar estilo a los selectores que componen el reproductor de audio, y lucirá tal y como desees. Para esta primera versión veremos solamente los controles básicos. No os preocupéis, si veo que este artículo tiene relativo éxito, subiremos otro tutorial para mejorarlo mucho más. ¿Te gusta la idea? Pues vamos a ello...

Código HTML

Como véis, la maqueta está dividida en 7 partes bien diferenciadas.

<div class="containerPlayer">

<div id="listContainer" class="playlistContainer"></div>

<div id="playerContainer">
<ul class="controls"></ul>
<div class="audioDetails"></div>
<div class="progress"></div>
<div class="volumeControl"></div>
</div>

</div>

Playlist

Contiene las canciones que reproducirá nuestra herramienta. Destacar que deben incluirse dentro de un li utilizando el parámetro data-src.

<ul id="playListContainer">
<li data-src="songs/rolling-in-the-deep-adele.mp3">
<a href="#">Adele - Rolling In The Deep</a>
</li>
<li data-src="songs/when-i-was-your-man-bruno-mars.mp3">
<a href="#">Bruno - When I Was Your Man</a>
</li>
</ul>

Controles

Audio Controls solo utiliza los data-attributes del plugin para sus acciones. Haz clic aquí para más información.

<ul class="controls">
<li><a href="#" class="shuffle shuffleActive" data-attr="shuffled"></a></li>
<li><a href="#" class="left" data-attr="prevAudio"></a></li>
<li><a href="#" class="play" data-attr="playPauseAudio"></a></li>
<li><a href="#" class="right" data-attr="nextAudio"></a></li>
<li><a href="#" class="repeat" data-attr="repeatSong"></a></li>
</ul>

Información del audio

Información sobre la canción como el título, el tiempo transcurrido...

<div class="audioDetails">
<span class="songPlay"></span>
<span data-attr="timer" class="audioTime"></span>
</div>

Barra de progreso

La barra de progreso funciona con data_attr=”seekableTrack”

<div class="progress">
<div data-attr="seekableTrack" class="seekableTrack"></div>
<div class="updateProgress"></div>
</div>

Control del volumen

<div class="volumeControl">
<div class="volume volume1"></div>
<input class="bar" data-attr="rangeVolume" type="range" min="0" max="1" step="0.1" value="0.7" />
</div>

Javascript

En la sentencia $("#playListContainer").audioControls(function(){, playListContainer es el ID del DIV del listado de canciones.

<script src="jquery.js"></script>
<script src="jquery.audioControls.js"></script>
<script>
$(document).ready(function()
{
$("#playListContainer").audioControls(
{
autoPlay : false,
timer: 'increment',
onAudioChange : function(response){
$('.songPlay').text(response.title + ' ...'); //Song title information
},
onVolumeChange : function(vol){
var obj = $('.volume');
if(vol <= 0){
 obj.attr('class','volume mute');
 }
else if(vol <= 33)
{
 obj.attr('class','volume volume1');
 }
else if(vol > 33 && vol <= 66)
{
 obj.attr('class','volume volume2');
 }
else if(vol > 66)
{
obj.attr('class','volume volume3');
}
else
{
obj.attr('class','volume volume1');
}
}
});
});
</script>

CSS

Un poco de estilo para que se vea más elegante y chic.

#listContainer { width:310px; background-color:#fafafa; }
#listContainer ul { background-color: #fafafa; clear: both; cursor: pointer; }
#listContainer li { padding:10px; }

#playerContainer { width:310px; height:130px; background-color:#333333; }
.controls li:first{margin-right:10px}
.controls li { float:left; display:inline-block; width:50px; text-align:center; margin-top:8px;margin-left:10px }

.progress { clear:both; height:4px; background-color:#666666; width:100%; cursor:pointer; position:relative; }
.progress .updateProgress { width:0px; background-color:#00BD9B; height:100%; float:left; position:relative; }
.volumeControl { position: relative; margin: 8px auto; }
.volumeControl .updateProgress { display:inline-block; vertical-align:middle; margin-top:2px; }
input[type="range"] { -webkit-appearance: none; -moz-appearance: none; background-color: #00BD9B; height: 2px; }

Fuente: 9lessons.info

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP