预览
代码
引入
文件下载: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