HTML5實踐之歌詞同步播放器的範例程式碼分享-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5實踐之歌詞同步播放器的範例程式碼分享

黄舟

Mar 25, 2017 pm 04:20 PM

歌曲播放我們會發現他的相容性不是很好，譬如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>

以上是HTML5實踐之歌詞同步播放器的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

解構H5代碼：標籤，元素和屬性Apr 18, 2025 am 12:06 AM

HTML5代碼由標籤、元素和屬性組成：1.標籤定義內容類型，用尖括號包圍，如。 2.元素由開始標籤、內容和結束標籤組成，如內容。 3.屬性在開始標籤中定義鍵值對，增強功能，如。這些是構建網頁結構的基本單位。

了解H5代碼：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是構建現代網頁的關鍵技術，提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等，增強了網頁結構和SEO。 2.支持多媒體元素和，無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性，簡化了驗證過程。 4.提供了離線和本地存儲功能，提升了網頁性能和用戶體驗。

H5代碼：Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括：1.使用正確的DOCTYPE聲明和字符編碼；2.採用語義化標籤；3.減少HTTP請求；4.使用異步加載；5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo