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>
wavesurfer音波插件之播放指定语音片段的更多相关文章
- Jquery 插件PrintArea 打印指定的网页区域
Jquery 插件PrintArea 打印指定的网页区域 需要下载jquery 和printarea.js插件 PrintArea.Js插件,可以打印整个网页中某个指定的区域. $("打印区 ...
- 非常优秀的swiper插件————幻灯片播放、图片轮播
http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...
- WT588D播放合成语音时出现某些语句不能正常播报的情况,经过对比其他语句,看似有点不符合逻辑。
现象:某条语句本该播放完循环,实际确实不断循环第一个字,不能正常播放 原因:用语音合成工具合成该语句时,改了里面的默认音量,导致播放时出现液晶显示错误(感觉好像驱动不了的样子,我就是观察到这个现象才想 ...
- 前端视频插件Aliplayer播放器简单使用(基于地址播放)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- EasyPlayer RTSP Windows(with ActiveX/OCX插件)播放器支持H.265播放与抓图功能
EasyPlayer作为业界一款比较优秀的RTSP播放器,一直深受用户的好评,经过了近3年的开发和迭代,从一开始的简单PC版本的RTSP播放功能,到如今支持PC(支持ocx插件).Android.iO ...
- php在web端播放amr语音(如微信语音)
在使用微信JSSDK的上传下载语音接口时,发现一个问题: 下载的语音在iPhone上不能播放,测试了之后原因竟然是: 微信接口返回的音频内容是amr格式的,但iPhone不支持播放此类型格式. 那么转 ...
- 用libvlc 播放指定缓冲区中的视频流
有时候,我们需要播放别的模块传输过来的视频流,VLC提供了这样的机制,但一般很少这样用,下面的例子实现了这样的功能. 其中用到一个关键的模块 imem. vlc提供多种创建媒体的方式,如要从指定缓存 ...
- C#读取文本播放相应语音【转】
第一种方案: 利用微软text to speech引擎(TTS),读取文本 (1)添加Microsoft Speech Object Library的项目引用 (2)引入using SpeechLib ...
- java调用本地播放器播放视频文件。调用本地播放器不能播放指定文件的说明。
public class OpenExe extends HttpServlet { //打开本地播放器并播放视频 public static void openExe(String file) { ...
- EasyPlayer播放器浏览器ActiveX/OCX插件RTSP播放/抓拍/录像功能调用说明
EasyPlayerPro与EasyPlayer-RTSP新增ocx多窗口播放功能 这里以EasyPlayerPro为例,使用方法如下: 打开播放器文件夹,进入Bin/C++目录,可以看到reg.ba ...
随机推荐
- RealSenseD435的一些参数整理
一.深度相机D435 二.自校准功能 https://www.intelrealsense.com/self-calibration-for-depth-cameras/ https://dev.in ...
- (0524) rbf 格式 (intel)
http://blog.chinaaet.com/yuwoo/p/5100049901 https://blog.csdn.net/qq_38531460/article/details/107066 ...
- Docker CLI docker buildx bake 常用命令
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...
- 报错解决OSError: /lib64/libm.so.6: version `GLIBC_2.27' not found
使用pyg报错如下: 1 Traceback (most recent call last): 2 File "main.py", line 18, in <module&g ...
- Ehlib的DBGridEh 控件导出到Excel
use DBGridEhImpExp //必须引用此单元 procedure TInvoiceManager.ppmSaveSelectionClick(Sender: TObject); proce ...
- Win10家庭版找不到组策略gpedit.msc怎么办
Win10家庭版找不到组策略gpedit.msc怎么办 @echo off pushd "%~dp0" dir /b %systemroot%\Windows\servicing\ ...
- Codeforces Round #843 (Div. 2) C【思维】
https://codeforces.com/contest/1775/problem/C 题意 题意是说,给你n和x,你要求出最小的满足要求的m,使得 \(n\)&\((n+1)\)& ...
- (转载)私人问卷收集系统-Surveyking问卷收集系统
前言 但凡提及问卷收集系统,问卷星与腾讯问卷通常都为大家首选问卷调查系统. 担心数据安全,海量问卷管理不便,工作流创建困难?快速部署自有问卷调查系统开始你的问卷调查之旅. 无论是问卷调查,考试系统,公 ...
- tomcat反向代理,监控,性能优化详细步骤
第1章 tomcat简介Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache,Sun和其他一些公司及个人共同 ...
- 手把手XTTS_V4迁移
最近公司Oracle升级,考虑到停机时间等综合因数,最终选择了xtts数据迁移方案. 为此我整理了一份操作手册,方便以后查阅. 关于xtts的介绍可以参见这篇文章: <XTTS,又一个值得你重视 ...