当前位置: 首页 > article >正文

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

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

 <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>

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

 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)
            }

http://www.kler.cn/a/533510.html

相关文章:

  • 深度探索DeepSeek-R1:AI大模型的本地应用与个人知识库构建
  • Prisma【详解】 where 查询
  • RabbitMQ深度探索:简单实现 MQ
  • 低通滤波算法的数学原理和C语言实现
  • 「全网最细 + 实战源码案例」设计模式——策略模式
  • centos stream 9 安装 libstdc++-static静态库
  • 设计模式Python版 外观模式
  • 国产化创新 守护开放边界网络安全
  • cocos spine执行动画报错Cannot read properties of null (reading ‘data‘)
  • Android原生开发入门
  • Unity 2D实战小游戏开发跳跳鸟 - 记录显示最高分
  • leetcode——子集(java)
  • Python实现CAN FD 通信(基于PCAN开发CAN FD测试工具)
  • vue3新建组件库项目并上传到私库
  • 实时波形与频谱分析———傅立叶变换
  • RabbitMQ深度探索:消息幂等性问题
  • MongoDB 查询文档
  • 哈夫曼树原理及其C语言实现
  • 时间对象管理相关
  • gesp(C++六级)(13)洛谷:P11375:[GESP202412 六级] 树上游走
  • 因果推断与机器学习—可解释性、公平性和因果机器学习
  • go运算符
  • Redis缓存穿透、击穿、雪崩介绍以及解决方案
  • vscode 设置在编辑器的标签页超出可视范围时自动换行(workbench.editor.wrapTabs)
  • SpringBoot 基于个性化定制的智慧校园管理系统设计与开发 - 论文、开题报告
  • 搭建Python环境:为量化交易做准备