PlayerList - Controle pela Lista

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;
});

Teoricamente, seria apenas mudar esta função:

$('#playlist li').dblclick(function () {
    audio.pause();
    initAudio($(this));
    $('#play').hide();
    $('#pause').show();
    $('#botoes-li').hide();
    $('#botoes-Pa').show();
    $('#duration').fadeIn(400);
    audio.play();
    showDuration();
});

para

$('#playlist li').click(function () {
    audio.pause();
    initAudio($(this));
    $('#play').hide();
    $('#pause').show();
    $('#botoes-li').hide();
    $('#botoes-Pa').show();
    $('#duration').fadeIn(400);
    audio.play();
    showDuration();
});

Mas não testei…

eu tentei fazer isto, mais ele para de funcionar.

Bom, o que acontece é que você acaba sobrescrevendo a função click daquele elemento.

Uma possível solução seria isso:

var playing = false;
//Playlist song click
$('#playlist li').click(function () {
    if(playing) {
        audio.pause();
        initAudio($(this));
        $('#play').hide();
        $('#pause').show();
        $('#botoes-li').hide();
        $('#botoes-Pa').show();
        $('#duration').fadeIn(400);
        audio.play();
        showDuration();
        playing = false;
    } else {
        audio.pause();
        $('#pause').hide();
        $('#play').show();
        $('#botoes-li').show();
        $('#botoes-Pa').hide();
        playing = true;
    }
});

Note que criamos uma variável (playing) que, inicia-se como false e, quando clicamos pela primeira vez, para executar, ela passa a true. Se clicarmos novamente, ela estará como true e o trecho para pausar a execução é invocado, tornando o playing false.
Talvez funcione. Talvez precise adaptar.

1 curtida

Muito obrigada deu certinho, tive apenas que adaptar no próximo e no anterior para que funciona-se também quando eu pula-se a musica no controle.