mgtv - 素材

当前位置:Gxlcms > 播放器 > HTML5复古风格音乐播放器代码

HTML5复古风格音乐播放器代码

时间:2021-07-01 10:21:17 帮助过:0人阅读

HTML5复古风格音乐播放器代码 html5复古风格音乐播放器代码是一款简单使用的jQuery+HTML5实现的MP3音乐播放器代码。
<head lang="en">
<meta charset="UTF-8">
<title>html5复古风格音乐播放器代码 - mgtv素材</title>
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<audio id="myAudio" preload="auto">
	<source src="http://zjdx1.sc.chinaz.com/Files/DownLoad/sound1/201506/6039.mp3">
	<source src="http://zjdx1.sc.chinaz.com/Files/DownLoad/sound1/201506/6039.mp3">
</audio>
<div id="cdPlayer">
	<div id="myConsole">曲名</div>
	<div id="CD">
		<div id="cdDisk"></div>
		<div id="cdCover"></div>
	</div>
	<div id="cdControllerArm"></div>
	<div id="playMode">
		<div id="shuffleMode" class="mode" title="随机播放"><i class="iconfontPlayMode">&#xe85e;</i>&nbsp;</div>
		<div id="listMode" class="mode" title="顺序播放"><i class="iconfontPlayMode">&#xe7ec;</i>&nbsp;</div>
		<div id="loopMode" class="mode" title="单曲循环"><i class="iconfontPlayMode">&#xe7df;</i>&nbsp;</div>
	</div>
	<div id="controllerButton">
		<div id="playBtn" class="button" title="播放"><i class="iconfont">&#xe830;</i>&nbsp;</div>
		<div id="pauseBtn" class="button" title="暂停"><i class="iconfont">&#xe81f;</i>&nbsp;</div>
		<div id="nextBtn" class="button" title="下一曲"><i class="iconfont">&#xe811;</i>&nbsp;</div>
		<div id="preBtn" class="button" title="上一曲"><i class="iconfont">&#xe826;</i>&nbsp;</div>
		<div id="stopBtn" class="button" title="停止"><i class="iconfont">&#xe875;</i>&nbsp;</div>
		<div id="muteBtn" class="button" title="静音"><i class="iconfont">&#xe8b1;</i>&nbsp;</div>
		<div id="firstBtn" class="button" title="首曲"><i class="iconfont">&#xe787;</i>&nbsp;</div>
		<div id="lastBtn" class="button" title="末曲"><i class="iconfont">&#xe7cc;</i>&nbsp;</div>
	</div>
</div>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/index.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="https://www.mgtv.xyz" target="_blank">mgtv素材</a></p>
</div>
</body>