html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更方便的方法,尽请留言:

html部分:

<audio id="audio"><source src="20161012102044_57fd9dfc044cd.mp3"></audio>

<script>

audio = document.getElementById('audio');

audio.play();

</script>

js部分:

// 函数:

function audioAutoPlay(id)

{

var audio = document.getElementById(id);

var play = function() {

document.removeEventListener("WeixinJSBridgeReady", play);

document.removeEventListener("YixinJSBridgeReady", play);

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

audio.play();

audio.pause();

};

audio.play();

audio.pause();

//weixin  document.addEventListener("WeixinJSBridgeReady", play, false);

//yixin   document.addEventListener('YixinJSBridgeReady', play, false);

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

}

//调用:

audioAutoPlay('audio1');

ios加载html5 audio标签用js无法自动播放的更多相关文章

  1. h5 audio标签在手机上不能自动播放????

    最近在做一个微信端的项目,快到接近尾声的时候,发现还没放入音频,于是乎,放入音频,在电脑端测试一切正常,无阻碍. 后来在手机上测试,发现背景音乐不能播放,于是开始找错,刚开始以为是IIS服务器出错,结 ...

  2. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  3. 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法

    由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...

  4. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  5. html5 audio标签相关知识点总结

    1.audio指JS原生对象,假如用jquery获取到audio标签后,需要dom[0]转为原生JS对象 if(audio.paused){ //如果音频暂停,就播放 audio.play(); }e ...

  6. 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  7. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  8. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  9. 在页面所有元素加载完成之后执行某个js函数

    在页面所有元素加载完成之后执行某个js函数 http://lgscofield.iteye.com/blog/1884352

随机推荐

  1. vue三级路由显示+面包屑

    问题一:如何让三级路由内容显示显示在一级路由页面 可以说是我点级二级路由导航的时候是不发生跳转的,但还要去动态的生成面包屑 const routes = [{ path: '/', name: 'Ho ...

  2. 如何抓取直播源及视频URL地址-疯狂URL(教程)

    直播源介绍 首先,我们来快速了解一下什么是直播源,所谓的直播源,其实就说推流地址,推流地址可能你也不知道是什么,那么我再简单说一下,推流地址就是,当某个直播开播的时候,需要将自己的直播状态实时的展示给 ...

  3. maven+springmvc+cxf 实现简单webservice小例子

    1.首先你需要创建一个maven项目[当然是web项目] 2.pom.xml添加以下 <properties> <cxf.version>2.2.3</cxf.versi ...

  4. loto仪器_如何模拟输出凸轮轴和曲轴波形_用任意波形信号源SIG852?

    loto仪器_如何模拟输出凸轮轴和曲轴波形_用任意波形信号源SIG852? 在汽车传感器的波形检测应用中,有时候需要模拟各种汽车传感器的输出信号,用来驱动和监测对应的执行机构或者电路是否正常,这其中, ...

  5. PTA 是否二叉搜索树 (25分)

    PTA 是否二叉搜索树 (25分) 本题要求实现函数,判断给定二叉树是否二叉搜索树. 函数接口定义: bool IsBST ( BinTree T ); 其中BinTree结构定义如下: typede ...

  6. storm启动报错: InvalidTopologyException(msg:Component: [mybolt] subscribes from non-existent stream: [default] of component [es-bolt])

    storm每一个bolt在emit之后需要把数据传递到下一个bolt,所以declareOUtputFields 一定要写 默认的情况下不用加streamId,如果加了streamId,后面的bolt ...

  7. 低代码开发,推荐一款Web 端自动化神器:Automa

    1. Automa介绍 又到了优秀工具推荐的时候了,今天给大家分享一款前端自动化操作神器: Automa . 首先了解一下Automa是什么? Automa它定位是一款 Chrome 插件,也就意味着 ...

  8. Java学习(十三)

    今天学习了Java中的继承,Java的继承和c++的差别很大. 继承的基本作用是代码复用,但最重要的作用是为了以后的"方法覆盖"和"多态机制". 继承的语法是: ...

  9. 第五周PTA笔记 后缀表达式+后缀表达式计算

    后缀表达式 所谓后缀表达式是指这样的一个表达式:式中不再引用括号,运算符号放在两个运算对象之后,所有计算按运算符号出现的顺序,严格地由左而右进行(不用考虑运算符的优先级). 如:中缀表达式 3(5–2 ...

  10. 菜鸡的Java笔记 第三十三 - java 泛型

    泛型 GenericParadigm        1.泛型的产生动机        2.泛型的使用以及通配符        3.泛型方法的使用                JDK1.5 后的三大主 ...