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;
}

.m-playbar  .ivu-icon {
    /* display: inline-block; */
    font-family: Ionicons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-rendering: optimizeLegibility;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: -.125em;
    text-align: center;
}
.m-playbar .ivu-icon-md-play:before {
    content: "▶";
}
.m-playbar .ivu-icon-md-pause:before {
    content: "〓";
}
.m-playbar .ivu-icon-ios-square:before {
    content: "█";
}

Js

// 获得谷歌浏览器版本(66+以上才能用)
window.getChromeVersion = function() {
	var arr = navigator.userAgent.split(" ");
	var chromeVersion = "";
	for (var i = 0; i < arr.length; i++) {
		if (/chrome/i.test(arr[i])) chromeVersion = arr[i];
	}
    if (chromeVersion) {
		return Number(chromeVersion.split("/")[1].split(".")[0]);
	 } else {
		return false;
	}
}

window.formatSeconds  = function(value) {
	var theTime = parseInt(value);// 需要转换的时间秒 
	    var theTime1 = 0;// 分 
	    var theTime2 = 0;// 小时 
	    if (theTime > 60) {
	        theTime1 = parseInt(theTime / 60);
	        theTime = parseInt(theTime % 60);
	        if (theTime1 > 60) {
	            theTime2 = parseInt(theTime1 / 60);
	            theTime1 = parseInt(theTime1 % 60);
	        }
	    }
	    var result = '';
	    if (theTime > 0) {
	        result = "" + parseInt(theTime) + "秒";
	    }
	    if (theTime1 > 0) {
	        result = "" + parseInt(theTime1) + "分" + result;
	    }
	    if (theTime2 > 0) {
	        result = "" + parseInt(theTime2) + "小时" + result;
	    }
	    if(theTime ==0){
	        result="0分0秒"
	    }
	    return result;
 }


var wavecurrentTime = 0 ; //当前播放的时间
var wavetime = 0 ;//总时长
var wavesurfer = null; 

//切换音频时触发
window.showBottomBar = function(name, id, url) {
	//判断对象是否存在,存在则还原按钮(默认自动播放)并销毁该对象
	if(wavesurfer !== null){
			$('.ivu-icon-md-play').addClass('hide');
			$(".ivu-icon-md-pause").removeClass('hide');
			wavesurfer.destroy();
	}
	
	var version = this.getChromeVersion();
	if (version) {
		if (version < 66) { 
			alert( "您使用的谷歌浏览器版本过低,已为您切换兼容性播放组件,为了更好地体验音频播放请将浏览器升级到最新版本!");
		}else{
			$('#btm-name').text(name);
			wavesurfer = WaveSurfer.create({
				container: '#waveform',
				 waveColor: "#409EFF",
				// backend: "MediaElement",
				mediaControls: false,
				barHeight: 4,
				//使用时间轴插件
				plugins: [
					WaveSurfer.timeline.create({                            
						container: "#wave-timeline",
					})
					]
				});
				wavesurfer.load(url);
						
				wavesurfer.on("ready", function() {
					wavesurfer.play();
					wavetime = window.formatSeconds(wavesurfer.getDuration());
					$('#waveTime').text(wavetime);
				});
				
				wavesurfer.on("audioprocess", function(){
					wavecurrentTime = window.formatSeconds(wavesurfer.getCurrentTime());
						$('#waveCurrentTime').text(wavecurrentTime);
					});
				}
		}else{
			alert( "已为您切换兼容性播放组件,为了更好地体验音频播放请使用谷歌浏览器并将浏览器升级到最新版本!");
	}
}

window.playMusic = function() {
	wavesurfer.play();
	$('.ivu-icon-md-play').addClass('hide');
	$('.ivu-icon-md-pause').removeClass('hide');
}
window.stopMusic = function() {
	wavesurfer.pause();
	$('.ivu-icon-md-play').removeClass('hide');
	$('.ivu-icon-md-pause').addClass('hide');
}
window.replay = function() {
	wavesurfer.stop();
	wavesurfer.play();
	$('.ivu-icon-md-play').addClass('hide');
	$('.ivu-icon-md-pause').removeClass('hide');
}

注意事项

  1. 这是Jsp页面的写法,部分写法与html不同
  2. 问题:低版本谷歌浏览器(如68)偶现频繁切换音频播放,波形图加载一条线但音频已经开始播放,再次播放该语音点击波形图正常(需注释backend) 在这里插入图片描述
  3. 注入时间轴的写法:WaveSurfer.timeline.create(与html少许不同)
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp WaveSurfer是一种基于UniApp框架开发的音频可视化组件。UniApp是一款跨平台开发框架,可以使用Vue.js语法编写代码,并通过编译生成同时支持iOS、Android和Web平台的应用程序。而WaveSurfer是一个开源的JavaScript音频可视化库,可以在网页中展示音频波形图和频谱图等效果。 UniApp WaveSurfer结合了UniApp和WaveSurfer的优势,提供了一种简单易用的方式来集成音频可视化功能到UniApp应用中。通过使用UniApp WaveSurfer,开发者可以方便地将音频文件加载到应用中,并实时显示音频的波形图和频谱图等信息。同时,UniApp WaveSurfer还支持一些基本的音频播放控制功能,如播放、暂停、快进、快退等。 UniApp WaveSurfer的使用非常灵活,可以根据项目需要进行定制和配置。开发者可以自定义音频可视化的样式和效果,调整波形图和频谱图的颜色、大小、背景等属性。此外,UniApp WaveSurfer还提供了一些事件回调函数,可以用来处理播放状态、音量变化、跳转等操作。 总之,UniApp WaveSurfer是一款功能强大、易于集成的音频可视化组件。它使开发者能够以简单、高效的方式给UniApp应用添加音频可视化效果,为用户提供更加丰富的音频播放体验。无论是在音乐播放器、语音录制、语音识别等场景下,UniApp WaveSurfer都能发挥出色的作用,提升应用的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值