vue背景音频播放以及failed because the user didn‘t interact with the document first问题

news/2024/10/19 7:31:25/

先说一下报错的原因
在用户没有任何操作的情况下直接播放背景音乐是不行的,有的浏览器支持有的不支持。错误的意思是,在尝试访问用户的文件系统或数据库之前,用户未与文档进行任何交互。

背景音频的使用
第一种

javascript"><audio id="background-music" style="visibility: visible;" src="xxxxxx.mp3"></audio>mounted() {//当鼠标点击后就有了交互事件,再获取音频播放document.addEventListener('click', (event) =>{console.log('开始音频')const audio = document.getElementById('background-music');audio.play();})//   document.addEventListener('keydown', function(event) {//     console.log('按下键盘键码:');//   });
},

第二种

javascript">mounted() {//当鼠标点击后就有了交互事件,再获取音频播放document.addEventListener('click', (event) =>{let audio = new Audio();audio.controls = false; //这样控件才能显示出来audio.src = 'xxxxx.mp3'; //音乐的路径document.body.appendChild(audio);audio.play();})
}

http://www.ppmy.cn/news/1509452.html

相关文章

003 启动后端商品微服务

文章目录 renren-fast模块application.ymlapplication-dev.yml cubemall-common父模块pom cubemall-product模块pomapplication.yml.gitignore renren-generatorapplication.yml cube_admin.sql https://gitee.com/renrenio https://baomidou.com/getting-started/install/ htt…

【车载开发系列】使用J-Flash下载Hex文件

【车载开发系列】使用J-Flash下载Hex文件 【车载开发系列】使用J-Flash下载Hex文件 【车载开发系列】使用J-Flash下载Hex文件概要1. 打开J-Flash软件2. 创建新的工程3. 选择芯片类型4. 打开HEX文件5. 连接芯片6. 擦除目标扇区&#xff08;可选&#xff09;7. 烧写文件到目标扇区…

苹果公司最新动态:iOS / iPadOS 18 开发者预览版 Beta 6 发布,iPhone SE 4支持 Apple Intelligence

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 苹果公司&#xff0c;作为全球科技行业的领军企业&#xff0c;一直在不断地推动产品创新和市场扩张。近期&#xff0c;苹果公司有多项新动态引起…

mysql速起架子

wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.21-linux-glibc2.12-x86_64.tar.xz 下载mysql tar xvJf mysql-8.0.21-linux-glibc2.12-x86_64.tar.xz 解压 mv mysql-8.0.21-linux-glibc2.12-x86_64 mysql-8.0 改名 去到bin目录 cd bin mkdir data gr…

数据结构之排序(下)

片头 嗨&#xff01;小伙伴们&#xff0c;咱们又见面啦&#xff0c;在上一篇数据结构之排序(上)中&#xff0c;我们学习了直接插入排序、冒泡排序和希尔排序&#xff0c;今天我们继续学习排序这一块&#xff0c;准备好了吗&#xff1f;Ready Go ! ! ! 一、选择排序 1.1 基本思…

什么是令牌桶算法?工作原理是什么?使用它有哪些优点和注意事项?

大家好&#xff0c;我是鸭鸭&#xff01; 此答案节选自鸭鸭最近弄的面试刷题神器面试鸭 &#xff0c;更多大厂常问面试题&#xff0c;可以点击下面的小程序进行阅读哈&#xff01; 目前这个面试刷题小程序刚出&#xff0c;有网页和小程序双端可以使用&#xff01; 回归面试题…

Linux Shell测试端口的TLS协议

Shell脚本使用nmap工具来扫描目标服务器的所有开放端口&#xff0c;并列出每个端口支持的TLS协议和加密套件。这对于检查服务器的安全配置和确保只支持安全的TLS版本非常有用。 基于 nmap 工具和ssl-enum-ciphers脚本 #!/bin/bash# 检查是否提供了目标服务器IP或域名 if [ -z…

ios语言基础

Swift 1. 变量和常量 变量&#xff1a;使用 var 关键字定义&#xff0c;可以修改其值。常量&#xff1a;使用 let 关键字定义&#xff0c;值一旦设定就不能修改。 var variableName 42 variableName 50let constantName 42 // constantName 50 // 这是错误的&#xff0c…