问题描述：项目需要在页面加载完成后自动播放音乐，但在ios中却无法自动播放，需要用户主动触发

解决办法：

$('html').one('touchstart',function(){
document.getElementById('audio2').play();
});

（只触发一次）

解决在微信浏览器中ios audio无法自动播放

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="format-detection" content="telephone=no"/>

<title>IOS微信</title>

<meta name="keywords" content="" />

<meta name="description" content="" />

<script type="text/javascript">

//原来是在微信易信执行Ready之前，先注册事件，所以放在所有请求的最前面

document.addEventListener("WeixinJSBridgeReady", function () {

    audioAutoPlay('Jaudio');//给个全局函数

}, false);

document.addEventListener('YixinJSBridgeReady', function() {

    audioAutoPlay('Jaudio');//给个全局函数

}, false);

</script>

<!-- 加载css放这里 -->

</head>

<body>

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop">

</audio>

<script>

function audioAutoPlay(id){//全局控制播放函数

    var audio = document.getElementById(id),

        play = function(){

            audio.play();

            document.removeEventListener("touchstart",play, false);

        };

    audio.play();

    document.addEventListener("touchstart",play, false);

}

var isAppInside=/micromessenger/i.test(navigator.userAgent.toLowerCase());

if(!isAppInside){//给非微信易信浏览器

  audioAutoPlay(Jaudio);

}

</script>

</body>

</html>

解决audio 在部分移动端浏览器不能自动播放（目前包括ios、微博）的更多相关文章

  1. [JavaScript] audio在浏览器中自动播放

    audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...

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

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

  3. 解决Chrome浏览器无法自动播放音频视频的问题，Uncaught (in promise) DOMException

    转载自:http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许 ...

  4. 前端 解决swiper js 手动滑动一下后不能自动播放

    用户操作swiper之后,是否禁止autoplay.默认为true:停止.如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay.操作包括触碰,拖动,点击pa ...

  5. ios微信浏览器音乐自动播放

    setTimeout(function(){ //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以 document.getElementById('bgmedia').play() ...

  6. 修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题

    原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和 ...

  7. 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放

    声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...

  8. [bug]解决chrome浏览器不支持所有媒体音乐不自动播放问题

    声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...

  9. html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)

    // html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...

随机推荐

  1. GET和POST中文乱码的解决方法

    如果表单中含有中文,采用GET或者POST提交请求时,getParameter()方法接收到的参数值乱码. 1.乱码产生的原因 请求参数通过浏览器发送给Tomcat服务器,浏览器发送编码,但是tomc ...

  2. 【ASP.NET】System.Web.Routing - StopRoutingHandler Class

    Provides a way to specify that ASP.NET routing should not handle requests for a URL pattern. ex: rou ...

  3. .NET下使用 Seq结构化日志系统

    前言 我们公司在日志管理方面一直没有统一,主要痛点有: 每个开发人员都是各用各的,存储日志的形式也是五花八门,如:本地文件,数据库,Redis,MongoDB 由于公司访问服务器要通过堡垒机,所以本机 ...

  4. 《EM-PLANT仿真技术教程》读书笔记

    1.在系统分析过程中,必须考虑系统所处的环境,因此划分系统与环境的边界是系统分析的首要任务 2.模型可以分为物理模型和数学模型.数学模型可以分为解析模型.逻辑模型.网络模型以及仿真模型.模型可以分为离 ...

  5. pyqt 不规则形状窗口显示

    #coding=utf- import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QWidget, QApplicatio ...

  6. win10，python3.6，django2.0.3,项目基本命令

    1.django-admin startproject project_name(创建项目) 2.python manage.py startapp appname(创建应用) 3.python ma ...

  7. 清除div重叠浮动的方法

    在最后加入这样一个div. 并且为div加入以下属性: .clear { clear:both;}

  8. 使用Hexo搭建一个简单的博客（一）

    搭建好简洁的博客框架后,回看时发现,简洁之中透露着一丝丝简陋,好的,网上关于丰富hexo的文章也很多 记录一下自己的一些瞎操作. 在你的hexo目录下,你可以看到themes文件夹里有个默认的land ...

  9. chkconfig命令参数

    chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...

  10. Linux命令echo

    echo "hello world" echo 显示字符串内容