audio标签如下:

<audio id="audioTag" src="" autoplay="autoplay" controls="controls" preload="auto" loop="loop" > 您的浏览器不支持 audio 标签。</audio>

上面写入了基础属性

①微信端自动播放

目前加入autoplay属性之后在大部分的移动端都可以自动播放,但是我遇到的问题是在用苹果手机在微信上打开却没有自动播放解决办法,调用微信一个借口:

document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);

  //移动端自动播放还可以通过mousedown/mouseup/click/touchstart来触发

②自定义样式

可以在audio标签外加一个标签然后通过点击来改变样式(建议是通过添加class来改变样式)给audio增加hidden='true'使它本身样式隐藏

var aduio = document.getElementById('audioTag');
controlsPlay.click(function() {
//改变暂停/播放icon
if (audio.paused) {//class为播放时候样式 暂停时候移除
audio.play();
$(this).addClass('class')
} else {
audio.pause();
$(this).removeClass('class')
}
});

③正对ios系统auido无法自动播放,目前我的解决办法是:在进入页面不会自动播放音乐,而是在进行第一次touchstart时,开始播放audio

-------------------------------------------------------------------------------------------------------分界线-------------------------------------------------------------------------------------------------------------------------------------

有audio还有video之前也遇到过video没有办法自动播放现在看到这个地址(http://www.phptext.net/article_view.php?id=621)发现在ios端有iso自身的属性功能没有开启

虽然没有测试过纪录下:

(在视频标签加入 webkit-playsinline  x5-playsinline  playsinline就可以解决播放弹出窗口问题包含自动播放。)

<video id="player" width="480" height="320" webkit-playsinline>

也有js代码:

  if ("wView" in window) {

    window.wView.allowsInlineMediaPlayback = "YES";

    window.wView.mediaPlaybackRequiresUserAction = "NO";

  }

后续遇到问题在继续更新。。。。。。

												

audio微信自动播放以及自定义样式的更多相关文章

  1. 摇一摇—微信7.0.8版本audio无法自动播放问题

    近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...

  2. 100%解决ios上audio不能自动播放的问题

    由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了. 解决方法: 首先,创建audio标签:<audi ...

  3. 微信的audio无法自动播放的问题

    一.问题 最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去. 1.在audio标签里引入了autoplay属 ...

  4. 微信video和audio无法自动播放解决方案

    //音频,写法一<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> // ...

  5. ios audio不能自动播放

    今天做了一个简单的落地页项目,就是类似于手机微信上经常看到的滑动效果.因为公司要求需要自己开发,所以我就用swiper+swiper.animate开发,开发速度很快,只不过最后音乐哪里出现了一点小b ...

  6. 【转】h5页面audio不自动播放问题

    1.audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload ...

  7. android audio无法自动播放

    audio无法在android4.4+和ios6以上的版本自动播放,因为他们出于安全考虑,做了限制.必须用户自己手工点击才能播放,程序是控制不了播放的. 整死我了,整整搞了2天,查不出所以然,原来就这 ...

  8. ios html5 audio 不能自动播放

    //修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser & ...

  9. audio的自动播放报错解决

    使用audio标签时,当前页面没有进行交互时,比如用户刷新了页面后,play()调用就会报错,如下图 查找资料后,发现是2018年4月以后,chrome浏览器对这块进行了优化,为了节约流量,禁止了自动 ...

随机推荐

  1. Log4j2详解——XML配置详解

    Log4j2详解--XML配置详解 找到了个很详细的文章链接 https://www.jianshu.com/p/bfc182ee33db

  2. C# form捕捉方向键事件

    在C# Form中监听键盘输入事件本身是很简单的,但是如果是想监听键盘上的上下左右这四个方向键,实现起来有所不同.下面我就以一个Demo简单陈述一下实现过程. 一.为了让界面能够监听键盘事件,必须实现 ...

  3. CentOS 8 网卡命令使用

    之前一直用CENTOS7中service来重启网卡,但是换成CENTOS8后centos8的网卡服务与centos7有所不同,无法通过systemctl或者service命令重启网卡.centos8网 ...

  4. MySQL 8.0无法通过Navicat远程连接 1045 - Access denied for user 'root'@'::1' (using password: YES) 的解决办法

    用navicat远程连接数据库的时候无法连接,提示信息:1045 - Access denied for user 'root'@'::1' (using password: YES). 是由于密码策 ...

  5. LGP2414题解

    难不成是我后缀自动机学魔怔了,AC 自动机都能套上线段树 题意:给你一颗 Trie,每次询问两个节点 \(u,v\),\(u\) 代表的字符串在 \(v\) 代表的字符串中出现了多少次. 让我们思考一 ...

  6. Java的jinfo命令使用详解

    jinfo命令简介 jinfo(Java Virtual Machine Configuration Information)是JDK提供的一个可以实时查看Java虚拟机各种配置参数和系统属性的命令行 ...

  7. hadoop学习笔记 一

    Hadoop 2.x * common * HDFS 存储数据 NameNode 主从结构 * 存储文件系统的元数据,命名空间namespace DataNode * 存储数据 SecondaryNa ...

  8. Mybatis——一级缓存与二级缓存

    关于Mybatis的学习主要参考了狂神的视频 一级缓存 (1).使用范围:从sqlSession会话开始到结束 (2).使用:默认打开,无法关闭 (3).测试使用(需要打开日志观察数据库的连接情况): ...

  9. 两天入门SolidWorks2016

    视频:https://www.bilibili.com/video/BV1ub411c7ct 饭前甜点--基本设置 一.界面设置 1.1 调出文件栏 打开SOLIDWORKS 2016 x64 Edi ...

  10. 如何解析EML(邮件)格式的文件以及一款小巧的EML邮件阅读工具

    在理解EML格式的时候,先回顾一下历史,这样有助于理解邮件的格式,比如邮件传输时为何会有多种编码方式.此外,理解EML格式也有助于理解HTTP协议. 历史溯源 由于历史原因,我们目前看到的大部分的网络 ...