mgtv - 素材

当前位置:Gxlcms > 播放器 > jQuery随身听音乐播放器代码

jQuery随身听音乐播放器代码

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

jQuery随身听音乐播放器代码 jQuery随身听音乐播放器代码是一款界面美观,功能齐全,包含动画效果的音乐播放器代码。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery随身听音乐播放器代码 - mgtv素材</title>

<link rel="stylesheet" href="css/base.css?version=19.3.9.1">

<script src="js/jquery.min.js"></script>

</head>
<body>

<div id="audio" class="audio audio-off">

	<audio id="audio-my" src="soures/m1.mp3" preload="metadata"></audio>
	
	<div class="audio-head">
		<div class="audio-head-tittle">
			<div class="audio-head-tittle-text audio-head-tittle-text-off"></div>
		</div>
		<div class="audio-head-tittle-by"></div>
	</div>
	<div class="add"></div>
	<div class="min-time"></div>
	<div class="audio-img">
		<canvas id="audio-img-canvas" width="200px" height="200px"></canvas>
		<div class="audio-img-cover audio-img-cover-off"></div>
		<canvas id="audio-img-canvas-play" class="audio-img-canvas-play-off" width="45px" height="200px"></canvas>
	</div>
	<div class="audio-text">歌词待更新</div>
	<div class="audio-by">
		<div class="audio-by-all">
			<span class="audio-by-now"></span>
		</div>
		<div class="audio-by-text">
			<span class="audio-by-text-now">00:00</span>
			<span class="audio-by-text-all">00:00</span>
		</div>
	</div>
	<div class="audio-btn">
		<div class="audio-btn-list audio-btn-list-off"></div>
		<div class="audio-btn-before"></div>
		<div class="audio-btn-play audio-btn-play-off audio-btn-play-off-a"></div>
		<div class="audio-btn-sound"></div>
		<div class="audio-btn-next"></div>
	</div>
	<div class="audio-sound">
		<div class="audio-sound-all">
			<span class="audio-sound-now"></span>
			<span class="audio-sound-art"></span>
		</div>
	</div>
</div>

<a class="audio-head-tittle-text-out"></a>
<a class="audio-head-tittle-text-out-a"></a>

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