audio标签无法自动循环播放问题
项目中有类似于美团外卖那种语音提示,如果有人预约,就会有消息提示,但是Chorme浏览器无法自动循环播放,之前在网上各种百度也没找到解决办法,最后经过一番努力,终于实现了这种效果。代码如下:
//这是audio标签 <audiosrc="../static/audios/yochima.mp3"//音频路径muted //静音播放autoplay//自动播放loop//循环播放id="myPlay"style="display: none"></audio><script>export default {data(){return {play: false,t1: 5001,t2: 6000,timer: null,reservationInfoNum :0,//预约消息数量}},mounted() {let audio = document.getElementById("myPlay");audio.muted = true; //关闭静音状态//getResevationInfoNum方法是我的接口getResevationInfoNum({ storeCode: this.storeCode }).then((res) => {if (res.code === 0) {console.log(res);this.reservationInfoNum = res.data;this.timer = setInterval(() => {getResevationInfoNum({ storeCode: this.storeCode }).then((res) => {if (res.code === 0) {this.reservationInfoNum = res.data;if (res.data > 0) {this.run();//语音播报代码}}});}, 5000);}});},
methods: {//语音播报run() {let audio = document.getElementById("myPlay");if (this.play) {return false;}audio.currentTime = 0; //播放音频的起始时间audio.volume = 1; //音频声音大小audio.muted = false; //关闭静音状态this.play = true;setTimeout(() => {this.play = false;audio.muted = true; //播放完毕,开启静音状态}, this.t2);},
},}
</script>
最终实现了,语音播报功能.
audio标签无法自动循环播放问题相关推荐
- audio标签实现网页循环播放背景音乐代码实现
<!DOCTYPE html> <html lang="en"> 查看全文 http://www.taodudu.cc/news/show-5455866. ...
- 多功能流媒体播放器实现网页无插件直播之EasyPlayer.js如何实现播放完自动循环播放
EasyPlayer-Android播放器是一款可针对RTSP.RTMP.RTSP&RTMP协议进行过优化的流媒体播放器,其中我们引以为傲的两个技术优势就是起播速度快和播放延迟低.最近我们遇到 ...
- html5 无插件视频播放器,多功能流媒体播放器网页无插件直播EasyPlayer.js如何实现播放完自动循环播放...
原标题:多功能流媒体播放器网页无插件直播EasyPlayer.js如何实现播放完自动循环播放 EasyPlayer-Android播放器是一款可针对RTSP.RTMP.RTSP&RTMP协议进 ...
- HTML页面背景音乐自动循环播放
在Chrome上写的一个HTML设置背景音乐自动循环播放的时候 <audio autoplay="autoplay" loop="loop" contro ...
- video自动循环播放设置
方法一:在video标签上直接添加autoplay 和loop属性,但直接添加需手动点击播放才可自动循环播放,想要一打开就让video自动循环播放需要添加muted属性,具体代码实现如下: <v ...
- 自动循环播放的MP3播放器
[实现内容]自动循环播放的MP3播放器 [应用]自动循环播放的MP3播放器主要用于企业文化的应用.在每天的休息时段,播放器自动循环播放指定的MP3音乐.本自动播放器主要根据本公司的情况编写,包括早上上 ...
- PPT2010中轻松实现PPT自动循环播放
在产品展销会.人才招聘会时,我们可能会需要PPT自动循环播放.在PPT2010中可以很轻松地实现自动循环播放效果. 设置放映法 在PPT 2010中,通过排练计时已经可以让PPT自动播放,但只能自动播 ...
- 解决Swiper 自动循环播放和小点跟随
解决Swiper 自动循环播放和小点跟随 直接贴代码 <div data-pagination='{"el": ".swiper-pagination"} ...
- 设置PowerPoint2007自动循环播放
转载者: 英文版篮球ppt课件 来源: www.2ppt.cn 您的位置: 主页 > PowerPoint教程 > PowerPoint2007教程 > 设 ...
最新文章
- mysql事务在提交后才发送给数据库执行_从一个线上问题分析binlog与内部XA事务提交过程...
- Material-UI使用
- kubesphere报错收集
- 在Android设备部署PyTorch模型
- 【正式发布】火星人敏捷开发手册2012-12-25(基于Scrum的敏捷开发免费培训教材及公司内部宣传材料)...
- Cookie 、Session、Token理解以及常见问题总结
- 计算机硬盘突然只有一个c盘,win10硬盘消失了只剩下c盘怎么恢复_win10硬盘突然消失只有c盘解决方法-win7之家...
- fastboot驱动安装问题——文件哈希值不在指定目录
- Python自动化办公之PDF拆分
- Intel SGX开发者参考书(三)—— 使用Intel SGX SDK工具(一)
- 17-chan原理1-创建
- TP5使用easywechat进行微信Native扫码支付
- Compass实战 站内搜索
- 翟菜花:作为一个开发者 我为什么更看好搜索+小程序
- Android OpenCV应用篇三:提取图片中的文字
- 基于SYN7318 语音识别的智能家居嵌入式控制系统设计与开发
- 一步步分析为什么B+树适合作为索引的结构
- 区块链:4、矿池算力集中问题及51%攻击问题
- android手环通信协议,BLE通信协议
- 从“及其所之既倦”到“吾生也有涯,而知也无涯”