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. Laravel访问出错错误信息：`Warning: require(/vendor/autoload.php): failed to open stream: No such file or dire

    错误信息:`Warning: require(/http/www.mywakavLee.cn/bootstrap/../vendor/autoload.php): failed to open str ...

  2. HTML 5+ SDK 更新日志

    http://ask.dcloud.net.cn/article/103 离线打包 SDK App 最新Andorid平台SDK下载新版本Android SDK使用aar方式发布,部分资源和jar包整 ...

  3. Codeforces Round #275 (Div. 2) A. Counterexample【数论/最大公约数】

    A. Counterexample time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  4. GenericServlet vs HttpServlet

     1>>>>>>>> Difference between HttpServlet vs Generic Severlet javax.servlet. ...

  5. U盘安装win7 raid设置

    需要先安装驱动!  大白菜U盘安装界面有一个选择驱动的选项,选择驱动即可.Intel_ESRT2_Windows_signed_DRV_v16.03.2014.1127

  6. VUE中的style 样式处理的Scope （<style scope>）

    在VUE组件中,为了让样式私有化,不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块. 但是这样的话,就会导致无法修改其他第三方组件样式,或者是内嵌的样式,解决方案 ...

  7. 第一次作业：reading and prepare

    这个作业属于哪个课程 课程的链接 这个作业要求在哪里 作业要求的链接 我在这个课程的目标是 理解软件开发流程,更好的开发自己的软件 这个作业在哪个具体方面帮助我实现目标 对"工程" ...

  8. PHP实现打印出库单，有没有实现过?

    https://mp.weixin.qq.com/s/X3JldplICRq7KR0HNFcpuw 背景 有时候你在实现一个出库订单之类的功能模块,这里也有可能要你的站点也实现相应的打印出库单预览,今 ...

  9. 【7.18总结】KM算法

    先贴代码,参考博客来源于:https://blog.csdn.net/zyy173533832/article/details/11519291#commentBox 例题:HDU 2255 题意:n ...

  10. poj3469 最小割

    最大流之后S集合与T集合不在相连,即s不能到达T中的点. 对于同一个模块,Ai,Bi,Ai与源点相连,Bi与汇点相连.不同CPU间消耗的模块,相连. 由于最后模块只能在一个CPU中运行,所以要么与源点 ...