问题描述

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公众号...

![wechat_qrcode-2019115195545](https://img2018.cnblogs.com/blog/734437/201909/734437-20190927011454542-817571790.jpg)

JavaScript自动播放背景音乐的更多相关文章

  1. 解决在微信中部分IOS不能自动播放背景音乐

    前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,IOS下的safari是无法自动播放音乐的,以至一直以来造成一种错误的认识,iso是无法自动播放媒体资源的.直到微信火 ...

  2. 解决ios下的微信打开的页面背景音乐无法自动播放

    后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...

  3. 微信h5页面audio标签在ios下不能自动播放

    背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...

  4. H5中背景音乐无法自动播放问题

    苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载 ...

  5. 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放

    我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...

  6. 微信h5,背景音乐自动播放

    移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...

  7. 解决ios下的微信页面背景音乐无法自动播放问题

    在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误 ...

  8. JavaScript一个页面中有多个audio标签,其中一个播放结束后自动播放下一个,audio连续播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于h5中背景音乐的自动播放

    音乐的自动播放属性,这里也介绍一下: <audio controls="controls" autoplay="autoplay"> <sou ...

随机推荐

  1. Springboot + Stopping service [Tomcat]+ Process finished with exit code 0

    在Springboot 的版本为: <version>1.5.10.RELEASE</version> 原因:代码中有非法格式的结构,及代码写错啦,例如: <result ...

  2. Linux--shell的awk--10

    一.awk介绍 全称:由Aho Weinberger Kernaighan三个人的首字母组合而成 1970年第一次出现在Unix机器上,后来在开源领域使用它 awk是一种单独的编程语言解释器 awk报 ...

  3. HDU 4417

    题意略. 思路: 仔细思考这个题目会发现,它其实是要你查询两次,第一是要规定l,r的范围,第二是要在范围内查询小于等于H的个数.所以有的人说要用主席树. 现在,如果我们能省去范围内对h的查询呢?也就是 ...

  4. spring-cloud-kubernetes与k8s的configmap

    本文是<spring-cloud-kubernetes实战系列>的第六篇,主要内容是在kubernetes上部署一个java web应用,该应用使用了spring-cloud-kubern ...

  5. Educational Codeforces Round 44#985DSand Fortress+二分

    传送门:送你去985D: 题意: 你有n袋沙包,在第一个沙包高度不超过H的条件下,满足相邻两个沙包高度差小于等于1的条件下(注意最小一定可以为0),求最少的沙包堆数: 思路: 画成图来说,有两种可能, ...

  6. 玲珑杯”ACM比赛 Round #18 A -- 计算几何你瞎暴力(瞎暴力)

    题目链接:http://www.ifrog.cc/acm/problem/1143?contest=1020&no=0 题解:就是瞎暴力具体多暴力看一下代码就知道了. #include < ...

  7. SpringBoot发送邮箱验证码

    一.开启QQ邮箱服务 (1)登陆QQ找到设置,点击账户 (2)往下拉,开启POP3/SMTP服务和IMAP/SMTP服务 当开启IMAP/SMTP会有一串密文密码,保存起来后面要用到 二.spring ...

  8. Java常见面试题-1

    问: 1 面向对象的特征有哪些方面? 2 访问修饰符public,private,protected,以及不写(默认)时的区别? 3  String 是最基本的数据类型吗? 对象类型 基本类型 4  ...

  9. 【Offer】[4] 【二维数组中的查找】

    题目描述 思路分析 Java代码 代码链接 题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数 ...

  10. SpringBoot+SpringMVC+MyBatis快速整合搭建

    作为开发人员,大家都知道,SpringBoot是基于Spring4.0设计的,不仅继承了Spring框架原有的优秀特性,而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程.另外Spr ...