由于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. django开发总结

    首先我用的是虚拟机,python3.6+django1.11.0: 为了版本的一致,以及在环境种更好的体验,我们需要的是先用虚拟环境virtualenv其命令有: 1.创建环境(name是虚拟环境名字 ...

  2. 3_初学sql注入

    sql注入的分类:布尔型 报错型 可联合查询型 多语句查询型 基于时间延迟注入 1.注释符 # /* -- 2.过滤空格注入 使用/**/或()或+代替空格 3.多条数据显示 concat(str1, ...

  3. Microsoft Azure Storage Exployer使用指南

    概述 Microsoft Azure Storage Exployer 是微软官方推荐的一款管理Azure Storage 客户端工具,客户使用完全免费.支持Windows.Mac和Linux.用户使 ...

  4. 灾难恢复-boot分区的恢复方法

    boot分区是系统启动中最重要的部分,如果服务器由于病毒攻击又或者被管理员误删除了boot分区.那么就会存在潜在的风险.为什么说是潜在的风险?因为boot分区被删除后系统仍在继续运行,看似无状况但是在 ...

  5. mongodb菜鸟整理

    一,mongodb的安装与连接 从官网下载后,解压或者安装到某个目录下 1  首先需要自己创建一个db文件夹 ,用于存放数据库的数据 然后还需要创建一个log文件夹,里面需要自己创建一个mongodb ...

  6. JavaScript 30 - 1 学习笔记

    学习JavaScirpt30的笔记! ...虽然英语不是很好,但是跟着来还是学到了一些东西. 1------->   JavaScirpt Drum Kit 功能是这样的 ,敲击键盘上面的按钮, ...

  7. [2017-08-16]ABP系列——QuickStartB:正确理解Abp解决方案的代码组织方式、分层和命名空间

    本系列目录:Abp介绍和经验分享-目录 介绍ABP的文章,大多会提到ABP框架吸收了很多最佳实践,比如: 1.N层 (复用一下上篇的图) 展现层(Personball.Demo.Web):asp.ne ...

  8. 一只菜鸟的瞎J8封装系列的目录

    因为这是一个系列...也就是我们所说的依赖关系.后面很多方法都是基于我前面封装的工具来进行的,所以我列一个目录供大家参考... 一只菜鸟的瞎J8封装系列  一.手把手封装数据层之DButil数据库连接 ...

  9. mysql 插入字段 字符串

     update hand_over set pay_info='{"waring_tip":"{\"pay_order_cancel\":0,\&qu ...

  10. Flask01 路由控制(转换器)、反转、请求方法控制

    1 提出问题 如何实现前端传过去的路径时动态的(即:多个url对应一个url视图函数) 例如: 浏览器中输入 http://127.0.0.1:5000/test/good/ 或者 http://12 ...