HTML5实践之歌词同步播放器的示例代码分享-Tutorial H5-php.cn

HTML5实践之歌词同步播放器的示例代码分享

黄舟

Lepaskan： 2017-03-25 16:20:33

asal

1783 orang telah melayarinya

歌曲播放我们会发现他的兼容性不是很好，譬如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歌词方法 返回时间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>

Salin selepas log masuk

Atas ialah kandungan terperinci HTML5实践之歌词同步播放器的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!