wavesurfer音波插件之播放指定语音片段

使用wavesurfer音波插件时,可能会用到这么一个功能,点击音转文后的某一句文字,则需要在音波条上进行播放这一段录音,恰好wavesurfer插件自带这么一个功能,直接上代码

<script type="text/javascript" src="/js/wavesurfer.min.js"></script>
 
<div id="waveform"></div>
 
<script>
	
    //初始化
	var wavesurfer = WaveSurfer.create({
	    container: '#waveform',
	    waveColor: 'violet',
	    progressColor: 'blue'
	});
    
    //自带的获取录音时长
	wavesurfer.on('ready', function () {
		$('#getDuration').html(wavesurfer.getDuration());
	});
 
    //播放或暂停
	function play(){
		if(wavesurfer.isPlaying()){
			wavesurfer.playPause();
		}else{
			wavesurfer.setPlaybackRate(1);
			wavesurfer.play();
		}
	}
 
    //1.5倍速播放
	function quaplay(){
		wavesurfer.setPlaybackRate(1.5);
		wavesurfer.play();
	}
 
    //1.8倍速播放
	function qualityplay(){
		wavesurfer.setPlaybackRate(1.8);
		wavesurfer.play();
	}
 
    //静音播放
	function mute(){
		if(wavesurfer.getMute() == true){
			wavesurfer.setMute(false);
			wavesurfer.play();
		}else{
			wavesurfer.setMute(true);
		}
	}
	
    //加载录音
	wavesurfer.load('/apps/resource/voice/${voice.id!''}.wav');
    
    //重点在这里,传入 start 和 end 时间,秒为单位,就可以播放指定的一段录音,音波的光标也会移动到这一段录音的地方,播放后自动会停下
	$(".media-play").click(function(){
		var start = $(this).attr("data-start");
		var end = $(this).attr("data-end");
		wavesurfer.seekTo(0);
		wavesurfer.play(start/1000,end/1000);
	});
	
 
	 
</script>
posted @ 2022-11-02 01:47  打个大大西瓜  阅读(178)  评论(0)    收藏  举报