Sample code sharing of HTML5 practice lyrics synchronization player-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Sample code sharing of HTML5 practice lyrics synchronization player

黄舟

Mar 25, 2017 pm 04:20 PM

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($(&#39;#lrc_content&#39;).val()!==""){
044	                $.lrc.start($(&#39;#lrc_content&#39;).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>

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn