https://www.cnblogs.com/sandraryan/

谷歌浏览器更新后禁止了autoplay功能，但是有时候可能会需要自动播放。

研究了一段代码。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <audio src="" controls loop id="music"></audio>

  <script>

    //封装函数让谷歌浏览器自动播放

    function play() {

      var music = document.getElementById("music"); 
　　　　//判断如果音乐停止播放中，就让他播放。。。

      if (music.paused) {

        music.paused = false;

        music.play();

      }

    }
　　　//调用函数

    setInterval(play(), 1);

  </script>

</body>

</html>

就酱。

原生js设置audio在谷歌浏览器自动播放的更多相关文章

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

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

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

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

  3. 原生js文字标签云上下滚动播放

    效果:http://hovertree.com/texiao/js/25/ 效果图: 代码如下: <!DOCTYPE html> <html> <head>< ...

  4. 原生js设置rem

    使用rem是为了界面响应不同尺寸的手机,引入下面的方法就可以使用rem了. setFontSize: function (doc, win) { var docEl = doc.documentEle ...

  5. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. egret 篇——关于ios环境下微信浏览器的音频自动播放问题

    前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...

  7. ios设置音乐audio自动播放

    因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...

  8. ios audio不能自动播放

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

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

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

随机推荐

  1. bzoj2467 生成树

    传送门 生成树计数裸题,因为模数不是质数所以要用辗转相除的高斯消元. de了很久的bug然后发现一个变量A赋值后下一行又申明了一个新的临时变量A(: //Achen #include<algor ...

  2. webpack--安装，使用

    1. webpack 1.1. webpack介绍 webpack是一个资源的打包工具,目前最新为webpack3,可以将 .js, .css , image等静态资源当做一个模块来进行打包,那么每一 ...

  3. Listview的条目item内的点击响应事件

    还是这张图 这里的历史列表就是一个ListView,抛开该界面中ScrollView或者RecycleView与该ListView会有冲突,所谓的冲突,说白了就是父控件与子控件两者间的关系冲突,该冲突 ...

  4. 【水滴石穿】react-native-book

    先推荐一个学习的地址:https://ke.qq.com/webcourse/index.html#cid=203313&term_id=100240778&taid=12778558 ...

  5. PHP核心编程--目录操作（包含文件操作）

    一.目录操作 1.    创建目录 创建目录mkdir(目录名称)  //返回值为布尔 一次性创建主目录及其子目录 判断是不是一个目录is_dir  //返回true,false 判断目录或文件是否存 ...

  6. (转） Hibernate持久化类与主键生成策略

    http://blog.csdn.net/yerenyuan_pku/article/details/65462930 Hibernate持久化类 什么是持久化类呢?在Hibernate中持久化类的英 ...

  7. springboot集成mongoDB 异常认证

    1.springboot连接mongoDB 出现异常认证 异常详情: com.mongodb.MongoSecurityException: Exception authenticating Mong ...

  8. Effective Modern C++：06lambda表达式

    lambda表达式实际上是语法糖,任何lambda表达式能做到的,手动都能做到,无非是多打几个字.但是lambda作为一种创建函数对象的手段,实在太过方便,自从有了lambda表达式,使用复杂谓词来调 ...

  9. [React Native]去掉WebStorm中黄色警告

    用WebStorm开发RN难免会碰到一大堆黄色警告.就像下面这样. 其实这个错误并不会影响开发,但是作为一个上升处女座的,我很难忍.于是各种想办法. 上网查了半天发现这篇文章 http://blog. ...

  10. Python之路,Day1 - Python基础1 --转自金角大王

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...