首页 > HTML5 实战组件

HTML5实现音乐播放器及歌词同步

发表于2015-05-22 17:48:52| --次阅读| 来源webkfa| 作者学到老

摘要:支持手机上的所有浏览器
html5代码
运行代码
<!DOCTYPE html>
<html>
  <head>
	  <meta charset="UTF-8">
	  <meta name="applicable-device" content="mobile"/>
	  <title>随便听听</title>
	  <meta name="keywords" content=""/>
	  <meta name="description" content=""/>
	  <meta name="apple-touch-fullscreen" content="YES" />
	  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	  <meta name="apple-mobile-web-app-capable" content="yes" />
	  <meta name="format-detection" content="telephone=no" />
	  <link rel="stylesheet" href="http://statics.webkfa.com/css/music/html5.css" media="screen" type="text/css" />
	  <script type="text/javascript">
	  	var playlist=[];
	  	var bglist=[
	  		"http://img04.taobaocdn.com/imgextra/i4/1655943686/TB26zHAcFXXXXakXXXXXXXXXXXX_!!1655943686.jpg_300x300.jpg",
	  		"http://img01.taobaocdn.com/imgextra/i1/1655943686/TB2hJnPcFXXXXX2XXXXXXXXXXXX_!!1655943686.jpg_300x300.jpg",
	  		"http://img02.taobaocdn.com/imgextra/i2/1655943686/TB2aJbNcFXXXXapXXXXXXXXXXXX_!!1655943686.jpg_300x300.jpg",
	  		"http://img02.taobaocdn.com/imgextra/i2/1655943686/TB22xLOcFXXXXX8XXXXXXXXXXXX_!!1655943686.jpg_300x300.jpg",
	  		"http://img01.taobaocdn.com/imgextra/i1/1655943686/TB2PwTscFXXXXcTXpXXXXXXXXXX_!!1655943686.jpeg_300x300.jpg",
	  	]
	  </script>
  </head>
  <body>
  		<span class="tcbtn" style="top:5px;left:5px;" onclick="hfclick();">换肤</span>
  		<span class="tcbtn" style="right:5px;top:5px;" onclick="window.scrollTo(0,h);">选听</span>
    	<div id="newlrcId" style="">
			<div class="bg" id="bgid"></div>
		    <div class="filter"></div>
			<div class="main">
				<p class="song" id="songNameid">随便听听</p>
				<div class="lrc" id="lrctextId">
					<div id="llrcId" style="overflow: hidden;">
						<div>随便听听</div>
					</div>
				</div>
				<div class="newfoot">
	                  <p class="time"><span id="currTimeId">00:00</span><span class="fr" id="totalTimeId">00:00</span></p>
	                  <div style="width:100%;padding:5px 0;" id="clickbarid">
		                  <div class="line_bar">
		                        <ul><li style="width:0px;"><em id="youwid" style="width:0px;"></em></li></ul><span class="play_icon" id="ydbtnid" style="left:0px;"></span>
		                  </div>
	                  </div>
	                  <div class="play_m">
	                        <a href="javascript:;" id="newprevid"><img onclick="prevsong();" src="http://img01.taobaocdn.com/imgextra/i1/1655943686/TB2j0DwcFXXXXaYXXXXXXXXXXXX_!!1655943686.png" width="29"></a>
	                        <a href="javascript:;" id="ctrlBtnId3"><img id="playstopid" onclick="playstopop();" src="http://img03.taobaocdn.com/imgextra/i3/1655943686/TB2qUPxcFXXXXaDXXXXXXXXXXXX_!!1655943686.png" width="29"></a>
	                        <a href="javascript:;" id="newnextid"><img onclick="nextsong();" src="http://img04.taobaocdn.com/imgextra/i4/1655943686/TB27HDycFXXXXaJXXXXXXXXXXXX_!!1655943686.png" width="29"></a>
	                  </div>
				</div>
		      </div>
	  	</div>
	  	<div id="playHTMLId" style="display: none;">
		      <audio id="mediaPlayId"
			   onended="managerPlst('statDivId');"
			   onloadstart="loadStatus('statDivId');"
			   onplaying="playStatus('statDivId')"
			   onpause="pauseStatus('statDivId')"
			   onerror="loadError('statDivId')"
			   ontimeupdate="updateMethod('statDivId')"
			   mozaudiochannel="content"
			   controls>
			  </audio>
		 </div>
		 <div style="position: absolute;display:none;z-index: 1000;top: 50px;left: 0px;" id="statDivId">
	 	 </div>
	  	<script src="http://statics.webkfa.com/js/music/html5.js"></script>
  </body>
</html>

相关文章

相关文章

在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京 ICP 证 14034497 号