mgtv - 素材

当前位置:Gxlcms > 播放器 > HTML5可视化音乐播放器代码

HTML5可视化音乐播放器代码

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

HTML5可视化音乐播放器代码 HTML5可视化音乐播放器代码是一款带音频波纹的可视化音乐播放器特效下载。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5可视化音乐播放器代码 - mgtv素材</title>

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/ribbon.css" />

<!-- wavesurfer.js -->
<script src="js/wavesurfer.min.js"></script>

<!-- App -->
<script src="js/app.js"></script>
</head>

<body>
<div class="container">
	<div class="header">
		<ul class="nav nav-pills pull-right">
			<li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
		</ul>

		<h1 itemprop="name">Demo</h1>
	</div>

	<div id="demo">
		<div class="row" style="margin: 30px 0">
			<div class="col-sm-10">
				<div id="waveform">
					<!-- Here be waveform -->
				</div>
			</div>

			<div class="col-sm-2">
				<button class="btn btn-success btn-block" id="playPause">
					<span id="play">
						<i class="glyphicon glyphicon-play"></i>
						Play
					</span>

					<span id="pause" style="display: none">
						<i class="glyphicon glyphicon-pause"></i>
						Pause
					</span>
				</button>
			</div>
		</div>

		<div class="list-group" id="playlist">
			<a href="media.mp3" class="list-group-item">
				<i class="glyphicon glyphicon-play"></i>
				Wake
				<span class="badge">4:35</span>
			</a>


		</div>
	</div>
</div>


</body>