JavaScript自动播放背景音乐
问题描述
js控制audio自动播放音乐时报错:
Uncaught (in promise) DOMException

我的报错之前的代码:
<audio id="myaudio" src="assets/audio/芒种.mp3" controls="controls" loop="true" hidden="true">
</audio>
$(function () {
var myAuto = document.getElementById('myaudio');
myAuto.play();
})
网上搜原因说是:
这是因为,Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频。其实,严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频,而视频其实是不受限制的。但因为视频文件同样包含了音频,所以也一同被禁止了。Chrome这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。
内容来源于:http://www.nooong.com/docs/chrome_video_autoplay.htm
解决办法:
在上面的html代码中加入autoplay,如下:
<audio id="myaudio" src="assets/audio/芒种.mp3" controls="controls" autoplay loop="true" hidden="true">
</audio>
然后就可以正常播放了,我的Chrome版本:

完成
如果喜欢的话,欢迎关注weyoung公众号...
JavaScript自动播放背景音乐的更多相关文章
- 解决在微信中部分IOS不能自动播放背景音乐
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,IOS下的safari是无法自动播放音乐的,以至一直以来造成一种错误的认识,iso是无法自动播放媒体资源的.直到微信火 ...
- 解决ios下的微信打开的页面背景音乐无法自动播放
后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...
- 微信h5页面audio标签在ios下不能自动播放
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...
- H5中背景音乐无法自动播放问题
苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载 ...
- 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放
我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...
- 微信h5,背景音乐自动播放
移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...
- 解决ios下的微信页面背景音乐无法自动播放问题
在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误 ...
- JavaScript一个页面中有多个audio标签,其中一个播放结束后自动播放下一个,audio连续播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于h5中背景音乐的自动播放
音乐的自动播放属性,这里也介绍一下: <audio controls="controls" autoplay="autoplay"> <sou ...
随机推荐
- .net core 在 Docker 开发下的巨坑
一,Docker 的安装 Windows 安装 Docker 官方文档: https://docs.microsoft.com/zh-cn/virtualization/windowscontain ...
- lrzsz——一款好用的文件互传工具
日常开发中,经常需要在linux服务器和本地计算机(Windows或者Mac)两者之间传输文件,这时候就需要用到文件传输工具了. 最近偶然发现一款很好用的文件互传工具: lrzsz .墙裂推荐,好用指 ...
- Google Protocol Buffer Basics: C++
proto文件简介 每个元素上的"= 1","= 2"标记标识该字段在二进制编码中使用的唯一"标记" 每个字段有三个可选修饰符 requir ...
- 【在 Nervos CKB 上做开发】Nervos CKB脚本编程简介[2]:脚本基础
CKB脚本编程简介[2]:脚本基础 原文作者:Xuejie 原文链接:Introduction to CKB Script Programming 2: Script 本文译者:Shooter,Jas ...
- C#开发BIMFACE系列6 服务端API之获取文件信息
在<C#开发BIMFACE系列4 服务端API之源上传文件>.<C#开发BIMFACE系列5 服务端API之文件直传>两篇文章中详细介绍了如何将本地文件上传到BIMFACE服务 ...
- Delphi - 获取文件大小
GetFileSize获取文件大小 封装成如下函数,可以直接使用: ///函数功能:获取文件大小,单位取KB,小数自动进位 ///参数:sFilePath文件全路径 ///Result: 成功是返回文 ...
- Storm 系列(七)—— Storm 集成 Redis 详解
一.简介 Storm-Redis 提供了 Storm 与 Redis 的集成支持,你只需要引入对应的依赖即可使用: <dependency> <groupId>org.apac ...
- 【Edu49 1027D】 Mouse Hunt DFS 环
1027D. Mouse Hunt:http://codeforces.com/contest/1027/problem/D 题意: 有n个房间,每个房间放置捕鼠器的费用是不同的,已知老鼠在一个房间x ...
- HDU-4027-Can you answer these queries?线段树+区间根号+剪枝
传送门Can you answer these queries? 题意:线段树,只是区间修改变成 把每个点的值开根号: 思路:对[X,Y]的值开根号,由于最大为 263.可以观察到最多开根号7次即为1 ...
- codeforces 764 C. Timofey and a tree(dfs+思维)
题目链接:http://codeforces.com/contest/764/problem/C 题意:给出一个树,然后各个节点有对应的颜色,问是否存在以一个点为根节点子树的颜色都一样. 这里的子树颜 ...