<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5可视化音乐播放器代码 - 网页模板</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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
HTML5可视化音乐播放器代码.zip
版权申诉
23 浏览量
2022-11-18
22:13:55
上传
评论
收藏 133KB ZIP 举报
HTML5可视化音乐播放器代码.zip （11个子文件） 
HTML5可视化音乐播放器代码 
HTML5可视化音乐播放器代码.jpg 29KB jiaoben4795 css 
ribbon.css 3KB bootstrap.min.css 111KB style.css 2KB fonts glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.ttf 40KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 61KB
index.html 2KB js wavesurfer.min.js 29KB app.js 2KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
