解决ios audio无法播放问题

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小伙伴们别介意；

总结

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

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

您可能感兴趣的文章:

  • iOS系统和微信中不支持audio自动播放问题的解决方法
  • IOS 播放系统提示音使用总结（AudioToolbox）
  • iOS中滑动控制屏幕亮度和系统音量（附加AVAudioPlayer基本用法和Masonry简单使用）
  • iOS中的音频服务和音频AVAudioPlayer音频播放器使用指南
  • 详解iOS App中调用AVAudioPlayer播放音频文件的用法
赞 (0)

相关推荐

  • iOS中滑动控制屏幕亮度和系统音量（附加AVAudioPlayer基本用法和Masonry简单使用）

    iOS中滑动控制屏幕亮度和系统音量（附加AVAudioPlayer基本用法和Masonry简单使用）

    如图,左侧上下滑动改变亮度,右侧上下滑动改变音量. 1.改变屏幕亮度 //获得当前屏幕亮度 light = [UIScreen mainScreen].brightness; light = 0.5f; //直接赋值或者使用set方法皆可 [UIScreen mainScreen].brightness = light; 2.改变系统音量 使用的比较多的就是通过MPMusicPlayerController来改变系统音量,主要归功于MPMusicPlayerController的音量和系统的同步

  • 详解iOS App中调用AVAudioPlayer播放音频文件的用法

    详解iOS App中调用AVAudioPlayer播放音频文件的用法

    要给工程中添加音频,首先要导入音频的框架 AVFoundation.framework 然后新建一个类继承于UIViewController, 我这里就叫FirstVC. 首先在 AppDelegate.m中初始化根视图 复制代码 代码如下: #import "AppDelegate.h" #import "FirstVC.h" @implementation AppDelegate - (void)dealloc {     [_window release];

  • iOS中的音频服务和音频AVAudioPlayer音频播放器使用指南

    AudioServicesPlaySystemSound音频服务 对于简单的.无混音音频,AVAudio ToolBox框架提供了一个简单的C语言风格的音频服务.你可以使用AudioservicesPlaySystemSound函数来播放简单的声音.要遵守以下几个规则: 1.音频长度小于30秒 2.格式只能是PCM或者IMA4 3.文件必须被存储为.caf..aif.或者.wav格式 4.简单音频不能从内存播放,而只能是磁盘文件 除了对简单音频的限制外,你对于音频播放的方式也基本无法控制.一旦音

  • iOS系统和微信中不支持audio自动播放问题的解决方法

    前言 最近在做一个移动端项目,需要为H5配一段背景音乐且要自动播放,按照以往的方法将自动播放代码加入进去就可以了,可以却发生了点小插曲(捂脸),下面话不多说了,来一起看看详细的介绍吧. 移动端音频播放代码 css .pause { position: absolute; z-index: 10000; bottom: 10px; right: 10px;} .pause a { width:30px; height:30px; background:url(http://mat1.gtimg.c

  • IOS 播放系统提示音使用总结（AudioToolbox）

    IOS 播放系统提示音使用总结(AudioToolbox) 开发过程中需要用到苹果自带的系统提示音,下面我总结了一下关于系统提示音播放的方法 第一步首先得导入AudioToolbox框架 #import <AudioToolbox/AudioToolbox.h> 播放系统自带的提示声 播放系统自带的提示声很简单,只需要两行代码就能搞定了: //定义一个SystemSoundID SystemSoundID soundID = 1000;//具体参数详情下面贴出来 //播放声音 AudioSer

  • 解决ios audio无法播放问题

    ios中audio不能直接通过audio.play()播放,需要用户在click事件或者touch事件中执行audio.play()才能播放. ajax回调中audio.play()音乐不能正常播放. 用户点击按钮,等服务器返回数据后再播放相应的成功或失败的音乐,测试在ios中不能正常播放.猜测ios中的audio不能再ajax回调函数中play() 下面记录一下ios中ajax回调中播放音乐的问题解决过程 解决方案一 --降低音量 在用户点击时间后将audio的音量设置为0,等success后

  • 快速解决ios微信下audio无法自动播放的问题

    我们都知道,iOS下的safari是无法自动播放音乐的,主动出发点击事件也没用, 微信自己做了处理后用以下方法可以解决 document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); 但是现在实际上在微信ready的时候就可以直接调用了 wx.ready(function() { audio.play(); }); 以上这篇快速解决ios微信下audio无法自动播放的问题就是

  • 微信小程序audio组件在ios端无法播放的解决办法

    微信小程序audio组件在ios端无法播放的解决办法

    解决方法: 给 audio 组件绑定点击事件,手动触发播放暂停方法! 代码片段: wxml文件 <!-- 判断是语音通话,有通话记录,通话描述不包含'未接' --> <view class="reference" wx:if="{{itemList.activity_type === 'phone' && itemList.activity_reference_id && tool.indexOf(itemList.comme

  • 解决ios微信下vue项目组件切换并自动播放音频问题

    解决ios微信下vue项目组件切换并自动播放音频问题

    最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页 和结束页面 ,答题页关于每种题型 , 我做了相应的组件 , 每次切换题目的时候 ,显示对应的的组件 , 要求听音选图的时候会自动播放音频 . 惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridg

  • iOS AVPlayer切换播放源实现连续播放和全屏切换的方法

    iOS AVPlayer切换播放源实现连续播放和全屏切换的方法

    本文主要给大家介绍了关于iOS AVPlayer切换播放源实现连续播放和全屏切换的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: AVPlayer 切换播放源有三种方式: 第一种:采用系统自带的方法: [self.player replaceCurrentItemWithPlayerItem:item] ,但是在切换playItem前要把所有的通知,观察者移除,切换后重新添加. 第二种:把通知,观察者全部移除,player 置为nil,然后重新创建. githup上ZFPlayer

  • vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频.不光是这样,在页面加载完毕的情况下,用户没有click.dbclick.touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException: 解决

  • 解决ios端点击按钮闪烁问题（小tips）

    在ios端,safari浏览器上触发click事件有300ms的延迟相应,为touch添加的样式会和click冲突而出现闪烁问题 在safari中触摸事件的相应顺序如下: touchstart --> touchmove --> touchend --> click(300ms) 此时可试用以下样式取消click事件的默认样式来消除页面闪烁问题 *{ -webkit-tap-highlight-color:rgba(0,0,0,0); } (值得一提的是,300ms的延迟主要是用于判断用

  • 解决IOS开发空字符串的方法

    解决IOS开发空字符串的方法 实例代码: -(Boolean) isEmptyOrNull:(NSString *) str { if (!str) { // null object return true; }else if(str == Null){ return true; }else if([str isKindOfClass:[NSNull class]]){ return true; }else { NSString *trimedString = [str stringByTrim

  • 解决iOS UITextField 编辑时文本偏移问题

    解决iOS UITextField 编辑时文本偏移问题

    1.在cell中添加UITextField,在编辑的时候总是出现文本偏移问题,编辑结束时回复正常,解决方式如下: (1)代码创建UITextField,并添加上去,设置textField的一些属性: - (UITextField *)textField{ if (_textField == nil) { _textField = [UITextField new]; _textField.borderStyle = UITextBorderStyleNone; _textField.conten

  • 使用scrollTop(）解决IOS中输入法遮挡输入框问题

    经过测试,发现有的IOS浏览器上输入法会弹出遮挡输入框,网上很多都是介绍用以下方法 (function() { $('input').on('click', function () { var target = this; // 使用定时器是为了让输入框上滑时更加自然 setTimeout(function(){ target.scrollIntoView(true); },100); }); 但是由于本人对scrollIntoView的理解不够一直没有解决问题,后来用相同的思路使用scroll

随机推荐