问题描述

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. mybatis 源码分析(四)一二级缓存分析

    本篇博客主要讲了 mybatis 一二级缓存的构成,以及一些容易出错地方的示例分析: 一.mybatis 缓存体系 mybatis 的一二级缓存体系大致如下: 首先当一二级缓存同时开启的时候,首先命中 ...

  2. rabbitmq集群操作与启停

    一.rabbitmq集群必要条件 1.1. 绑定实体ip,即ifconfig所能查询到的绑定到网卡上的ip,以下是绑定方法 1.2. 配置域名映射到实体ip 二.启动停止 2.1 停止 2.2 启动 ...

  3. (四十九)c#Winform自定义控件-下拉框(表格)

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...

  4. 从 View 的四个构造方法说起

    View 类的四个构造函数 写过自定义 View 的都知道,View 有四个构造函数,一般大家都知道第一个构造方法是简单的在代码中new View 的时候调用的,第二个构造方法使用最广泛,是对应的生成 ...

  5. 配置Office Excel运行Python宏脚本

    基本环境 名称 版本 操作系统 Windows 10 x64 Office 2016 安装Python 1.下载Python安装包 登录https://www.python.org/downloads ...

  6. Android进阶之路(2)-详解MVP

    ### MVP简介 >MVP 全称:Model-View-Presenter :MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的[地方](https://baike.baidu.co ...

  7. vue.js纯前端处理如何将后台返回来的csv数据导出成csv文件

    需要实现一个下载csv文件的功能,但后台没有对这个下载文件进行处理,而是将csv数据传给前台而已,需要前台做一下处理. 这是按钮的代码: <a> <el-button size=&q ...

  8. CF 551 D.Serval and Rooted Tree 树形DP

    传送门:http://codeforces.com/contest/1153/problem/D 思路: 这道题想了一天,突发奇想,就是维护每个点两个值,第几大和第几小,就可以有传递性了. #incl ...

  9. Gym 100956 A Random Points on the Circle

    二分答案. 对于每次二分后的答案来说, 先倍增序列,通过 two point 来找到 以每个点为起点的最优的符合答案的在哪里. 然后可以DFS树去判断他的前k祖先之间的距离是不是大于k. 常数有点大. ...

  10. JavaScript漫谈之理解类型操作符typeof

    在本文中,将简述JavaScript类型系统和数据类型,以及如何使用typeof操作符执行类型检查. 还讲解了使用typeof操作符进行某些数据类型检查是不完善的,并介绍其他几种类型检查的方法. 更多 ...