资讯专栏INFORMATION COLUMN

ios audio不能够正常播放

ad6623 / 2607人阅读

摘要:中不能直接通过播放,需要用户在事件或者事件中执行才能播放。回调中音乐不能正常播放。用户点击按钮,等服务器返回数据后再播放相应的成功或失败的音乐,测试在中不能正常播放。测试能够正常播放。

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中是播放不成功的。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/56856.html

相关文章

  • ios audio能够正常播放

    摘要:中不能直接通过播放,需要用户在事件或者事件中执行才能播放。回调中音乐不能正常播放。用户点击按钮,等服务器返回数据后再播放相应的成功或失败的音乐,测试在中不能正常播放。测试能够正常播放。 ios中audio不能直接通过audio.play()播放,需要用户在click事件或者touch事件中执行audio.play()才能播放。 ajax回调中audio.play()音乐不能正常播放。 ...

    sevi_stuo 评论0 收藏0
  • 微信h5页面audio标签在ios能自动播放

    摘要:背景介绍在一个页面中当用户提交表单到后台后台返回的结果成功的话开始自动播放背景音乐出现的问题在安卓手机上正常中没有反应后来网上一番搜索后了解到时因为不允许自动播放音乐除非用户做出了交互行为解决方案如果是在页面刚加载就需要自动播放音频的话还是 背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反...

    jlanglang 评论0 收藏0
  • 微信h5页面audio标签在ios能自动播放

    摘要:背景介绍在一个页面中当用户提交表单到后台后台返回的结果成功的话开始自动播放背景音乐出现的问题在安卓手机上正常中没有反应后来网上一番搜索后了解到时因为不允许自动播放音乐除非用户做出了交互行为解决方案如果是在页面刚加载就需要自动播放音频的话还是 背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反...

    jsliang 评论0 收藏0
  • 微信h5页面audio标签在ios能自动播放

    摘要:背景介绍在一个页面中当用户提交表单到后台后台返回的结果成功的话开始自动播放背景音乐出现的问题在安卓手机上正常中没有反应后来网上一番搜索后了解到时因为不允许自动播放音乐除非用户做出了交互行为解决方案如果是在页面刚加载就需要自动播放音频的话还是 背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反...

    bluesky 评论0 收藏0
  • 使用audio标签遇到的两个问题及解决方案

    摘要:第二天,后端主动问我那个问题解决了没。我就说了我的发现,最后后端将音频文件的返回方式调整为后,问题成功解决。总结一下发生这个问题的原因是音频类型文件请求的响应方式不对。以上是我使用标签时遇到的两个问题,和我的解决方案。 标签是 HTML 5 的新标签。标签定义声音,比如音乐各其它音频流   公司的项目需要使用这个标签。在使用的过程中遇到了两个问题:一个是部分手机浏览器无法实现自动播放(...

    levinit 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<