Javascript解决音频audio在IOS系统下无法播放问题

最新推荐文章于 2023-08-17 10:00:49 发布
最新推荐文章于 2023-08-17 10:00:49 发布
阅读量2.2w 收藏 6
点赞数 2
分类专栏： 日常踩坑 文章标签： ios中audio无法播放 H5在ios日常踩坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmyh100/article/details/80695271
版权
在iOS设备上使用JavaScript操作audio元素时常遇到播放问题。为确保音频正常播放，需在获取播放链接后进行特定步骤：首先在无链接时调用play()并暂停，然后加载网络请求的音频数据。接着检查audio的readyState状态，当状态为4时，设置currentTime为0初始化，并最终调用play()方法来播放音频。
摘要由CSDN通过智能技术生成

ios中使用audio，日常踩坑

必须！！！点击后即调用xxx.play()这个方法

但是我们音频链接数据如果是网络请求而来的，那我们可以这样做：

1.在无播放链接的情况下先调用一次xxx.play()，然后暂停xxx.pause()

2.请求到数据以后，替换链接

3.判断readyState的值

  • 0 = HAVE_NOTHING - 没有关于音频是否就绪的信息
最低0.47元/天 解锁文章
cmyh
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
解决在iOS中audio不能正常播放音频问题-1
weixin_44514665的博客
12-17 4287
场景 想要在微信浏览器里面实现”当用户点击某个元素，播放指定音频“ 问题 在部分iOS手机上，音频不能正常播放。测试发现iOS 12版本以及以下的版本可能会有播放问题。 解决办法： function baseMp3PlayIOS(id) { let audio = document.getElementById(id), my_play = function(){ ...
解决ios audio无法播放问题
01-05
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.v
快速解决ios微信下audio无法自动播放的问题
08-27
下面小编就为大家分享一篇快速解决ios微信下audio无法自动播放的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决h5标签audio在ios端不能自动播放的问题
weixin_39304726的博客
07-16 2549
在IOS端 audio是不能自动播放的 audio必须在点击的情况下才能播放 以下是全部代码 当你点击页面某个地方 都可以触发audio播放 延时的原因是 页面渲染事件大概17毫秒 时间随自己设定，这是我 ...
关于IOS的audio的play不执行播放问题
weixin_43788820的博客
07-19 5417
一.点击播放 1.首先，苹果目前是屏蔽了javascript的audio的autoplay以及control的属性方式和play,paused。想要实现js的play或者paused的话，官网给出的说明是必须要用户手动active点击才能播放audio(苹果为了安全和用户体验着想~.~)所以这导致很多的前端开发人员搞音频播放类的项目很头疼，无法去做一些操作，比如默认播放某首音乐，或者做一些音乐相关的内容 2.其次，我在网上也搜了很多的相关文章，但是很多要不然就是很麻烦，要不然就是无法使用，完全就是无效，当然
微信中，audio不能ios中自动播放的问题
weixin_41417458的博客
01-07 229
H5页面弄了audio 发现在微信中打开,只有安卓手机能自动播放,ios 并不能自动播放 通过调用微信的插件得以解决 首先要引入一个微信js <script type="text/javascript" src="js/jweixin.js"></script> <audio id="audio" autoplay="autopaly;loop;contro.
js控制音频播放无效
最新发布
Mitin_的博客
08-17 612
在开发一个聊天客服的时候，有一个需求就是，当用户发送消息过来的时候，客服需要有声音提示。
Html5-audio标签简介及手机端不自动播放问题
weixin_33713503的博客
04-24 788
1、audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio> 不支持audio元素的浏览器会显示标签内文字 src:音频地址 autoplay:音频加载完毕后自动播放。 controls:显示播放控...
js 没错也报错怎么办_怎么解决js在ios中播放音频.play()方法报错的问题
weixin_31346703的博客
12-23 1994
由于app改版的比较频繁，主管有个想法就是说，我们先做个测试的版本全部用html5写，主要针对ios端，安卓端貌似没有很严格的样子。因为ios的审核比较严格点，在之前的开发中就遇到用js去播放音频无效提示.play()方法不存在的错误。这次在改版的过程中还是遇到了要播放音频的效果，于是这次认真的研究了一下。没错，居然成功的解决了，js怎么在ios中使用.play()的方法播放音频的问题。效果如下：...
Android、iOS手机端-添加背景音乐
张新丁
06-22 849
&lt;audio style="display:none; height: 0" id="bg-music" preload="auto" src="../static/videos/bg-music.mp3" loop="loop"&gt;&lt;/audio&gt; &lt;script&gt; //音乐自动播放 $(
iOS系统和微信中不支持audio自动播放问题的解决方法
08-29
在本文中，我们将探讨如何解决这一问题，以便在iOS设备上的微信环境下实现H5页面的音频自动播放。 首先，我们需要了解iOS系统对音频播放的策略。苹果设备为了节约电量和防止用户被打扰，要求音频播放必须由用户交互...
IOS微信摇一摇声音无法播放的解决办法
08-27
为了保护用户的体验，iOS系统限制了应用程序在没有用户交互的情况下自动播放声音。这个问题在微信摇一摇功能中尤为突出，因为摇一摇通常不需要用户手动触发。为了解决这个问题，我们可以采取以下策略： 首先，我们...
IOS中微信小程序播放缓存的音频文件的方法
08-28
需要注意的是，在微信小程序中播放音频文件需要注意的一点是，如果使用audio标签来播放在线的音频文件，假如服务端没有实现断点续传，IOS是无法播放的。这是因为IOS平台对于音频文件的播放有着严格的限制，需要...
h5 audio音频文件流在ios中无法正常播放的大坑解决
qq_33593958的博客
01-15 1万+
1、通过文件流 2、循环多个audio标签来播放 3、android可以ios出现加载最后一点后闪退，文件损坏 4、android可以播放、ios能播放但是没有声音 以上是遇到的大坑之旅。。。下面就直接来为屌丝们来解决： var $audio = document.getElementById("audio"+index); var source = document.createEleme...
IOS的移动端audio自动播放（多种场景）
洛了个洛的博客
03-05 1万+
前言：为什么单说ios而不说安卓呢，因为ios的安全机制，把audio的canplay事件禁止了，导致了ios设备上自动播放功能不能简单的实现，需要用户点击一次才能播放。而安卓却没有这些问题，这也算是展现了两个系统的对于开放与安全的理解吧。 ios的audio标签在用户点击了一次之后才能播放，假如你的项目需要刚进页面就播放或者需要异步请求音频链接，那你肯定对这个ios的安全机制恨之入骨...
iOS设备上回声消除的例子
热门推荐
彳亍而行的专栏
06-02 2万+
Apple在Core Audio中提供了回声消除的接口，我写了一个测试APP，测试了其效果。链接：<https://github.com/lixing123/iOSEchoCancellation>
H5解决在IOS端无法默认播放音频文件问题！
u013952845的博客
09-23 814
直接上代码吧：记住要调用微信js才可以， 微信js地址： <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 一定要用document.getElementById('shakemusic') 方式去获取 var audio = new Audio(); audio.preload = 'auto'; audio.src = 'https://www.17sucai..
解决IOS下音频文件无法播放的问题
持續的博客
02-07 3331
近期项目中有个需求，需要点击按钮播放文字答案，然后开始了填坑之旅 首先使用h5的audio标签，由于后台返回音频格式为base64格式，原格式为wav，开始不确定是否可以直接播放base64格式的音频，前端通过npm的base64ToBlob的方式解码，并赋值给audio的src，具体代码如下： //答案语音播放 playVoice(text,e){ let audio = this.$refs.audio; // 提取返回答案中的文字 let reg = /.
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值