问题描述

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

正常情况下使用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. 【微服务】Nacos初体验

    SpringCloud - Nacos初体验 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长 ...

  2. 使用nginx代理nexus,不是/根路径

    location /nexus/ { proxy_pass http://192.168.0.218:8081/; proxy_set_header Host $host:$server_port; ...

  3. Service中spec.type 字段的值:ClusterIP和NodePort理解

    ClusterIP(默认) 在群集中的内部IP上公布服务,这种方式的 Service(服务)只在集群内部可以访问到 [root@master ~]# kubectl get service -n te ...

  4. 对list集合中元素按照某个属性进行排序

    test 为集合中的元素类型(其中包含i属性) Collections.sort(list,(test o1, test o2) -> { if (o1.getI() != o2.getI()) ...

  5. Linux Subsystem For Android 11!适用于Debian GNU/Linux的Android子系统,完美兼容ARM安卓软件!

    本文将讲述如何在Debian Stable 系统安装一个Android 11子系统,并且这个子系统带有Houdini可以兼容专为移动设备开发的ARM软件.在root权限下,编辑/etc/apt/sou ...

  6. 不安装运行时运行 .NET 程序 - NativeAOT

    大家好,先祝大家国庆快乐.不过大家看到这篇文章的时候估计已经过完国庆了 . 上一篇我们写了如何通过 SelfContained 模式发布程序(不安装运行时运行.NET程序)达到不需要在目标机器上安装 ...

  7. 从SpringBoot启动,阅读源码设计

    目录 一.背景说明 二.SpringBoot工程 三.应用上下文 四.资源加载 五.应用环境 六.Bean对象 七.Tomcat服务 八.事件模型 九.配置加载 十.数据库集成 十一.参考源码 服务启 ...

  8. python-绘图与可视化

    python 有许多可视化工具,但本书只介绍Matplotlib.Matplotlib是一种2D的绘图库,它可以支持硬拷贝和跨系统的交互,它可以在python脚本,IPython的交互环境下.Web应 ...

  9. Go_Goroutine详解

    Goroutine详解 goroutine的概念类似于线程,但 goroutine是由Go的运行时(runtime)调度和管理的.Go程序会智能地将 goroutine 中的任务合理地分配给每个CPU ...

  10. How to Create DLL(Dynamic link library)

    该文章属于在YouTube视频上看到的,链接如下: https://www.youtube.com/watch?v=EmDJsl7C9-k&t=3s 1.创建一个工程并建立一个控制台程序 2. ...