歌曲播放我们会发现他的兼容性不是很好，譬如IE上能播放的flash播放器，再firfox或者chrome上就不是很好的应用了，因为有插件的阻碍!HTML5的出现让这一切成为了可能，但是播放器虽然播放了，我们还要关注一下用户的体验度，所以，我们就写了一个HTML兼容的播放器！向下兼容IE6-9、chrome、firfox、opera等主流播放器，应该是全兼容！实现原理代码给大家奉上！001

002

003

004

005

歌词同步播放器-powered by widuu xiaowei

006

007

008

009

010

011

012

013

014* { margin:0; padding:0; }

015ul, ol, dl { list-style:none; }

016.content li.hover{ color:red; }

017.content{ width:402px; height:200px; background:#ccc; overflow:hidden; padding:10px;}

018

019

020//

021$(document).ready(function(){

022 $("#jquery_jplayer_1").jPlayer({

023 ready: function (event) {

024 $(this).jPlayer("setMedia", {

025 mp3:"yangcong.mp3" //mp3的播放地址

026 }).jPlayer("play");

027 },

028 timeupdate: function(event) {

029 if(event.jPlayer.status.currentTime==0){

030 time = "";

031 }else {

032 time = event.jPlayer.status.currentTime;

033 }

034

035 },

036 play: function(event) {

037 //点击开始方法调用lrc。start歌词方法 返回时间time

038

039 if(event.jPlayer.status.currentTime==0){

040 $("#jquery_jplayer_1").jPlayer("pause",1);

041 }

042

043 if($('#lrc_content').val()!==""){

044 $.lrc.start($('#lrc_content').val(), function() {

045 return time;

046 });

047 }else{

048 $(".content").html("没有字幕");

049 }

050 },

051 repeat: function(event) {

052 if(event.jPlayer.options.loop) {

053 $(this).unbind(".jPlayerRepeat").bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {

054 $(this).jPlayer("play");

055 });

056 } else {

057 $(this).unbind(".jPlayerRepeat");

058 }

059 },

060 swfPath: "/js", //存放jplayer.swf的决定路径

061 solution:"html, flash", //支持的页面

062 supplied: "mp3", //支持的音频的格式

063 wmode: "window"

064

065 });

066 $("#lrc_content").hide();

067});

068//]]>

069

070

071

072

073[ar:测试用 ]

074[00:03.00]洋葱

075[00:06.00]演唱：平安

076[00:09.00]

077[00:11.38]如果你眼神能够为我片刻的降临

078[00:21.23]如果你能听到心碎的声音

079[00:28.88]盘底的洋葱像我永远是配角戏

080[00:35.74]偷偷的看着你偷偷的隐藏着自己

081[00:43.48]

082[00:44.90]如果你愿意一层一层

083[00:48.46]一层的剥开我的心

084[00:52.66]你会发现你会讶异

085[00:56.40]你是我最压抑最深处的秘密

086[01:00.26]如果你愿意一层一层

087[01:03.69]一层的剥开我的心

088[01:07.76]你会鼻酸你会流泪

089[01:11.60]只要你能听到我看到我的全心全意

090[01:18.30]

091[01:19.11]如果你愿意一层一层

092[01:22.57]一层的剥开我的心

093[01:26.66]你会发现你会讶异

094[01:30.41]你是我最压抑最深处的秘密

095[01:34.48]如果你愿意一层一层

096[01:37.58]一层的剥开我的心

097[01:41.51]你会鼻酸你会流泪

098[01:45.15]只要你能听到我看到我的全心全意

099[01:53.55]

100[01:55.65]你会鼻酸你会流泪

101[01:59.84]只要你能听到我看到我的全心全意

102[02:12.57]

103

104

105

106

107

108

109

110

150

153

154

155