问题描述

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

正常情况下使用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. Windows SMTP服务器的中继列表

    今天在一台Windows 2019的SMTP服务器上想增加一个匿名中继的客户端地址.登录到服务器后发现原来的设置丢失了,而且原来的允许列表也不见了.界面变成了这样. https://www.cnblo ...

  2. 基于.NET6的简单三层管理系统

    前言 笔者前段时间搬砖的时候,有了一个偷懒的想法:如果开发的时候,简单的CURD可以由代码生成器完成,相应的实体.服务都不需要再做额外的注册,这样开发人员可以省了很多事. 于是就开了这个项目,期望实现 ...

  3. 怎样编写正确、高效的 Dockerfile

    基础镜像 FROM 基础镜像 基础镜像的选择非常关键: 如果关注的是镜像的安全和大小,那么一般会选择 Alpine: 如果关注的是应用的运行稳定性,那么可能会选择 Ubuntu.Debian.Cent ...

  4. git pull提示如下信息时候的操作

    执行git pull时提示信息如下: There is no tracking information for the current branch. Please specify which bra ...

  5. kubeoperator升级步骤

    当前kubeoperator版本是3.6.0 官方文档:https://kubeoperator.io/docs/installation/install/ # 离线升级需要提前下载离线安装包,并解压 ...

  6. 7.prometheus监控多个MySQL实例

    mysqld_exporter集中部署 集中部署,就是说我们将所有的mysqld_exporter部署在同一台服务器上,在这台服务器上对mysqld_exporter进行统一的管理,下面介绍一下集中部 ...

  7. PostgreSQL 创建数据库

    PostgreSQL 创建数据库可以用以下三种方式: 1.使用 CREATE DATABASE SQL 语句来创建. 2.使用 createdb 命令来创建. 3.使用 pgAdmin 工具. CRE ...

  8. 如何通过 Java 代码隐藏 Word 文档中的指定段落

    在编辑Word文档时,我们有时需要将一些重要信息保密. 因此,可以隐藏它们以确保机密性. 在本文中,将向您介绍如何通过 Java 程序中的代码隐藏 Word 文档中的特定段落.下面是我整理的具体步骤, ...

  9. Oracle索引和事务

    1. 什么是索引?有什么用? 1)索引是数据库对象之一,用于加快数据的检索,类似于书籍的目录.在数据库中索引可以减少数据库程序查询结果时需要读取的数据量,类似于在书籍中我们利用索引可以不用翻阅整本书即 ...

  10. 2022-09-11-Typecho_RSS优化显示全文

    layout: post cid: 26 title: Typecho RSS优化显示全文 slug: 26 date: 2022/09/11 15:53:38 updated: 2022/09/11 ...