100%解决ios上audio不能自动播放的问题
由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了。
解决方法:
首先,创建audio标签:<audio id="success_music" src="/success.mp3" preload="auto"></audio>,preload为自动加载
接下来,创建script标签,先获取audio对象
var audio_success = document.getElementById('success_music');
给页面一个触发动作:
$("#start").on('click',function(){
audio_success.play();
audio_success.pause();
$.get("/test/test", function() {
audio_success.play();
});
});
重点:
先播放,后暂停,之后的播放就没问题了
线上实际项目已应用,请不要置疑!
有需要短网址服务的,请访问:http://www.urlc.cn OR http://t.urlc.cn
100%解决ios上audio不能自动播放的问题的更多相关文章
- 解决ios下audio不能正常播放的问题
解决ios下audio不能正常播放的问题 ios系统下会自动屏蔽audio标签的自动播放,需要使用一个事件来驱动音频播放 this.$refs.startaudio.addEventListener( ...
- ios html5 audio 不能自动播放
//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser & ...
- 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- audio微信自动播放以及自定义样式
audio标签如下: <audio id="audioTag" src="" autoplay="autoplay" controls ...
- 摇一摇—微信7.0.8版本audio无法自动播放问题
近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...
- iOS 微信 音频 视频自动播放
iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165
- ios audio不能自动播放
今天做了一个简单的落地页项目,就是类似于手机微信上经常看到的滑动效果.因为公司要求需要自己开发,所以我就用swiper+swiper.animate开发,开发速度很快,只不过最后音乐哪里出现了一点小b ...
- audio的自动播放报错解决
使用audio标签时,当前页面没有进行交互时,比如用户刷新了页面后,play()调用就会报错,如下图 查找资料后,发现是2018年4月以后,chrome浏览器对这块进行了优化,为了节约流量,禁止了自动 ...
随机推荐
- 2_linux 常用基本命令
相信当你看到此帖子时,你已不再是当年那个颓废的你,你一定也在追梦的路上奔跑,那么请留下你的“梦”,让我们用心去交流,好吗? 废话不多说,直接说正事! 一.查看磁盘分区 1.fdisk -l 查看磁盘 ...
- 移动端touch事件 || 上拉加载更多
前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误 ...
- JDK安装与配置详细图文教程
目的:本人健忘,以后难免会重装系统啥的,软件卸了装是常有的事,特此写此详细教程,一是方便自己以后重装的时候可以看看:二是如果有某位初学者有幸光临,也可以给一点参照.下面我会从JDK的下载.安装.环境变 ...
- Oracle03——游标、异常、存储过程、存储函数、触发器和Java代码访问Oracle对象
作者: kent鹏 转载请注明出处: http://www.cnblogs.com/xieyupeng/p/7476717.html 1.游标(光标)Cursor 在写java程序中有集合的概念,那么 ...
- 微信中通过页面(H5)直接打开本地app的解决方案
简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的. 安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你判断本地是否已经安装了app,如果本地安 ...
- 深入理解JAVA I/O系列六:Linux中的IO模型(转载的文章非常值得学习)
From:http://www.cnblogs.com/dongguacai/p/5770287.html IO模型 linux系统IO分为内核准备数据和将数据从内核拷贝到用户空间两个阶段. 这张图大 ...
- 最新城市二级联动json(2017-09)
{ '安徽': [ '合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '阜阳', '宿州', '滁州', '六安', '宣城', '池州', ...
- IOS学习【xcode 7新特性url链接】
由于xcode7的更新,在访问http链接的时候会输出错误信息 The resource could not be loaded because the App Transport Security ...
- 基于NIOS-II的示波器:PART1 按键&显示屏驱动&界面
NIOS II 相关资料以及基础入门 <NiosII的奇幻漂流> <Nios II那些事儿> 本文所有的硬件基础以及工程参考来自魏坤示波仪,重新实现驱动并重构工程. 基于NIO ...
- OV7670读操作
读时序共分为五个部分 首先发送start,然后发送OV7670的器件地址,ov6070的ID是0x42,0x42+一位响应位 发送ov7670的寄存器地址,这里可以读取它的厂商识别号 ,比如1c 发 ...