问题描述：项目需要在页面加载完成后自动播放音乐，但在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. 文件IO（2）

    Lseek:       ***************************************************************************    实验一:     ...

  2. 【C#】可空类型 NullAble<T>

    在实际编写代码时候 ,  会遇到很多场景, 需要将值置成空, 比如发货日期, 有可能是没有. 在没有可空类型之前, 程序都是用 魔值, 即为一个minValue或者常量, 来代表这个值为空, 也有用一 ...

  3. Python数据类型补充1

    一.可变和不可变类型 可变类型: 值变了,但是id没有变,证明没有生成新的值而是在改变原值,原值是可变类型 不可变类型:值变了,id也跟着变,证明是生成了新的值而不是在改变原值,原值是不可变 # x= ...

  4. 4、python内置类型(0529)

    支持运算:索引,切片,min(), max(), len()等 支持操作:对象的自有的方法 对字符串操作的内置方法获取:str.     //敲tab键补全 获取某个内建命令的属性和方法列表:dir( ...

  5. 2017-2018-2 20165306 实验四《Android开发基础》实验报告

    实验四<Android开发基础>实验报告 实验报告封面 实验内容 Android程序设计-1 实验要求: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java ...

  6. HDU 5782 Cycle（KMP+哈希）

    http://acm.split.hdu.edu.cn/showproblem.php?pid=5782 题意:给出两个长度相等的字符串,输出两个字符的每个前缀是否循环相同. 思路: 如果连个串循环相 ...

  7. RN原生调用一：安卓Toast

    首先安卓原生方法:Toast.makeText(getApplicationContext(), "默认的Toast", Toast.LENGTH_SHORT); 在RN中js如何 ...

  8. Broken Keyboard (a.k.a. Beiju Text) 思路

    问题:You’re typing a long text with a broken keyboard. Well it’s not so badly broken. The only problem ...

  9. maven 引入外部jar包的几种方式

    方式1:dependency 本地jar包 <dependency> <groupId>com.hope.cloud</groupId> <!--自定义--& ...

  10. SQL中 根据行号设置每行数据的排序数值

    根据行号自动把当前行号插入到某列中 实现排序 update tempTable set DisplayOrder = right( CAST(rownum as NVARCHAR),5) from(  ...