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. IDEA在同一工作空间导入多个项目

    在IDEA中导入项目的基本操作是: File--Open--打开工作空间选择要导入的项目 一个项目导入到工作空间啦 但是当你重复这个操作想在这个工作空间继续导入其他模块的时候,就会出现以下问题 不不管 ...

  2. SQL从零到迅速精通【基本语句】

    1.使用T-SQL语句创建数据表authors,输入语句如下. CREATE TABLE authors { auth_id int PRIMARY KEY,--数据表主键 auth_name VAR ...

  3. 如何恢复 iCloud 已删除文件

    原文链接 问题 今天在查找之前的 C++ 笔记时,突然发现之前的资料全没了,整个 Cpp 文件夹内就只剩下了三个文件,怎么形容当时的心情呢,应该说是一下就跌倒了谷底,感觉之前的心血全白费了,有种深深的 ...

  4. LGP2233题解

    题目大意 求环上走 \(n\) 步从指定点到达另一指定点,到达指定点后 不得继续移动. 大家都做过P1057传球游戏吧?还记得这道题的思路吗? 设 \(dp[i][j]\) 表示传 \(i\) 次求传 ...

  5. ROS第一次课作业分享

    ROS第一次课作业分享 2021年夏季学期学院开设了ROS的相关课程,最近在复习相关知识,正好做一下整理.下面是第一次作业的要求: 编写一个ROS节点,具备以下功能: 读取小海龟仿真器的/turtle ...

  6. ARM中断与架构知识 精简知识点

    目录 一.ARM系统的异常与中断 二.CPU模式与寄存器 1.ARM CPU模式 2.ARM CPU state,两种指令集 3.ARM CPU寄存器: 引申介绍一下存储空间中的数据存放 4.ARM三 ...

  7. Linux 安装mysql 看这一篇就够了

    mysql 安装教程 下载地址:https://downloads.mysql.com 查看系统中默认的mysql 依赖 rpm -qa | grep mysql rpm -qa | grep mar ...

  8. Linux 环境Skywalking部署Elasticsearch

    一.环境准备 1.Java jdk 11+(安装教程可参考https://www.cnblogs.com/sportsky/p/15973713.html) 2.elasticsearch 二.环境搭 ...

  9. 论文解读(GRACE)《Deep Graph Contrastive Representation Learning》

    Paper Information 论文标题:Deep Graph Contrastive Representation Learning论文作者:Yanqiao Zhu, Yichen Xu, Fe ...

  10. 深度优先算法--对DFS的一些小小的总结(一)

    提到DFS,我们首先想到的是对树的DFS,例如下面的例子:求二叉树的深度 int TreeDepth(BinaryTreeNode* root){ if(root==nullptr)return 0; ...