Estou montando uma player list, hoje o play em sí já funciona mais ainda não do jeito que gostaria.
Precisava que na Lista de Musica ao clicar pare a musica e ao clicar de novo a musica volte a tocar.
Está parte funciona porem eu preciso da um duplo clique para que a musica pause, alguém sabe como posso fazer para que apenas um clique inicie e um clique pare?
Outra duvida e como eu posso fazer para quando eu voltar a musica anterior ou a proxima continue da onde parou e não volte ao 0.
Segue código;
<div id="audio-player">
<div class="cor-fundo">
<div class="container">
<!-- Topo Player -->
<div class="row">
<!-- informação da midia -->
<div class="col-lg-12 text-center">
<h1>
Titulo Player
</h1>
<div id="audio-info">
<span class="titulo">
</span>
</div>
</div>
</div>
<!-- end informação da midia -->
<div class="row">
<div class="col-lg-12">
<div id="tracker">
<div id="range">
<!--<div id="barradeprogresso">
<span id="progresso" class="pro"></span>
<span id="handle"></span>
</div>-->
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
tempo rs
</div>
</div>
<div class="clearfix">
</div>
<div class="row controleBotoes">
<div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
<button id="prev">
</button>
</div>
<div class="col-xs-4 col-sm-8 col-md-8 col-lg-8">
<button id="play">
</button>
<button id="pause">
</button>
</div>
<div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
<button id="next">
</button>
</div>
</div>
</div>
</div>
</div>
<div class="container lista">
<div class="row botoes-menu">
<div class="col-xs-9 col-sm-11 col-md-11 col-lg-11">
<ul id="playlist">
<li song="music01.mp3" titulo="teste 01">
<div class="linha-player">
<div class="botoes-lista">
<div class="botoes-li" id="botoes-li">
</div>
<div class="botoes-Pa" id="botoes-Pa">
</div>
</div>
<div class="bloco-direito">
<div class="linha-descricao linha-informacao">
<h3 class="descricao-titulo">
Introdução
</h3>
</div>
<div class="linha-descricao">
<p class="texto_unidade">
Informações Editorais
</p>
</div>
</div>
</div>
</li>
<li song="music02.mp3" titulo="teste 02">
<div class="linha-player">
<div class="botoes-lista">
<div class="botoes-li" id="botoes-li">
</div>
<div class="botoes-Pa" id="botoes-Pa">
</div>
</div>
<div class="bloco-direito">
<div class="linha-descricao linha-informacao">
<h3 class="descricao-titulo">
Introdução
</h3>
</div>
<div class="linha-descricao">
<p class="texto_unidade">
Informações Editorais
</p>
</div>
</div>
</div>
</li>
<li song="music03.mp3" titulo="teste 02">
<div class="linha-player">
<div class="botoes-lista">
<div class="botoes-li" id="botoes-li">
</div>
<div class="botoes-Pa" id="botoes-Pa">
</div>
</div>
<div class="bloco-direito">
<div class="linha-descricao linha-informacao">
<h3 class="descricao-titulo">
Introdução
</h3>
</div>
<div class="linha-descricao">
<p class="texto_unidade">
Informações Editorais
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Main.js
var audio;
$('#pause').hide();
$('#botoes-Pa').hide();
initAudio($('#playlist li:first-child'));
function initAudio(element) {
var song = element.attr('song');
var titulo = element.text();
var descricao = element.attr('descricao');
audio = new Audio('media/' + song);
if (!audio.currentTime) {
$('#duration').html('0.00');
}
$('#audio-player .titulo').text(titulo);
$('#audio-player .descricao').text(descricao);
$('#playlist li').removeClass('active');
element.addClass('active');
}
$('#play').click(function () {
audio.play();
$('#play').hide();
$('#pause').show();
$('#botoes-li').hide();
$('#botoes-Pa').show();
$('#duration').fadeIn(400);
showDuration();
});
$('#pause').click(function () {
audio.pause();
$('#pause').hide();
$('#play').show();
$('#botoes-li').hide();
$('#botoes-Pa').show();
});
$('#next').click(function () {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
next = $('#playlist li:first-child');
}
if ($('#play').is(':visible')) {
$('#play').hide();
$('#pause').show();
$('#botoes-li').hide();
$('#botoes-Pa').show();
}
initAudio(next);
audio.play();
showDuration();
});
$('#prev').click(function () {
audio.pause();
var prev = $('#playlist li.active').prev();
if (prev.length == 0) {
prev = $('#playlist li:last-child');
}
if ($('#play').is(':visible')) {
$('#play').hide();
$('#pause').show();
$('#botoes-li').hide();
$('#botoes-Pa').show();
}
initAudio(prev);
audio.play();
showDuration();
});
/*$('#playlist li').click(function () {
audio.pause();
initAudio($(this));
$('#play').hide();
$('#pause').show();
$('#botoes-li').hide();
$('#botoes-Pa').show();
$('#duration').fadeIn(400);
//audio.play();
showDuration();
});*/
$('#playlist li').dblclick(function () {
audio.pause();
initAudio($(this));
$('#play').hide();
$('#pause').show();
$('#botoes-li').hide();
$('#botoes-Pa').show();
$('#duration').fadeIn(400);
audio.play();
showDuration();
});
//Playlist song click
$('#playlist li').click(function () {
audio.pause();
$('#pause').hide();
$('#play').show();
$('#botoes-li').show();
$('#botoes-Pa').hide();
});
/*initAudio($('.playlist li:first-child'));*/
function showDuration() {
$(audio).bind('timeupdate', function () {
var s = parseInt(audio.currentTime % 60);
var m = parseInt((audio.currentTime / 60) % 60);
if (s < 10) {
s = '0' + s;
}
$('#duration').html(m + '.' + s);
var value = 0;
if (audio.currentTime > 0) {
value = ((100 / audio.duration) * audio.currentTime);
}
$('#rangeinner').css('width', value + '%');
rangeselector.style.marginLeft = value + "%";
if (audio.currentTime >= audio.duration) $('#next').trigger('click');
});
}
$("#range").mouseup(function (e) {
var leftOffset = e.pageX - $(this).offset().left;
var songPercents = leftOffset / $('#range').width();
audio.currentTime = songPercents * audio.duration;
});