问题描述

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. 一个接口多个实现类的Spring注入方式

    1. 首先, Interface1 接口有两个实现类 Interface1Impl1 和 Interface1Impl2 Interface1 接口: package com.example.serv ...

  2. Linux任务调度(8)

    crond任务调度: 是指系统在某个时间执行特定的命令或程序. 分类:1.系统工作,有些重要的工作必须周而复始地执行,如病毒扫描等:2.个别用户工作,个别用户可能希望执行某些程序,如mysql数据库备 ...

  3. python 14 装饰器

    目录 装饰器 1. 开放封闭原则 装饰器 1. 开放封闭原则 扩展是开放的,增加新的功能:修改源码(修改已经实现的功能)是封闭的. 在不改变源码及调用方式的前提下额外增加新的功能. # 版一: imp ...

  4. 基于.net EF6 MVC5+WEB Api 的Web系统框架总结(2)-业务项目搭建

    本节将介绍如何进行业务项目搭建. 本业务项目示例是简单的企业信息管理功能,业务项目采用Code First方式,搭建包括: 创建实体项目 创建实体数据表映射 创建业务处理项目 创建业务Web项目 搭建 ...

  5. 六.html基础

    web前端前几个月学过一段时间,现在在学习一遍,当作复习,最重要的看看web渗透常用的标签! <html></html>  不带任何属性 <body></bo ...

  6. 2019-04-23-Python爬取有声小说

    目录 Python爬取有声小说 摘要 1.获取下载链接 2.分析规律,循环爬取 3.保存到本地,批量命名 4.界面设计 5.效果展示 Python爬取有声小说 通过python爬取网站的资源,实现批量 ...

  7. 什么是Scrum?

    转自:http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html SCRUM 是一个用于开发和维护复杂产品的框架 Scrum 是一个 ...

  8. 牛客Wannafly挑战赛23 B.游戏

    游戏 题目描述 小N和小O在玩游戏.他们面前放了n堆石子,第i堆石子一开始有ci颗石头.他们轮流从某堆石子中取石子,不能不取.最后无法操作的人就输了这个游戏.但他们觉得这样玩太无聊了,更新了一下规则. ...

  9. andriod开发--使用Http的Get和Post方式与网络交互通信

    package com.example.a350773523.myapplication; import android.os.AsyncTask; import android.support.v7 ...

  10. MPA JS CSS预处理方案

    1.WebPack 添加配置文件webpack.config.js,直接在当前目录运行 webpack. var basepath = '/root/webapps/happ'; var glob = ...