小程序（之音乐播放器源码实现）

一主体代码

<div class="audio-main w3ls">
    <div class="audio-record-list">
        <div class="profile">
            <div class="profile-top wthree">
                <div class="pic-sec">
                    <div class="pic">
                        <img src="${music.picUrl}" alt=""/>
                    </div>
                    <div class="pic_info">
                        <h2>${music.title}</h2>
                        <h3><a href="#">歌手:${music.artistName}</a></h3>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="media">
                    <div class="content" style="overflow:scroll;width:100%;height:100px;">
                        <ul id="lrc_list">
                            加载歌词……
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
        <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
            <div class="jp-type-playlist">
                <div class="jp-gui jp-interface">
                    <div class="jp-controls">
                        <button class="jp-play" role="button" tabindex="0">play</button>
                    </div>
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-volume-controls">
                        <button class="jp-mute" role="button" tabindex="0">mute</button>
                        <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                    </div>
                    <div class="jp-time-holder">
                        <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                        <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                    </div>
                </div>
                <div class="jp-playlist">
                    <ul>
                        <li>&nbsp;</li>
                    </ul>
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>
        <!--歌词部分-->
        <textarea id="lrc_content" style="width:90%;height:100px;display:none;"></textarea>
    </div>
</div>

二、静态资源引入

<script type="text/javascript" src="<%=basePath%>resource/music/js/jquery.jplayer.js"></script>
<script type="text/javascript" src="<%=basePath%>resource/music/js/lrc.js"></script>

三、自定义js

 $("#jquery_jplayer_1").jPlayer({
            ready: function () {
                ----------------------------------  >这里自己实现加载歌词放入id=lrc_content中
                $(this).jPlayer("setMedia", {
                    mp3: url
                }).jPlayer("play").jPlayer("repeat")
            },
            timeupdate: function(event) {
                if(event.jPlayer.status.currentTime==0){
                    time = "";
                }else {
                    time = event.jPlayer.status.currentTime;
                }
            },
            play: function(event) {
                //点击开始方法调用lrc.start歌词方法 返回时间time
                if($('#lrc_content').val()!==""){
                    $.lrc.start($('#lrc_content').val(),function(){
                        return time;
                    });
                }else{
                    $(".content").html("没有字幕");
                }
            },
            ended: function(event) {
                $("#lrc_list").removeAttr("style").html("<li>歌曲播放完毕！</li>");
            },
            swfPath: "/resource/music/js/jquery.jplayer.swf",   //播放用flash所在的相对路径
            supplied: "mp3",
            solution: "html, flash", //支持的页面
            wmode: "window",
            remainingDuration: true,
            toggleDuration: true,
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true

总体来说实现和别人说的方式答题一致，但是尤其得注意兼容问题。