由于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不能自动播放的问题的更多相关文章

  1. 解决ios下audio不能正常播放的问题

    解决ios下audio不能正常播放的问题 ios系统下会自动屏蔽audio标签的自动播放,需要使用一个事件来驱动音频播放 this.$refs.startaudio.addEventListener( ...

  2. ios html5 audio 不能自动播放

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

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

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

  4. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. audio微信自动播放以及自定义样式

    audio标签如下: <audio id="audioTag" src="" autoplay="autoplay" controls ...

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

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

  7. iOS 微信 音频 视频自动播放

    iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165

  8. ios audio不能自动播放

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

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

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

随机推荐

  1. Html5笔记之第四天

    属性 值 描述 accesskey character 规定访问元素的键盘快捷键 class classname 规定元素的类名(用于规定样式表中的类). contenteditable true f ...

  2. Express + Session 实现登录验证

    1. 写在前面 当我们登录了一个网站,在没有退出登录的情况下,我们关闭了这个网站 ,过一段时间,再次打开这个网站,依然还会是登录状态.这是因为,当我们登录了一个网站,服务器会保存我们的登录状态,直到我 ...

  3. ios 初体验<窗口的创建>

    1. 创建工程,这步很简单,百度下即可,在info.plist 里面 去掉 Main 的 ,便于新手练习ios,创建ios工程后,在AppDelegate.m,里面的方法application 加上几 ...

  4. ehcache memcache redis 三大缓存对比

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt268 最近项目组有用到这三个缓存,去各自的官方看了下,觉得还真的各有千秋!今 ...

  5. Mock Server 入门

    Mock Server介绍 什么是mock ? 我在去年的时候介绍一篇幅 python mock的基本使用,http://www.cnblogs.com/fnng/p/5648247.html 主要是 ...

  6. C# 获取exe、dll中的图标,支持获取256x256分辨率

    在网上找过许多文章,都没有成功获取过大图标,只能获取最大32x32.最后自己尝试了相关的windows api,终于找到一个可用的. 主要用到的C++的PrivateExtractIcons函数,具体 ...

  7. HDU 6200 2017沈阳网络赛 树上区间更新,求和

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6200 题意:给个图,有2种操作,一种是加一条无向边,二是查询u,v之间必须有的边的条数,所谓必须有的边 ...

  8. Bash 脚本进阶,经典用法及其案例

    前言:在linux中,Bash脚本是很基础的知识,大家可能一听脚本感觉很高大上,像小编当初刚开始学一样,感觉会写脚本的都是大神.虽然复杂的脚本是很烧脑,但是,当我们熟练的掌握了其中的用法与技巧,再多加 ...

  9. Android 日夜间切换Demo

    这是其中一种实现模式,也是比较麻烦的一种,首先写布局,不多说上代码 activity_main.xml <?xml version="1.0" encoding=" ...

  10. JTemplates 的使用

    注意事项:一定要放在Jquery的页面加载完成事件内  : $(function{}); <script src="~/Js/jquery-2.1.0.js">< ...