Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
場(chǎng)景
Vue中使用speak-tts插件實(shí)現(xiàn)點(diǎn)擊按鈕后進(jìn)行語(yǔ)音播報(bào)(TTS/文字轉(zhuǎn)語(yǔ)音):
Vue中使用speak-tts插件實(shí)現(xiàn)點(diǎn)擊按鈕后進(jìn)行語(yǔ)音播報(bào)(TTS/文字轉(zhuǎn)語(yǔ)音)_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面可以實(shí)現(xiàn)在360極速瀏覽器中自動(dòng)播放音頻正常,但是在Chrome瀏覽器中,如果
沒有任何事件觸發(fā)的情況下不會(huì)自動(dòng)播放。
為什么不能實(shí)現(xiàn)自動(dòng)語(yǔ)音播報(bào)。
chrome瀏覽器在18年4月起,就在桌面瀏覽器全面禁止了音視頻的自動(dòng)播放功能。
嚴(yán)格地來(lái)說(shuō),是Chrome不允許在用戶對(duì)網(wǎng)頁(yè)進(jìn)行觸發(fā)之前播放音頻。
不光是這樣,在頁(yè)面加載完畢的情況下,用戶沒有click、dbclick、touch等主動(dòng)交互行為,
使用js直接調(diào)用.play() 方法的話,chrome都會(huì)拋出如下錯(cuò)誤:Uncaught (in promise) DOMException;
can-autoplay插件:
can-autoplay - npm
可以檢測(cè)瀏覽器是否支持自動(dòng)播放音頻和視頻。
注:
博客:
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
1、插件安裝
npm install can-autoplay2、插件引入
import canAutoPlay from 'can-autoplay';3、檢測(cè)是否支持自動(dòng)播放
????? canAutoPlay.audio().then(({ result }) => {//支持自動(dòng)播放} else {}});4、用法示例
????? //檢測(cè)是否支持媒體自動(dòng)播放canAutoPlay.audio().then(({ result }) => {//支持自動(dòng)播放if (result === true) {this.speech.speak({ text: "叮叮當(dāng) 叮叮當(dāng) 響了響叮當(dāng)" }).then(() => {});} else {this.$alert("檢測(cè)到您的瀏覽器不支持媒體自動(dòng)播放,是否同意播放音頻","提示",{confirmButtonText: "確定",callback: (action) => {this.audio.play();},});}});5、完整示例代碼
<template></template> <script> import Speech from "speak-tts"; // es6 import canAutoPlay from 'can-autoplay'; export default {name: "audioAutoPlay",data() {return {speech: null,};},mounted() {//初始化speakTTS插件this.speechInit();//定時(shí)器模擬播報(bào)setInterval(() => {//檢測(cè)是否支持媒體自動(dòng)播放canAutoPlay.audio().then(({ result }) => {//支持自動(dòng)播放if (result === true) {this.speech.speak({ text: "叮叮當(dāng) 叮叮當(dāng) 響了響叮當(dāng)" }).then(() => {});} else {this.$alert("檢測(cè)到您的瀏覽器不支持媒體自動(dòng)播放,是否同意播放音頻","提示",{confirmButtonText: "確定",callback: (action) => {this.audio.play();},});}});}, 5000);},methods: {//初始化speakTTS插件speechInit() {this.speech = new Speech();this.speech.setLanguage("zh-CN");this.speech.init().then(() => {});},}, }; </script><style scoped> </style>6、運(yùn)行在谷歌瀏覽器中,如果刷新后沒有任何交互事件則會(huì)提示,如果有則不提示
7、運(yùn)行在360極速瀏覽器中刷新之后即使沒有任何事件,也能支持自動(dòng)播放,不會(huì)彈出提示。
?
總結(jié)
以上是生活随笔為你收集整理的Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: Vue中使用speak-tts插件实现点
- 下一篇: Vue中使用html2canvas和js