本文转载于:猿2048网站⇛HTML5学习:如何实现歌词同步播放器
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了,我们还要关注一下用户的体验度,所以,我们就写了一个HTML兼容的播放器!向下兼容IE6-9、chrome、firfox、opera等主流播放器,应该是全兼容!实现原理代码给大家奉上!
005 |
< title >歌词同步播放器-powered by widuu xiaowei</ title > |
006 |
< meta http-equiv = "Cache-Control" content = "no-cache" > |
007 |
< meta name = "viewport" content = "width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.4" > |
008 |
< meta name = "MobileOptimized" content = "240" > |
009 |
< link href = "/mp3/css/blue.css" rel = "stylesheet" type = "text/css" /> |
010 |
< script type = "text/javascript" src = "/mp3/js/jquery.js" ></ script > |
011 |
< script type = "text/javascript" src = "/mp3/js/jquery.jplayer.js" ></ script > |
012 |
< script type = "text/javascript" src = "/mp3/js/lrc.js" ></ script > |
013 |
< style type = "text/css" > |
014 |
* { margin:0; padding:0; } |
015 |
ul, ol, dl { list-style:none; } |
016 |
.content li.hover{ color:red; } |
017 |
.content{ width:402px; height:200px; background:#ccc; overflow:hidden; padding:10px;} |
021 |
$(document).ready(function(){ |
022 |
$("#jquery_jplayer_1").jPlayer({ |
023 |
ready: function (event) { |
024 |
$(this).jPlayer("setMedia", { |
025 |
mp3:"yangcong.mp3" //mp3的播放地址 |
028 |
timeupdate: function(event) { |
029 |
if(event.jPlayer.status.currentTime==0){ |
032 |
time = event.jPlayer.status.currentTime; |
036 |
play: function(event) { |
037 |
//点击开始方法调用lrc。start歌词方法 返回时间time |
039 |
if(event.jPlayer.status.currentTime==0){ |
040 |
$("#jquery_jplayer_1").jPlayer("pause",1); |
043 |
if($('#lrc_content').val()!==""){ |
044 |
$.lrc.start($('#lrc_content').val(), function() { |
048 |
$(".content").html("没有字幕"); |
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"); |
057 |
$(this).unbind(".jPlayerRepeat"); |
060 |
swfPath: "/js", //存放jplayer.swf的决定路径 |
061 |
solution:"html, flash", //支持的页面 |
062 |
supplied: "mp3", //支持的音频的格式 |
更多专业前端知识,请上
【猿2048】www.mk2048.com