问题描述：项目需要在页面加载完成后自动播放音乐，但在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. 深度学习课程笔记（十七）Meta-learning (Model Agnostic Meta Learning)

    深度学习课程笔记(十七)Meta-learning (Model Agnostic Meta Learning) 2018-08-09 12:21:33 The video tutorial can ...

  2. Docker Engine SDKs and API 的开发2

    Examples using the Docker Engine SDKs and Docker API After you install Docker, you can install the G ...

  3. mybatis批量更新数据参考

    https://blog.csdn.net/xyjawq1/article/details/74129316

  4. Latex 左右引号

    参考: LaTeX技巧218:LaTeX如何正确输入引号:双引号""单引号'' Latex 左右引号 在latex中加引号时,使用""的输出为两个同向的引号: ...

  5. JavaScript 调试常见报错以及原因

    JavaScript 调试常见报错以及原因 测试环境 chrome 版本 66.0.3359.170(正式版本) (64 位) TypeError 类型错误 不是操作符所接受的数据类型. //---- ...

  6. js，jq获取父，兄弟，子节点整理

    js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...

  7. .NetCore Session.Redis

    首先创建ASP.NET CORE Web项目,然后按如下顺序操作.1.添加nuget程序包: Microsoft.AspNetCore.Session; Microsoft.AspNetCore.Da ...

  8. Python中cPickle

    cPickle模块: 在python中,一般可以使用pickle类来进行python对象序列化,而cPickle提供了一个更快速简单的接口,如python文档所说:“cPickle - A faste ...

  9. MVC后台获取数据和插入数据的三种方式【二】

    MVC模式下,从前端获取数据返回后台,总共有三种形式.下面的代码示例将演示如何将数据返回到后端. 一.首先我们看看表单代码,注意input标签中name的值. <html> <hea ...

  10. The content of element type "web-app" must match "(icon?,display-name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,servlet- mapping*,session-config?,mime-map

    修改了一下web.xml,加入了一个<filter>,然后就报这样的错??? The content of element type "web-app" must ma ...