问题描述：项目需要在页面加载完成后自动播放音乐，但在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. Derek解读Bytom源码-Api Server接口服务

    作者:Derek 简介 Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom ...

  2. Google advertiser api开发概述——最佳做法&建议

    最佳做法 本指南介绍了一些最佳做法,您可以运用它们来优化 AdWords API 应用的效率和性能. 日常维护 为确保您的应用不间断运行,可采取以下做法: 确保 AdWords API 中心中的开发者 ...

  3. 查看kubernets上的image信息

    # 查看pods所使用的image kubectl describe pods $podsname -n $namespace #获取containers.$containername.image i ...

  4. POJ 3087 Shuffle'm Up（洗牌）

    POJ 3087 Shuffle'm Up(洗牌) Time Limit: 1000MS    Memory Limit: 65536K Description - 题目描述 A common pas ...

  5. 【BZOJ 5125】小Q的书架

    Problem Description 小 \(Q\) 有 \(n\) 本书,每本书有一个独一无二的编号,现在它们正零乱地在地上排成了一排. 小 \(Q\) 希望把这一排书分成恰好 \(k\) 段,使 ...

  6. 关于导入geoserver 源码到Eclipse编译运行

    参考http://blog.csdn.net/gisshixisheng/article/details/43016443 和  http://blog.sina.com.cn/s/blog_6e37 ...

  7. 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...

  8. Codeforces 746 G. New Roads

    题目链接:http://codeforces.com/contest/746/problem/G mamaya,不知道YY了一个什么做法就这样过去了啊 2333 首先我显然可以随便构造出一棵树满足他所 ...

  9. go 获取网址html 源码

    // Sample program to show how to write a simple version of curl using // the io.Reader and io.Writer ...

  10. Python安装第三方库的安装技巧

    电脑:Windows10 64位. Python IDE 软件:JetBrains PyCharm Community Edition 2018.1.3 x64 Python version : Py ...