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

audio.volume=number

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

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

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

// 用户click事件
if (this.isIOS()) { // ios单独处理 安卓不需要
this.$refs.audio.play()
this.$refs.audio.pause()
} // ajax成功后的事件
this.$refs.audio.pause()
this.$refs.audio.currentTime = 0
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. Mattermost Server安装及配置AD/LADP

    一.安装Mattermost Server Mattermost is an open source, self-hosted Slack-alternative. 1.下载mattermost  s ...

  2. 在 k8s 以外的分布式环境中使用 Dapr

    在Dapr 文档和实践案例中多是推荐采用k8s, 其实我目前也是在k8s 上操作的,有公有云TKE,AKS,还有私有云的Rancher ,它并没有传闻中的那么难,而且我认为它非常容易上手.不过,我还是 ...

  3. linux作业--第十周

    1.在阿里云服务器搭建openv-p-n(有条件的同学再做) 2.通过编译.二进制安装MySQL5.7 编译安装MySQL5.7 安装相关包 yum -y install libaio numactl ...

  4. Triple Shift

    来源:Atcoder ARC 136 B - Triple Shift (atcoder.jp) 题解:这道题我们不可能去硬模拟(大多数这种题都不能这样去模拟的),然后我们就要去发现特性, 发现把 a ...

  5. 超强视频超分AI算法,从此只看高清视频

    最近发现一个特别强的视频超分算法----BasicVSR,在真实世界数据集中,实现了前所未有的视觉重建效果,最近它还拿下了超分比赛NTIRE 2021三冠一亚的优异成绩,登上了CVPR 2022. 视 ...

  6. 2. Java入门

    2.Java入门 2.1.安装开发环境 卸载JDK 删除Java的安装目录 删除JAVA_HOME 删除path下关于Java的目录 java -version 安装JDK 百度搜索JDK8,找到下载 ...

  7. CF587F&CF547E题解

    这两道题好像啊 贡献一种使用SAM和ACAM草两道题的方法 下面假装有 \(O(\sum |S|=m)=O(n)\). 你看看,这CF换过多少个出题人啦?换汤不换药啦!其实这两道题是同一个人出的 CF ...

  8. 常见的Socket网络异常场景分析

    原创:打码日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 在目前微服务的背景下,网络异常越来越常见了,而有一些网络异常非常模糊,理解什么情况下会导致什么异常,还是有一定难度 ...

  9. 聊聊磁盘 IO

    常见的磁盘类型 按存储原理的不同,可以把磁盘分为这么几种 HDD 盘:没啥说的,就是平时最常见的机械盘. SSD 盘:用电信号来记录存储数据,而不是磁片.显然进行 I/O 时,这要比机械盘的物理寻址方 ...

  10. python练习册 每天一个小程序 第0008题

    1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目描述: 5 一个HTML文件,找出里面的正文. 6 7 思路: 8 利用Beautiful ...