Jsp页面加入WaveSurfer

预览

代码

引入

文件下载：WaveSurfer.

// 3.3.3版本
<script src="${ctx}/resources/js/plugins/WaveSurfer.js"></script>
<script src="${ctx}/resources/js/plugins/wavesurfer.timeline.js"></script>

jsp

<div id="wave-toolbar" >
		 <!-- 音频名 -->
		 <span id="btm-name" ></span> 
		 
		 <!-- 定制化播放按钮以及显示播放时长 -->
		 <div id="ready-action" >
			  <i class="action ivu-icon ivu-icon-md-play hide" onclick="window.playMusic()"></i>
			  <i class="action ivu-icon ivu-icon-md-pause " onclick="window.stopMusic()"></i>
			  <i class="action ivu-icon ivu-icon-ios-square" onclick="window.replay()"></i>
		  </div>
		  <span>(总时长：</span>
		  <span id="waveCurrentTime" ></span>/
		  <span id="waveTime"></span>)
		</div>
		
		<!-- 波形图 -->
		<div id="waveform" ref="waveform"></div>
		
		<!-- 时间刻度 -->
		<div id="wave-timeline" ref="wave-timeline"></div>
</div>

css(仅供参考)

/* 部分CSS */
.hide{
   
	display: none;
}
.m-playbar .action{
   
	cursor: pointer;
	margin: 0 5px