问题描述

无法实现打开网页就能自动播放音乐

正常情况下使用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解决不能自动播放问题的更多相关文章

  1. audio标签的自动播放(ios)

    0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.c ...

  2. iphone在微信中audio 音频无法自动播放

    问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...

  3. 原生js设置audio在谷歌浏览器自动播放

    https://www.cnblogs.com/sandraryan/ 谷歌浏览器更新后禁止了autoplay功能,但是有时候可能会需要自动播放. 研究了一段代码. <!DOCTYPE html ...

  4. 100%解决ios上audio不能自动播放的问题

    由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了. 解决方法: 首先,创建audio标签:<audi ...

  5. 解决audio和video在手机端无法自动播放问题

    各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放 <audio src="music/bg.mp3" autoplay loop contro ...

  6. 【转】一种解决h5页面背景音乐不能自动播放的方案

    原文:http://www.cnblogs.com/wmhuang/p/5452259.html --------------------------------------------------- ...

  7. 一种解决h5页面背景音乐不能自动播放的方案

    场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeRea ...

  8. 微信中音乐播放在ios不能自动播放解决

    在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...

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

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

  10. ios audio不能自动播放

    今天做了一个简单的落地页项目,就是类似于手机微信上经常看到的滑动效果.因为公司要求需要自己开发,所以我就用swiper+swiper.animate开发,开发速度很快,只不过最后音乐哪里出现了一点小b ...

随机推荐

  1. 3.云原生之Docker容器三大核心概念介绍

    转载自:https://www.bilibili.com/read/cv15181760/?from=readlist docker search --no-trunc=false [镜像名称] #搜 ...

  2. Elasticsearch:fielddata 介绍

    默认情况下,大多数字段都已编入索引,这使它们可搜索. 但是,脚本中的排序,聚合和访问字段值需要与搜索不同的访问模式. 搜索需要回答"哪个文档包含该术语?"这个问题,而排序和汇总则需 ...

  3. k8s中安装redis6集群

    注意:第二步不用操作了,yaml文件仅供参考 1.创建Namespace kubectl apply -f Namespace.yaml apiVersion: v1 kind: Namespace ...

  4. 使用Docker Compose部署SpringCloud项目docker-compose.yml文件示例

    注意各组件之间的依赖关系 microservice-discovery-eureka: image: reg.itmuch.com/microservice-discovery-eureka port ...

  5. BZOJ2654 tree (wqs二分)

    题目描述 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树. 题目保证有解.   一个最小生成树问题,但是我们要选need条白边,我们用g(i)表示选取i条 ...

  6. RAID5 IO处理之条带读代码详解

    除了对齐读流程中读失败通过条带重试的场景会进入到条带读,当IO覆盖范围超过一个chunk时也会进入条带读(如向chunk为4K的RAID下发起始位置为1K大小为4K的IO),接下来我们就这部分逻辑进行 ...

  7. 前端框架Vue------>第一天学习(2) v-if

    API:https://cn.vuejs.org/v2/api/#key 文章目录 5.条件渲染 5.1 . v-if 5.2 . v-else-if 6 .列表渲染 7 .事件监听 5.条件渲染 5 ...

  8. 累加和为 K 的子数组问题

    累加和为 K 的子数组问题 作者:Grey 原文地址: 博客园:累加和为 K 的子数组问题 CSDN:累加和为 K 的子数组问题 题目说明 数组全为正数,且每个数各不相同,求累加和为K的子数组组合有哪 ...

  9. java程序员在交接别人的工作时如何保证顺利交接?

    序言 各位好啊,我是会编程的蜗牛,作为java开发者,尤其是在职场混迹了多年的老手,肯定会遇到同事离职的情况,或者自己跳槽的情况,这些都免不了需要做好交接工作,不管是别人交接给我们,还是我们交接给别人 ...

  10. 微信小程序仿手机相册组件——简单版

    仿手机相册的微信小程序组件,具备点击图片预览,长按图片出现多选框功能,读者可以根据自己的需求,依据现有数据进行删除等操作.话不多说,先看效果: 初始效果:  长按效果: 选择效果: 注意:当前只是简单 ...