Rumah > Artikel > hujung hadapan web > HTML5实践之歌词同步播放器的示例代码分享
HTML5实践之歌词同步播放器的示例代码分享
- 黄舟asal
- 2017-03-25 16:20:331755semak imbas
歌曲播放我们会发现他的兼容性不是很好，譬如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($('#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>Atas ialah kandungan terperinci HTML5实践之歌词同步播放器的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML5 API浏览器支持情况检测的详情介绍Artikel seterusnya：详细介绍H5弹性盒布局的使用（父容器属性）