ios中audio不能直接通过audio.play()播放,需要用户在click事件或者touch事件中执行audio.play()才能播放。

ajax回调中audio.play()音乐不能正常播放。

用户点击按钮,等服务器返回数据后再播放相应的成功或失败的音乐,测试在ios中不能正常播放。猜测ios中的audio不能再ajax回调函数中play()

下面记录一下ios中ajax回调中播放音乐的问题解决过程

  • 解决方案一 --降低音量

在用户点击时间后将audio的音量设置为0,等success后将音量设置为1; volume可以控制audio的音量大小,取值范围为 0~1

  1. audio.volume=number

发现在chrome的手机模式可以将音乐静音,ios中竟然不能控制音量,好吧这个被ios屏蔽了。放弃了。。。

  • 解决方案二 --播放后立即暂停

用户点击按钮后立即播放音乐,等ajax返回数据后再继续播放。测试能够正常播放。部分代码如下:

  1. // 用户click事件
  2. if (this.isIOS()) { // ios单独处理 安卓不需要
  3. this.$refs.audio.play()
  4. this.$refs.audio.pause()
  5. }
  6. // ajax成功后的事件
  7. this.$refs.audio.pause()
  8. this.$refs.audio.currentTime = 0
  9. this.$refs.audio.play()

由于是vue项目,所以代码中有this.$refs小伙伴们别介意;

总结

  1. 在ios中,如果需要播放音乐或者视频,需要用户手动触发事件在调用.play()才能播放(autoplay或者直接.play()是不能直接触发的);

  2. 如果需要在ajax回调函数中播放音乐,需要在用户触发事件后播放音乐立即暂停然后才能在回调函数中.play(),不然ios中是播放不成功的。

ios audio不能够正常播放的更多相关文章

  1. iOS audio不支持循环播放

    解决办法:监听播放完成事件(注意点,audio标签不能设置循环播放,去除标签 loop="loop"或者 loop="false",不然不走播放完成事件) $( ...

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

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

  3. audio标签的自动播放(ios)

    0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.c ...

  4. ios audio不能自动播放

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

  5. iOS Dev (20) 用 AVAudioPlayer 播放一个本地音频文件

    iOS Dev (20) 用 AVAudioPlayer 播放一个本地音频文件 作者:CSDN 大锐哥 博客:http://blog.csdn.net/prevention 步骤 第一步:在 Proj ...

  6. iOS Dev (21) 用 AVPlayer 播放一个本地音频文件

    iOS Dev (21) 用 AVPlayer 播放一个本地音频文件 作者:CSDN 大锐哥 博客:http://blog.csdn.net/prevention 前言 这篇文章与上一篇极其相似,要注 ...

  7. AVAudioSession(1):iOS Audio Session 概览

    本文转自:AVAudioSession(1):iOS Audio Session 概览 | www.samirchen.com 本文内容主要来源于 Audio Session Programming ...

  8. iOS中声音采集与播放的实现(使用AudioQueue)

    都说iOS最恶心的部分是流媒体,其中恶心的恶心之处更在即时语音. 所以我们先不谈即时语音,研究一下,iOS中声音采集与播放的实现. 要在iOS设备上实现录音和播放功能,苹果提供了简单的做法,那就是利用 ...

  9. 如何让音频跟视频在ios跟android上自动播放

    如何让音频跟视频在ios跟android上自动播放 <audio autoplay ><source src="audio/alarm1.mp3" type=&q ...

随机推荐

  1. JZ-025-复杂链表的复制

    复杂链表的复制 题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针random指向一个随机节点),请对此链表进行深拷贝, 并返回拷贝后的头结点.(注意,输 ...

  2. LeetCode-013-罗马数字转整数

    罗马数字转整数 题目描述:罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 ...

  3. 5分钟学会 gRPC

    介绍 我猜测大部分长期使用 Java 的开发者应该较少会接触 gRPC,毕竟在 Java 圈子里大部分使用的还是 Dubbo/SpringClound 这两类服务框架. 我也是近段时间有机会从零开始重 ...

  4. 矩池云上安装ikatago及远程链接教程

    https://github.com/kinfkong/ikatago-resources/tree/master/dockerfiles 从作者的库中可以看到,该程序支持cuda9.2.cuda10 ...

  5. ASP.NET Core 6框架揭秘实例演示[22]:如何承载你的后台服务[补充]

    借助 .NET提供的服务承载(Hosting)系统,我们可以将一个或者多个长时间运行的后台服务寄宿或者承载我们创建的应用中.任何需要在后台长时间运行的操作都可以定义成标准化的服务并利用该系统来承载,A ...

  6. python检查是否有缺失值(有用)以及list,array合并

    df.isnull().any() 用来判断某列是否有缺失值 df.isnull().all() 用来判断某列是否全部为空值

  7. ffmpeg修改视频文件的分辨率

    在本文中,我们将展示如何调整任何视频文件的大小. 这种方法是在Linux系统(几乎任何发行版)中调整视频文件大小的最佳方法之一,也是Windows和Mac用户的绝佳替代方案. 更改视频文件的分辨率将是 ...

  8. Linux----虚拟机克隆、快照、删除、

    克隆 已经安装一台linux系统 还想要更多的,直接克隆CentOS即可 使用vm ware 的克隆操作 注意: 使用前先关闭目前已开启的虚拟机 快照 作用: 虚拟系统出现异常,需要回到原先的状态,此 ...

  9. 详解数据库三种删除方法: delete drop truncate

    Delete Delete :删除数据表中的行(可以删除某一行,也可以在不删除数据表的情况下删除所有行). 删除某一行:Delete from 数据表名称 where 列名称=值: 删除所有行:Del ...

  10. [SPDK/NVMe存储技术分析]008 - RDMA概述

    毫无疑问地,用来取代iSCSI/iSER(iSCSI Extensions for RDMA)技术的NVMe over Fabrics着实让RDMA又火了一把.在介绍NVMe over Fabrics ...