audio解决不能自动播放问题
问题描述
无法实现打开网页就能自动播放音乐
正常情况下使用autoplay即可实现自动播放,但是现在打开网页该参数无效
原因分析:
根据最新的规范,Chrome系浏览器,没有交互过的网站默认禁止自动播放,所以现在使用autoplay,打开网页无法实现自动播放.
解决方案:
html
<audio src="1.mp3" id="audios" autoplay preload controls></audio>
js部分
var audio = document.getElementById('audios');
function audioAutoPlay(audio){
play = function(){
audio.play();
document.removeEventListener("touchstart",play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart",play, false);
}
//每隔2秒检测是否播放音乐,播放则停止定时器
let t = setInterval(() => {
if(audio.paused === false){
console.log('停止定时器');
clearInterval(t);
}else{
console.log('执行定时器');
audioAutoPlay(audio);
}
},2000);
audio解决不能自动播放问题的更多相关文章
- audio标签的自动播放(ios)
0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.c ...
- iphone在微信中audio 音频无法自动播放
问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...
- 原生js设置audio在谷歌浏览器自动播放
https://www.cnblogs.com/sandraryan/ 谷歌浏览器更新后禁止了autoplay功能,但是有时候可能会需要自动播放. 研究了一段代码. <!DOCTYPE html ...
- 100%解决ios上audio不能自动播放的问题
由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了. 解决方法: 首先,创建audio标签:<audi ...
- 解决audio和video在手机端无法自动播放问题
各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放 <audio src="music/bg.mp3" autoplay loop contro ...
- 【转】一种解决h5页面背景音乐不能自动播放的方案
原文:http://www.cnblogs.com/wmhuang/p/5452259.html --------------------------------------------------- ...
- 一种解决h5页面背景音乐不能自动播放的方案
场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeRea ...
- 微信中音乐播放在ios不能自动播放解决
在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...
- 解决ios下的微信页面背景音乐无法自动播放问题
在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误 ...
- ios audio不能自动播放
今天做了一个简单的落地页项目,就是类似于手机微信上经常看到的滑动效果.因为公司要求需要自己开发,所以我就用swiper+swiper.animate开发,开发速度很快,只不过最后音乐哪里出现了一点小b ...
随机推荐
- python一招完美搞定Chromedriver的自动更新
日常的web自动化过程中,我们常常用python selenium库来操纵Chrome浏览器实现网页的自动化.这其中有个比较头疼的问题:Chrome的更新频率非常频繁,与之对应的Chromedrive ...
- 痞子衡嵌入式:理解i.MXRT中FlexSPI外设lookupTable里配置访问行列混合寻址Memory的参数值
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT中FlexSPI外设lookupTable里配置访问行列混合寻址Memory的参数值. 关于 FlexSPI 外设的 loo ...
- 基于electron+vue+element构建项目模板之【改造项目篇】
1.概述 开发平台OS:windows 开发平台IDE:vs code 上一篇中已完成了electron-vue项目的创建,本篇章中则介绍在此项目基础上进行取消devtools的安装.项目结构的改造. ...
- 黑马程序员关于MongoDB的教程
基础:https://files.cnblogs.com/files/sanduzxcvbnm/mongodb_base.pdf 理解 MongoDB的业务场景.熟悉MongoDB的简介.特点和体系结 ...
- C#-02 传入参数的一些用法2
C#_02 参数应用2 一.关于 "ref" 局部变量和 "ref" 返回 在前面已经明白了 ref 关键词传递一个对象引用给方法调用,这样在方法中对对象修改过 ...
- 【.NET 6+Loki+Grafana】实现轻量级日志可视化服务功能
前言:日志功能是几乎所有程序或系统都必备的一个功能.该文章通过使用Loki+Grafana来实现日志记录与可视化查询,欢迎围观. 有关环境: 操作系统:WIN 10 .NET环境:.NET 6 开发环 ...
- golang开发:go并发的建议(完)
上次说了一下Go语言布道师 Dave Cheney对Go并发的建议,个人觉得最重要的一条,这次主要想说一下这个. 8.3. Never start a goroutine without knowni ...
- 在某网站的登录页面登录时如果选择“记住用户名”,登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页面中存在一个超链接,单击超链接可以链接到第三个页面查看信息。若选择“
Response实现登录并记录用户名和密码信息 在某网站的登录页面登录时如果选择"记住用户名",登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页 ...
- Error creating bean with name ‘com.ai.ecs.ecop.pointExchange.service.NewGoodsService‘
Error creating bean with name 'com.ai.ecs.ecop.pointExchange.service.NewGoodsService' 查看服务注册中心的格式是否正 ...
- python字典推导&&列表推导&&输出随机数
字典推导: x = ['A', 'B', 'C', 'D'] y = ['Alice', 'Bob', 'Cecil', 'David'] print({i:j for i,j in zip(x,y) ...