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. filter tools

    // 过滤商品分类 Vue.filter("cateFilter", (data) => {   let tmp = ["一级分类", "二级分 ...

  2. prometheus(1)之核心概念

    个人理解:prometheus核心在于 1.prom数据类型的理解 (4钟数据类型 与常用的promQL语法 其实很容易) 2.各种服务发现与正则拼接(服务发现的拼接其实官方定义好的 理解就行) 3. ...

  3. CURD系统怎么做出技术含量--怎样引导面试

    引子 很多朋友可能会因为自己做的工作不是特别核心或者业务简单而引起面试中没有自信.但是很多公司面试的时候是可以接受面试者之前岗位的并发量.交易量低一些的.比如我们要招聘和我们交易量同等级或者以上的出来 ...

  4. yaml基本用法

    简介 YAML 是 "YAML Ain't Markup Language"(YAML 不是一种标记语言)的递归缩写.在开发的这种语言时,YAML 的意思其实是:"Yet ...

  5. webpack 之开发环境优化 source-map

    webpack 之开发环境优化 source-map /** * source-map:一种 提供源代码到构建后代码映射 技术 (如果构建后代码出错了,通过映射可以追踪源代码错误) * [inline ...

  6. 华为C/C++编码规范+《数学之美》感想

    1.排版 1.1 程序块要采用缩进风格编写, 缩进的空格数为4个.(说明: 对于由开发工具自动生成的代码可以有不一致)1.2 相对独立的程序块之间.变量说明之后必须加空行.1.3 循环.判断等语句中若 ...

  7. Docker Compose 容器编排 NET Core 6+MySQL 8+Nginx + Redis

    环境: CentOS 8.5.2111Docker 20.10.10Docker-Compose 2.1.0 服务: db  redis  web nginx NET Core 6+MySQL 8+N ...

  8. 【Microsoft Azure 的1024种玩法】二.基于Azure云平台的安全攻防靶场系统构建

    简介 本篇文章将基于在Microsoft Azure云平台上使用Pikachu去构建安全攻防靶场,Pikachu使用世界上最好的语言PHP进行开发,数据库使用的是mysql,因此运行Pikachu需要 ...

  9. 正则表达式&&Java文本复杂操作

    正则表达式1.正则表达式的优势和用途? 一种强大而灵活的文本处理工具: 大部分编程语言 .数据库.文本编辑器.开发环境都支持正则表达式.2.正则表达式定义: 正如他的名字一样是描述了一个规则,通过这个 ...

  10. WinForm训练一_改变窗体大小

    1 //引用系统命名空间 2 using System; 3 //项目命名空间 4 using System.Collections.Generic; 5 using System.Component ...