共享博客HTML5实践之歌词同步播放器的示例代码分享
歌曲播放我们会发现他的兼容性不是很好，譬如ie上能播放的flash播放器，再firfox或者chrome上就不是很好的应用了，因为有插件的阻碍!html5的出现让这一切成为了可能，但是播放器虽然播放了，我们还要关注一下用户的体验度，所以，我们就写了一个html兼容的播放器！向下兼容ie6-9、chrome、firfox、opera等主流播放器，应该是全兼容！实现原理代码给大家奉上！
001 <!doctype html>002 <html>003 <head>004 <meta charset=utf-8>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;}018 </style>019 <script>020 //<![CDATA[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歌词方法 返回时间time038 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 </script>070 </head>071 <body>072 <textarea id="lrc_content" name="textfield" cols="70" rows="10">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 </textarea>104 105 106 <p>107 108 <div id="jquery_jplayer_1" class="jp-jplayer"></div>109 110 <div id="jp_container_1" class="jp-audio">111 <div class="jp-type-single">112 <div class="jp-gui jp-interface">113 <ul class="jp-controls">114 <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>115 <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>116 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>117 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>118 <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>119 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>120 </ul>121 <div class="jp-progress">122 <div class="jp-seek-bar">123 <div class="jp-play-bar"></div>124 </div>125 </div>126 <div class="jp-volume-bar">127 <div class="jp-volume-bar-value"></div>128 </div>129 <div class="jp-time-holder">130 <div class="jp-current-time"></div>131 <div class="jp-duration"></div>132 133 <ul class="jp-toggles">134 <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>135 <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>136 </ul>137 </div>138 </div>139 <div class="jp-title">140 <ul>141 <li>mp3player powered by xiaowei</li>142 </ul>143 </div>144 <div class="jp-no-solution">145 <span>Update Required</span>146 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>.147 </div>148 </div>149 </div>150 <div class="content"><ul id="lrc_list">151 点击开始播放……152 </ul></div><br />153 </body>154 155 </html>文章推荐
-
HTML在线编辑器的调用方法和使用方法
html在线编辑器不需要懂得使用dreamweaver，会用word就会使用此编辑器，在文章系统或者是新闻系统需要文字编...
H5教程
3个月前 (10-19) 124 -
AlloyTouch全屏滚动插件 30秒搞定顺滑H5页
使用姿势在设计全屏滚动插件的时候，希望开发者几乎：不用写任何脚本快速生成精致H5支持PC滚轮和移动触摸酷炫的转场动效灵活...
H5教程
3个月前 (10-19) 125 -
HTML5 js实现拖拉上传文件功能
在html5的pc上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能 在拖动目标上触发事件 (源元素): ...
H5教程
3个月前 (10-19) 122 -
Canvas and Drawables 翻译第一集
android官方原文地址：http://developer.android.com/guide/topics/grap...
H5教程
3个月前 (10-19) 129 -
Canvas and Drawables 翻译第三集
Android官方原文地址：http://developer.android.com/guide/topics/grap...
H5教程
3个月前 (10-19) 127