解决浏览器播放音频声音,没交互前不播放问题

方法一:通过显示"需要播放音频"弹窗,进行交互之后播放。

javascript 复制代码
 <audio ref="audioRef">
   <source src="./mp3/tishi.mp3" />
 </audio>

<script setup>
  import { ref } from 'vue'
  let audioRef = ref(null)
  
  onMounted(() => {
     if (window.performance.navigation.type === 1) {//重新加载
         audioClick()
       } else {
          handelShow()
       }
  })

  const audioClick = () => {
    let startPlayPromise = audioRef.value.play()
    if (startPlayPromise !== undefined) {
      startPlayPromise.catch(error => {
        if (error.name === 'NotAllowedError') {
          // 弹窗引导用户与页面做交互,只需要一个简单的按钮即可
          // 记得在按钮上绑定一个带有play()方法的回调函数,以element-plus的组件为例
          ElMessageBox.alert('当前正在自动播放音频', '提示', {
            confirmButtonText: '确认',
            callback: () => {
              audioRef.value.play()
            },
          })
        }
      })
    }
  }

  const handelShow = () => {
    audioRef.value.play()
  }
</script>

方法二:通过监听页面点击事件,页面有交互之后播放。

javascript 复制代码
 data() {
   return {
         initIntervalPlay:null,
         firstPlayVid: true,
     }
 },

 
mounted() {
  	const audio =document.getElementById("videoSound");
    let startPlayPromise = audio.play();
    if (startPlayPromise !== undefined) {//判断 首次进入用户没交互时,无法播放问题
        startPlayPromise
            .catch((error) => {
                document.removeEventListener('click', this.playHandle)
                document.addEventListener('click', this.playHandle)
            })
            .then(() => {
                this.intervalPlay()
            });
    }
}
  playHandle() {
                if (this.firstPlayVid) {
                    document.getElementById("videoSound").play()
                    this.intervalPlay()
                    this.firstPlayVid = false
                }
            },
            //循环播报提示音
            intervalPlay(){
                if (this.initIntervalPlay) {
                    window.clearInterval(this.initIntervalPlay)
                }
                this.initIntervalPlay = setInterval(() => {
                    document.getElementById("videoSound").play()
                }, 5000)
            }
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
源码_V_saaskw7 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8508 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀10 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
小乖兽技术11 小时前
C#与C++交互开发系列(二十四):WinForms 应用中嵌入C++ 原生窗体
c++·c#·交互
NUC_Dodamce12 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L12 小时前
Vue 电影导航组件
前端·javascript·vue.js