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 ...
随机推荐
- Visual Studio 中 Build、Rebuild 、 Clean 之间的区别是什么?
今天翻看c-sharpcorner技术网站看到了这样一篇小记,标题为:What Is The Difference Between Build, Rebuild And Clean In Visual ...
- 【目标检测】RCNN算法详解
网址: 1. https://blog.csdn.net/zijin0802034/article/details/77685438 (box regression 边框回归) 2. https:// ...
- HTML5实时语音通话聊天,MP3压缩传输3KB每秒
目录 一.把玩方法 二.技术特性 (1)数据传输 (2)音频采集和编码 (3)音频实时接收和播放 三.应用场景 自从Recorder H5 GitHub开源库优化后,对边录边转码成小语音片段文件实时上 ...
- python学习——列表和元组
一.列表 1)列表介绍 列表是Python内置的一种数据类型. >一组有序项目的集合(从第一个成员序号为0开始依次递增排序) >可变的数据类型(可进行增删改查) >列表中可以包含任何 ...
- [Mysql] GroupBy 分组,按天、周、月
简单说明: 最近在做报表功能的时候,需要将数据按天.周和月进行合并展示(数据记录都是按天20190701). 正文: 说明:数据表中date都是int类型:如 20190701 一.按天 SELECT ...
- C#开发BIMFACE系列12 服务端API之文件转换
系列目录 [已更新最新开发文章,点击查看详细] 在代表模型的源文件上传到BIMFACE后,一般会进行三种API调用操作: 发起模型转换 查询转换状态 如转换成功,获取模型转换后的BIM数据 在 ...
- mybatis 源码分析(八)ResultSetHandler 详解
本篇博客就是 myabtis 系列的最后一篇了,还剩 ResultSetHandler 没有分析:作为整个 mybatis 最复杂最繁琐的部分,我不打算按步骤一次详解,因为里面的主要内容就是围绕 re ...
- 爬虫工程师分享:三步就搞定 Android 逆向
本文源于我近期的一次公司内部分享,通过逆向某款 APP 来介绍逆向过程.由于仅作为学习用途,APP 的相关信息会被遮盖,敬请理解. 关于逆向 逆向--包括但不限于通过反编译.Hook 等手段,来解析一 ...
- P1726 上白泽慧音 tarjan 模板
P1726 上白泽慧音 这是一道用tarjan做的模板,要求找到有向图中最大的联通块. #include <algorithm> #include <iterator> #in ...
- POJ-2406Power Strings-KMP+定理
Power Strings 题意:给一个字符串S长度不超过10^6,求最大的n使得S由n个相同的字符串a连接而成,如:"ababab"则由n=3个"ab"连接而 ...