由于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. HTTP服务器

    1.项目介绍 HTTP协议是应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.协议的详细内容,前面一篇HTTP协议详解已经详细介绍了,这里不再赘述. 项目总体描述:HTTP支 ...

  2. Servlet与JSP内置对象的对应关系、Servlet获取表单、Servlet路径跳转

    项目的根目录指的是webroot: 服务器内部跳转: 或者使用../:“..”代表回到上一级目录

  3. Django创建应用、模型、配置后台自动管理

    1.创建应用 python manage.py startapp myblog 2.应用结构 3.创建模型(models.py) from django.db import models # Crea ...

  4. mysql中group by 的用法解析

    1. group by的常规用法 group by的常规用法是配合聚合函数,利用分组信息进行统计,常见的是配合max等聚合函数筛选数据后分析,以及配合having进行筛选后过滤. 假设现有数据库表如下 ...

  5. 团队作业8——第二次项目冲刺(Beta阶段)--5.25 5th day

    团队作业8--第二次项目冲刺(Beta阶段)--5.25 fifth day Day five: 会议照片 项目进展 Beta冲刺的第四天,以下是今天具体任务安排: 队员 昨天已完成的任务 今日计划完 ...

  6. 201521123083 《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains public ...

  7. 作业2——英语学习APP的案例分析

    英语学习APP的案例分析 很多同学有误解,软件工程课是否就是理论课?或者是几个牛人拼命写代码,其他人打酱油的课?要不然就是学习一个程序语言,搞一个职业培训的课?都不对,软件工程有理论,有实践,更重要的 ...

  8. 201521123077 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 泛型类 利用泛型可以写出一个更加通用的类,比如下面的例子: class simpleHolder<T&g ...

  9. 201521123022 《Java程序设计》 第七周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 Q1.ArrayList代码分析 Q1.1 解释ArrayList的contains源代码 ArrayLis ...

  10. 201521123049 《JAVA程序设计》 第1周学习总结

    1. 本章学习总结 1.认识了新的一门计算机编程语言JAVA: 2.JAVA的编写与C语言类似,都是不能利用指针进行编写: 3.在实验课上初步认识JAVA并利用JAVA进行简单的编程,在实践上得到进一 ...