js实现语音播报+html自动播放音频
-
1. js生成语音源(利用百度的TTS):
let str = "测试测试测试测试测试测试测试123测试测试测试测试测试测试123435";
let make_mp3 = "https://tts.baidu.com/text2audio?cuid=baike&lan=zh&ctp=1&pdt=301&vol=9&rate=32&per=0&tex=" + encodeURI(str);
2. js实现自动播放音乐:
Audio标签由于浏览器不允许自动play(),因此,为了实现该功能,只能用AudioContext来实现。参考:https://blog.csdn.net/wo240/article/details/82748474。
另外,Chrome或Safari里面如果还不能正常播放,就得用Edge浏览器(或Edge谷歌内核版)、火狐浏览器等。
以下是自动播放部分的代码:
(mplayer.js下载:备1:https://download.csdn.net/download/weixin_41827162/12447011 备2:https://cdnaliyun.oss-cn-hangzhou.aliyuncs.com/js/mplayer.js)
// 开源文档https://github.com/haima16/MPlayer// 需先引入mplayer.js依赖文件let player = new MPlayer(make_mp3, {loop: false,volume: 1,auto: true,index: 1,analyser: {size: 1024,}});player.onload = function() {console.log("=开始播放=");this.play()};player.onended = function() {console.log("=播放完成=");};
-
百度语音:
tex 必填 合成的文本,使用UTF-8编码。小于2048个中文字或者英文数字。(文本在百度服务器内转换为GBK后,长度必须小于4096字节)
tok 必填 开放平台获取到的开发者access_token(见上面的“鉴权认证机制”段落)
cuid 必填 用户唯一标识,用来计算UV值。建议填写能区分用户的机器 MAC 地址或 IMEI 码,长度为60字符以内 ctp 必填 客户端类型选择,web端填写固定值1 lan 必填 固定值zh。语言选择,目前只有中英文混合模式,填写固定值zh spd 选填 语速,取值0-15,默认为5中语速 pit 选填 音调,取值0-15,默认为5中语调
vol 选填 音量,取值0-15,默认为5中音量
per(基础音库) 选填 度小宇=1,度小美=0,度逍遥=3,度丫丫=4 per(精品音库) 选填 度博文=106,度小童=110,度小萌=111,度米朵=103,度小娇=5 aue 选填 3为mp3格式(默认); 4为pcm-16k;5为pcm-8k;6为wav(内容同pcm-16k); 注意aue=4或者6是语音识别要求的格式,但是音频内容不是语音识别要求的自然人发音,所以识别效果会受影响。 tex字段2次urlencode 由于urlencode有两个标准 RFC 1738和RFC 3986. 百度为了更好地兼容,支持1次及2次urlencode, 其中2次urlencode可以覆盖全部的特殊字符。因而推荐传递tex 参数时做2次urlencode编码。
-
API:
属性 props
- duration 获取音频总时长
number
- state 获取当前音频的状态,running | suspend
- volume 获取当前音量
number
- loop 获取音频是否循环
boolean
- auto 是否自动播放
boolean
方法 methods
- on(type, fn) 绑定事件,type可选值(load | ended),fn回调函数
- off(type, fn) 解绑事件,type可选值(load | ended),fn回调函数
- emit(type) 手动触发监听事件
- getData 获取分析的音频数据,类型Uint8Array,需要开启analyser选项
- play 播放音频
- pause 暂停播放
- toggle 音频状态切换
- playPrev 播放上一首
- playNext 播放下一首
- start(offset) 设置音频开始播放的时刻,offset的范围为0~duration
- setLoop(bool) 设置音频是否循环播放
- setVolume(val) 设置音频音量,0 ~ 1.0
- getCurrentTime 获取当前播放的时长
- setOptions(options) 可以统一设置,如:{ loop: true, volume: 0.5 }
事件 events
onload:音频解析完成时触发
onended:音频播放完触发
-
js实现语音播报+html自动播放音频相关推荐
- js解决chrome浏览器无法自动播放音频
先随便设置下audio路径 <audio src="xxx.mp3" id="video" ref="video"></a ...
- 通过howler.js实现在Android下的微信浏览器自动播放音频
howler.js是一个把webaudio进行封装的一个js库,通过它可以轻松的对音频文件进行控制播放.暂停.甚至指定播放音频中的某个片段.以及加快等等,这里我们只关注它在微信浏览器中自动播放的问题, ...
- js 自动播放音频文件,报警提示音等
js 自动播放音频文件,报警提示音等 谷歌浏览器的音频,默认是不能在页面载入时直接自动播放的. 至少需要用户点击一下页面,才可以播放音频,这个策略的目的是保证用户的体验感,如果每个页面都能在用户未接触 ...
- Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...
- ios微信下vue项目组件切换并自动播放音频的解决方案
最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页 和结束页面 ,答题页关于每种 ...
- Firefox 66 将阻止自动播放音频和视频
百度智能云 云生态狂欢季 热门云产品1折起>>> 当我们点击一个链接,或者打开新的浏览器选项卡时,浏览器就开始自动播放视频和声音,这是一件十分烦人的事.Chrome 浏览器早已对 ...
- 解决Chrome浏览器无法自动播放音频视频的问题,Uncaught(in promise) DOMException
转载http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许自动 ...
- chrome不能自动播放音频的问题
在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许自动播放音频和视频.就算你为video或audio标签设置了autoplay属性也一样不能自动播放. 设置方式: ...
- 解决Chrome浏览器无法自动播放音频视频的问题
谷歌浏览器做了改革,不再允许自动播放音频和视频.Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频. <video autoplay></video> 所以好多需 ...
最新文章
- python使用TSNE为影像组学(radiomics)数据进行降维可视化分析
- 芯片业又起波澜!博通189亿美元收购遭质疑,股价一度跌近19%
- PyQt5简介及demo
- 【Linux系统编程】线程堆栈大小的使用介绍
- C++(6)--初识循环while,do-while
- c语言字符串替换问题,C语言中的字符串替换
- oracle让数据库不产生redo,imp过程如何减少redo产生
- a标签js阻止跳转_前端笔试知识点:阻止冒泡
- 手机电子词典_【摘要】陈玉珍:词典使用对搭配产出与记忆保持的效能研究—— 以手机在线词典为例...
- 2019_GDUT_新生专题I选集 L Codeforces-1260B
- excel 公式和函数
- 学生信息管理系统(数据库)
- pipeline离线安装
- C++软件工程师的发展前景如何
- 【实用工具】让文件资源管理器像浏览器一样实现多标签化——QTTabBar
- daytime协议的服务器和客户端程序,用socket套接字实现daytime协议服务器和客户端程序.doc...
- 用于计算机安全防护的有,《计算机安全防护》课件
- pc android ios 学英语,全面升级更新.免费 小学英语人教版.三起[Android.iOS]
- BERT4GCN: Using BERT Intermediate Layers to Augment GCN for Aspect-based Sentiment Classification
- 网站用户行为分析项目之会话切割(一)