jquery+jplayer实现歌词同步的mp3音乐播放器效果

实例预览

下载地址

实例代码

<div >      <div >        <textarea id="lrc_content" name="textfield" cols="70" rows="10" > [00:03.00]洋葱[00:06.00]演唱：平安[00:09.00][00:11.38]如果你眼神能够为我片刻的降临[00:21.23]如果你能听到心碎的声音[00:28.88]盘底的洋葱像我永远是配角戏[00:35.74]偷偷的看着你偷偷的隐藏着自己[00:43.48][00:44.90]如果你愿意一层一层[00:48.46]一层的剥开我的心[00:52.66]你会发现你会讶异[00:56.40]你是我最压抑最深处的秘密[01:00.26]如果你愿意一层一层[01:03.69]一层的剥开我的心[01:07.76]你会鼻酸你会流泪[01:11.60]只要你能听到我看到我的全心全意[01:18.30][01:19.11]如果你愿意一层一层[01:22.57]一层的剥开我的心[01:26.66]你会发现你会讶异[01:30.41]你是我最压抑最深处的秘密[01:34.48]如果你愿意一层一层[01:37.58]一层的剥开我的心[01:41.51]你会鼻酸你会流泪[01:45.15]只要你能听到我看到我的全心全意[01:53.55][01:55.65]你会鼻酸你会流泪[01:59.84]只要你能听到我看到我的全心全意[02:12.57]         </textarea>        <div >          <div id="jquery_jplayer_1" >          </div>          <div id="jp_container_1" >            <div >              <div >                <ul >                  <li><a href="javascript:;" tabindex="1">play</a></li>                  <li><a href="javascript:;" tabindex="1">pause</a></li>                  <li><a href="javascript:;" tabindex="1">stop</a></li>                  <li><a href="javascript:;" tabindex="1" title="mute">mute</a></li>                  <li><a href="javascript:;" tabindex="1" title="unmute">unmute</a></li>                  <li><a href="javascript:;" tabindex="1" title="max volume">max volume</a></li>                </ul>                <div >                  <div >                    <div >                    </div>                  </div>                </div>                <div >                  <div >                  </div>                </div>                <div >                  <div >                  </div>                  <div >                  </div>                  <ul >                    <li><a href="javascript:;" tabindex="1" title="repeat">repeat</a></li>                    <li><a href="javascript:;" tabindex="1" title="repeat off">repeat off</a></li>                  </ul>                </div>              </div>              <div >                <ul>                  <li>手册网</li>                </ul>              </div>              <div >                <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>          <div >            <ul id="lrc_list">              <li>点击上方播放按钮……</li>            </ul>          </div>        </div>      </div>    </div>    <script type="text/javascript" src='/images/loading.gif' data-original="http://www.cnblogs.com///apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>     <script type="text/javascript" src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/5733e33322180/js/jquery.jplayer.js"></script>    <script type="text/javascript" src='/images/loading.gif' data-original="http://www.cnblogs.com//api/jq/5733e33322180/js/lrc.js"></script>    <script type="text/javascript">      $(function() {        $("#jquery_jplayer_1").jPlayer({          ready: function(event) {            $(this).jPlayer("setMedia", {              mp3: "yangcong.mp3" //mp3的播放地址            });          },          timeupdate: function(event) {            if (event.jPlayer.status.currentTime == 0) {              time = "";            } else {              time = event.jPlayer.status.currentTime;            }          },          play: function(event) {            //点击开始方法调用lrc。start歌词方法 返回时间time            $.lrc.start($('#lrc_content').val(), function() {              return time;            });          },          ended: function(event) {            $("#lrc_list").removeAttr("style").html("<li>歌曲播放完毕！</li>");          },          swfPath: "js", //存放jplayer.swf的决定路径          solution: "html, flash", //支持的页面          supplied: "mp3", //支持的音频的格式          wmode: "window"        });      });    </script>

原标题：jquery+jplayer实现歌词同步的mp3音乐播放器效果

关键词：jquery