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

复制代码代码如下:

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

* { margin:0; padding:0; }

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

.content li.hover{ color:red; }

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

//

$(document).ready(function(){

$("#jquery_jplayer_1").jPlayer({

ready: function (event) {

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

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

}).jPlayer("play");

},

timeupdate: function(event) {

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

time = "";

}else {

time = event.jPlayer.status.currentTime;

}

},

play: function(event) {

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

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

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

}

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

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

return time;

});

}else{

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

}

},

repeat: function(event) {

if(event.jPlayer.options.loop) {

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

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

});

} else {

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

}

},

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

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

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

wmode: "window"

});

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

});

//]]>

[ar:测试用 ]

[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]