使用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音波插件之播放指定语音片段的更多相关文章

  1. Jquery 插件PrintArea 打印指定的网页区域

    Jquery 插件PrintArea 打印指定的网页区域 需要下载jquery 和printarea.js插件 PrintArea.Js插件,可以打印整个网页中某个指定的区域. $("打印区 ...

  2. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  3. WT588D播放合成语音时出现某些语句不能正常播报的情况,经过对比其他语句,看似有点不符合逻辑。

    现象:某条语句本该播放完循环,实际确实不断循环第一个字,不能正常播放 原因:用语音合成工具合成该语句时,改了里面的默认音量,导致播放时出现液晶显示错误(感觉好像驱动不了的样子,我就是观察到这个现象才想 ...

  4. 前端视频插件Aliplayer播放器简单使用(基于地址播放)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. EasyPlayer RTSP Windows(with ActiveX/OCX插件)播放器支持H.265播放与抓图功能

    EasyPlayer作为业界一款比较优秀的RTSP播放器,一直深受用户的好评,经过了近3年的开发和迭代,从一开始的简单PC版本的RTSP播放功能,到如今支持PC(支持ocx插件).Android.iO ...

  6. php在web端播放amr语音(如微信语音)

    在使用微信JSSDK的上传下载语音接口时,发现一个问题: 下载的语音在iPhone上不能播放,测试了之后原因竟然是: 微信接口返回的音频内容是amr格式的,但iPhone不支持播放此类型格式. 那么转 ...

  7. 用libvlc 播放指定缓冲区中的视频流

    有时候,我们需要播放别的模块传输过来的视频流,VLC提供了这样的机制,但一般很少这样用,下面的例子实现了这样的功能. 其中用到一个关键的模块 imem.  vlc提供多种创建媒体的方式,如要从指定缓存 ...

  8. C#读取文本播放相应语音【转】

    第一种方案: 利用微软text to speech引擎(TTS),读取文本 (1)添加Microsoft Speech Object Library的项目引用 (2)引入using SpeechLib ...

  9. java调用本地播放器播放视频文件。调用本地播放器不能播放指定文件的说明。

    public class OpenExe extends HttpServlet { //打开本地播放器并播放视频 public static void openExe(String file) { ...

  10. EasyPlayer播放器浏览器ActiveX/OCX插件RTSP播放/抓拍/录像功能调用说明

    EasyPlayerPro与EasyPlayer-RTSP新增ocx多窗口播放功能 这里以EasyPlayerPro为例,使用方法如下: 打开播放器文件夹,进入Bin/C++目录,可以看到reg.ba ...

随机推荐

  1. 【转载】 VCS编译的基本参数,//code细节,注释

    https://www.bilibili.com/read/cv18255106?spm_id_from=333.999.0.0

  2. Day20:update功能的实现

    今日完成的任务: 1.将最初设想的消息界面删除,删去message和chat等无参数跳转界面,并在物品详情中增加[联系方式]一栏供大家线下交易使用. 最终完成界面如下 2.实现本个小程序最后一个功能- ...

  3. 用FineBI实现hive图表的可视化

    图表的可视化,本来我以为很麻烦,因为看着图就感觉很难的样子,其实用FineBI来做很简单. 1.安装FineBI 2将下列jar包导入FineBI,webapps\webroot\WEB-INF\li ...

  4. 【服务器数据恢复】ZFS文件系统下ZPOOL下线的数据恢复案例

    服务器数据恢复环境:SUN ZFS系列某型号存储阵列:40块磁盘组建的存储池(其中4块磁盘用作全局热备盘),池内划分出若干空间映射到服务器使用:服务器使用Windows操作系统. 服务器故障:服务器在 ...

  5. Linux常用的操作指令01

    关键字: linux 查进程.杀进程.起进程1.查进程    ps命令查找与进程相关的PID号:    ps a 显示现行终端机下的所有程序,包括其他用户的程序.    ps -A 显示所有程序.   ...

  6. MySQL 学习(四)并集查询

    联合查询,它是用 union 关键字把多条 select 语句的查询结果合并为一个结果集.纵向合并的前提是被合并的结果集的字段数量.顺序和数据类型必须完全一致.字段名不一样的情况下,会将第一个结果集的 ...

  7. unable to access 'https://github.com/.../...git': Recv failure: Connection was reset

    解决git下载报错:fatal: unable to access 'https://github.com/.../...git': Recv failure: Connection was rese ...

  8. k8s心得

    k8s的 Service 记录了发布后服务的基本信息,如 ip,端口

  9. yaml文件读取转化为类

    首先你要有一个文件读取的方法,写一个根据传入路径 + 类来自动返回对应类的方法. /** * 根据传入的path,加载配置文件内容到对应class中 */ public static <T> ...

  10. Spring Boot Actuator未授权漏洞

    Actuator 是 Spring Boot 提供的服务监控和管理中间件.当 Spring Boot 应用程序运行时,它会自动将多个端点注册到路由进程中.由于对这些端点的错误配置,就有可能导致一些系统 ...