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!
What are the production methods of html5 animation production?
The difference between HTML and HTML5
host file
What is the reason why the computer screen is black but the computer is on?
Knowledge needed for web front-end
The difference between linux and windows
Introduction to the usage of stickline function
Detailed process of upgrading win7 system to win10 system
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
