歌曲播放我们会发现他的兼容性不是很好，譬如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!
Dekonstruktur Kod H5: Tag, Elemen, dan AtributApr 18, 2025 am 12:06 AMKod HTML5 terdiri daripada tag, elemen dan atribut: 1. Tag mentakrifkan jenis kandungan dan dikelilingi oleh kurungan sudut, seperti. 2. Unsur terdiri daripada tag permulaan, kandungan dan tag akhir, seperti kandungan. 3. Atribut menentukan pasangan nilai utama dalam tag permulaan, meningkatkan fungsi, seperti. Ini adalah unit asas untuk membina struktur web.
Memahami Kod H5: Asas HTML5Apr 17, 2025 am 12:08 AMHTML5 adalah teknologi utama untuk membina laman web moden, menyediakan banyak elemen dan ciri -ciri baru. 1. HTML5 memperkenalkan unsur -unsur semantik seperti, dan lain -lain, yang meningkatkan struktur laman web dan SEO. 2. Sokongan unsur multimedia dan menanamkan media tanpa pemalam. 3. Borang meningkatkan jenis input baru dan sifat pengesahan, memudahkan proses pengesahan. 4. Menawarkan fungsi storan luar talian dan tempatan untuk meningkatkan prestasi laman web dan pengalaman pengguna.
Kod H5: Amalan Terbaik untuk Pemaju WebApr 16, 2025 am 12:14 AMAmalan terbaik untuk kod H5 termasuk: 1. Gunakan pengisytiharan dan pengekodan watak yang betul; 2. Gunakan tag semantik; 3. Mengurangkan permintaan HTTP; 4. Gunakan pemuatan asynchronous; 5. Mengoptimumkan imej. Amalan ini dapat meningkatkan kecekapan, penyelenggaraan dan pengalaman pengguna halaman web.
H5: Evolusi piawaian dan teknologi webApr 15, 2025 am 12:12 AMPiawaian dan teknologi web telah berkembang dari HTML4, CSS2 dan JavaScript mudah setakat ini dan telah menjalani perkembangan yang ketara. 1) HTML5 memperkenalkan API seperti kanvas dan webstorage, yang meningkatkan kerumitan dan interaktiviti aplikasi web. 2) CSS3 menambah fungsi animasi dan peralihan untuk menjadikan halaman lebih berkesan. 3) JavaScript meningkatkan kecekapan pembangunan dan kebolehbacaan kod melalui sintaks moden node.js dan ES6, seperti fungsi anak panah dan kelas. Perubahan ini telah mempromosikan pembangunan pengoptimuman prestasi dan amalan terbaik aplikasi web.
Adakah H5 adalah singkat untuk HTML5? Meneroka butiranApr 14, 2025 am 12:05 AMH5 bukan sekadar singkatan HTML5, ia mewakili ekosistem teknologi pembangunan web moden yang lebih luas: 1. H5 termasuk HTML5, CSS3, JavaScript dan API dan Teknologi yang berkaitan; 2. Ia menyediakan pengalaman pengguna yang lebih kaya, interaktif dan lancar, dan boleh berjalan dengan lancar pada pelbagai peranti; 3. Menggunakan timbunan teknologi H5, anda boleh membuat laman web responsif dan fungsi interaktif yang kompleks.
H5 dan HTML5: Istilah yang biasa digunakan dalam pembangunan webApr 13, 2025 am 12:01 AMH5 dan HTML5 merujuk kepada perkara yang sama, iaitu HTML5. HTML5 adalah versi kelima HTML, membawa ciri -ciri baru seperti tag semantik, sokongan multimedia, kanvas dan grafik, penyimpanan luar talian dan penyimpanan tempatan, meningkatkan ekspresi dan interaktiviti laman web.
Apa yang dirujuk oleh H5? Meneroka konteksApr 12, 2025 am 12:03 AMH5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo
H5: Alat, Rangka Kerja, dan Amalan TerbaikApr 11, 2025 am 12:11 AMAlat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
Dreamweaver Mac版
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
