HTML 5 JS音频播放器，单击列表项时播放

Question

我正在攻击我发现的一个html 5音频播放器，如果你愿意，我只是添加一些豪华功能 - 试图同时学习。

我有一个工作正常的播放器，当您将鼠标悬停在播放列表中的列表项上时，光标会变为指针，但是当您点击时没有任何反应。

这是我试图实现的代码，它可以播放音频但是当前所选项目是什么。我不知道如何让音频api选择我点击的列表项，将活动类更改为该项，然后播放该列表项中的音频。

播放器HTML：

<div id="container">
            <div id="audio-img">
                <img class="cover">
            </div>
            <div id="audio-player">
                <div id="audio-info">
                    <span class="artist"></span> - <span class="title"></span>
                </div>
                <input id="volume" type="range" min="0" max="10" value="5">
                <br>
                <div id="audio-controls">
                    <button id="prev"></button>
                    <button id="play"></button>
                    <button id="pause"></button>
                    <button id="stop"></button>
                    <button id="next"></button>
                </div>
                <div class="clearfix"></div>
                <div id="tracker">
                    <div id="progressbar">
                        <span id="progress"></span>
                    </div>
                    <span id="duration"></span>
                </div>
                <div class="clearfix"></div>
                <ul id="playlist">
                    <li song="Maryland.mp3" cover="bvh.jpg" artist="Alex Gray">'Maryland' <span class="floatright"><button class="download" >Download</button></span></li>
                    <li song="Hit-Time.wav" cover="bvh.jpg" artist="Alex Gray">'Hit Time' <span class="floatright"><button class="download" >Download</button></span></li>
                </ul>
            </div>
        </div>

//单击歌曲标题 Javascript我试图添加以使其在点击列表项目时播放。它播放，播放按钮隐藏暂停按钮显示和持续时间进来，但仅适用于当前选定的列表项，而不是您单击的列表项。试图在点击某个列表项时找出如何调用该歌曲。完整的JS下面。也使用jquery。

var audio;

//hide pause button

$('#pause').hide();
$('#duration').hide();

//Initialize
initAudio($('#playlist li:first-child'));

//Initializer Function
function initAudio(element){
    var song=element.attr('song')
    var title=element.text();
    var cover=element.attr('cover');
    var artist=element.attr('artist');


    //Create AUDIO OBJECT
    audio = new Audio('http://localhost/beats/wp-content/themes/AG_1/html_5_audio_player/media/' + song);

    if(!audio.currentTime) {
        $('#duration').html('0.00');
    }

    $('#audio-player .title').text(title);

    $('#audio-player .artist').text(artist);

    //Insert Cover

    $('img.cover').attr('src', 'http://localhost/beats/wp-content/themes/AG_1/html_5_audio_player/img/covers/'+ cover);

    $('#playlist li').removeClass('active');
    element.addClass('active');

    $(document).ready(function(){
    $("#noThanks").click(function(){
        $("#contactdiv").hide();
    });
    $(".download").click(function(){
        $("#contactdiv").show();
    });
    $("#sendMail").click(function(){
        window.location.href = "mailto:alexgray410@gmail.com?subject=Contact%20A1%20Alex%20About%20-%20" + title;
        $("#contactdiv").hide();
    })
});
}
//Click Song Title

$('#playlist li').click(function(){
    audio.play();

    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(400);
    showDuration();
});


//Play button

$('#play').click(function(){
    audio.play();

    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(400);
    showDuration();
});

//Pause button

$('#pause').click(function(){
    audio.pause();

    $('#pause').hide();
    $('#play').show();
});

//Audio Stop Function

$('#stop').click(function(){
    audio.pause();
    audio.currentTime = 0;
    $('#pause').hide();
    $('#play').show();
    $('#duration').fadeOut(400);
});

//NEXT Buttomn 

$('#next').click(function(){
    audio.pause();
    var next = $('#playlist li.active').next();
    if(next.length == 0){
        next = $('#playlist li:first-child');
    }
    initAudio(next);
    audio.play();
    showDuration();
    $('#duration').fadeIn(400);
    if ($('#play').show = true){
        $('#play').hide();
        $('#pause').show();
    }
});

//PREV Buttomn 

$('#prev').click(function(){
    audio.pause();
    var prev = $('#playlist li.active').prev();
    if(prev.length == 0){
        prev = $('#playlist li:last-child');
    }
    initAudio(prev);
    audio.play();
    showDuration();
    $('#duration').fadeIn(400);
    if ($('#play').show = true){
        $('#play').hide();
        $('#pause').show();
    }
});

//Volume Control
$('#volume').change(function(){
    audio.volume = parseFloat(this.value / 10);
});



//Time duration

function showDuration(){
    $(audio).bind('timeupdate', function(){
        //Get Hours & Minutes
        var s = parseInt(audio.currentTime % 60);
        var m = parseInt((audio.currentTime)/ 60) % 60;
        //Add 0 if less than 10
        if(s < 10){
            s = '0'+ s;
        }
        $('#duration').html(m + '.' + s);
        var value = 0;
        if(audio.currentTime > 0){
            value = Math.floor((100 / audio.duration)* audio.currentTime);
        }
        $('#progress').css('width', value+'%')
    });
}

// DOWNLOAD POP UP SCRIPT