Home >Web Front-end >H5 Tutorial >Sample code sharing of HTML5 practice lyrics synchronization player
We will find that the compatibility of song playback is not very good. For example, the flash player that can be played on IE is not a good application on Firefox or Chrome because of the obstruction of plug-ins!HTML5# The emergence of ## makes all this possible, but although the player plays, we still need to pay attention to the user experience, so we wrote an HTML-compatible player! It is backward compatible with IE6-9, chrome, firfox, opera and other mainstream players. It should be fully compatible! The implementation principle code is presented to everyone!
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歌词方法 返回时间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 </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>
The above is the detailed content of Sample code sharing of HTML5 practice lyrics synchronization player. For more information, please follow other related articles on the PHP Chinese website!