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