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

最新推荐文章于 2022-11-26 20:13:03 发布
VIP文章 最新推荐文章于 2022-11-26 20:13:03 发布 21948 收藏 6
分类专栏： 日常踩坑 文章标签： ios中audio无法播放 H5在ios日常踩坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmyh100/article/details/80695271
版权

ios中使用audio，日常踩坑

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

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

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

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

3.判断readyState的值

  • 0 = HAVE_NOTHING - 没有关于音频是否就绪的信息
最低0.47元/天 解锁文章
阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
cmyh
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
解决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
audio:一个简单的 html5 音频标签包装器，可以跨 iOS 和 android2.3 的移动浏览器
07-11
声音的 一个简单的 html5 音频标签包装器，可以跨越 iOS 和 android2.3+ 的移动浏览器。 您可以创建一个播放器来播放歌曲列表。 您还可以创建多个播放器来播放不同的歌曲。 这些播放器默认是互斥的，你可以使用 needVioceMutex 参数来释放它。 用法 在您的页面中插入“audio.js”。 创建音频播放器： [removed] var myplayer = AudioPlayer(); myplayer.init(); myplayer.play(' '); </脚本>
详解Howler.js Web音频播放终极解决方案
01-19
前言 相信有很多人在写移动端音频播放的时候都踩过不少坑，特别是复杂音频项目在兼容多种设备的时候更是让你抓狂，比如ios端不能一开始就播放音频，必须要用户进行了操作。。。。 偶然间了解到了一个兼容所有设备和浏览器的音频引擎Howler.js 使用了一下非常完美 Howler.js 是一个新的 JavaScript 库用于处理 Web 中的音频，该库最初是为一个 HTML5 游戏引擎所开发，但也可用于其他的 Web 项目，Howler.js 基于 Google 的 Web Audio API，能够帮助你快速简单全面的控制音频。 特点及兼容性 Howler.js默认使用Web Audio，
iOS系统和微信中不支持audio自动播放问题的解决方法
08-29
最近在微信端开发H5的时候，audio标签在苹果机上无法进行自动播放，查找相关资料终于解决了，所以下面这篇文章主要给大家介绍了关于iOS系统和微信中不支持audio自动播放问题的解决方法，需要的朋友可以参考下。
关于IOS的audio的play不执行播放问题
weixin_43788820的博客
07-19 4019
一.点击播放 1.首先，苹果目前是屏蔽了javascript的audio的autoplay以及control的属性方式和play,paused。想要实现js的play或者paused的话，官网给出的说明是必须要用户手动active点击才能播放audio(苹果为了安全和用户体验着想~.~)所以这导致很多的前端开发人员搞音频播放类的项目很头疼，无法去做一些操作，比如默认播放某首音乐，或者做一些音乐相关的内容 2.其次，我在网上也搜了很多的相关文章，但是很多要不然就是很麻烦，要不然就是无法使用，完全就是无效，当然
Android、iOS手机端-添加背景音乐
张新丁
06-22 726
&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; //音乐自动播放 $(
H5 处理ios端部分mp3文件播放不了
iVRJay的博客
11-26 1559
有些mp3文件在pc端，安卓端可以正常播放，但是在ios设备上却不能播放，大概是给音频源文件转换格式时没有使用转换工具，而是直接修改的后缀，比如将【demo.wav】直接修改成【demo.mp3】，这样直接修改后缀而产生的文件在ios端会导致解码失败无法播放；- 但这样处理有个缺点就是如果文件太大，生成的base64链接地址会特别大，有可能导致手机卡顿，具体我没测试，我猜是这样的(￣▽￣)~*- 经测试在ios端能正常播放的mp3文件转成wav格式base64也是能播放的；
html5 audio play()方法部分ios机不能播放声音
anlangpan0314的博客
06-08 1941
前几天遇到了一个很奇葩的问题：执行audio.play方法，浏览器、安卓、部分ios可正常播放，部分ios不能播放部分声音，这就奇怪了。 我的第一反应是: 音频文件有问题 -- 写了一个domo验证，文件可正常播放 音频文件没有加载完成就播放 -- 绑定loadeddata事件发现音频确实已经加载完成 后来查阅了一些资料发现：ios禁止自动播放media的，必须通过用户的实际...
uniapp 小程序 ios 音频播放 没有声音的问题
qq_47247479的博客
03-14 2003
bug呈现方式 安卓没问题 苹果关闭静音打开声音依旧没有声音的问题 wx.setInnerAudioOption(Object object) 基础库 2.3.0 开始支持，低版本需做兼容处理。 以 Promise 风格 调用：支持 小程序插件：支持，需要小程序基础库版本不低于 2.10.0 属性：obeyMuteSwitch 类型：boolean 默认值：true 必填：否 说明：（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音 App.vue 配
小程序的createInnerAudioContext在iOS没有声音的解决方法
陈小白
06-15 2075
方法一 ： src里面的连接有中文的，可先通过 encodeURI 专门转码后再进行play() 方法二 ： src没有中文的 使用autoplay 没有生效的话 可使用 play()方法 进行播放操作，如果play()不行 可加个定时器 延迟播放 方法三 ： 因为小程序默认是根据系统的静音模式变动的 需要我们设置 obeyMuteSwitch 为false,这样就可以在静音模式下也有声音，在APP.JS的onLaunch生命周期配置一下...
RN-Open-Audio-Player:使用 React Native 打开音频播放器
05-29
一个使用React Native构建的简单音频播放器。 您可以在查看 Web 项目。 Set Up Firebase Project 要设置 Firebase Web 项目，请参阅本指南 [ ] 确保在 Firebase 项目中启用电子邮件和密码登录。 [ ] 设置 firebase 存储以保存音频和图像文件。 [ ] Set up The APIs 将基本 url 添加到 src/config.js 可用脚本 在项目目录中，可以运行： npx react-native run-android npx react-native run-ios
ExampleHTML5AudioStreaming:在iOS上使用HTML5音频和PhoneGap展示音频流的示例项目
05-20
示例项目显示在iOS上使用带有PhoneGapHTML5音频的音频流 为什么在这里？ 我当时正在研究PhoneGap中的一个广播流应用程序，并且由于PhoneGap中的一个错误，iOS Media API决定根据我在该应用程序先前版本中使用的本机...
positional-audio-cordova:使用cordova进行定位音频演示
05-31
科尔多瓦定位音频测试 html5rocks webaudio 教程演示的副本： ://www.html5rocks.com/en/tutorials/webaudio/positional_audio/ 安装 克隆并 cd 到 repo npm install -g cordova cordova platforms add browser ...
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...
vue.js降级(ios微信端audio不能播放的解决办法之一)
光
02-03 3132
还是在做qq音乐webApp~快完成了,在ios上测试的时候,发现所有audio的音乐都不能播放 几经搜索,找到了黄轶老师的一篇踩坑笔记 笔记中写的很多,关于为什么audio在ios上不能播放的根本原因和解决思路,受益颇多,感兴趣的推荐看下 回到正题,降低vue的版本可以解决ios微信端audio不能播放的问题, 但是网上看了很多,关于可用的降级的方法很少(几乎没有),我是这么做的:
h5 audio插入音乐之后，微信端 ios上不能正常播放，安卓上可以
xieqian0204的博客
02-21 1186
之前做了个类似易企秀的h5邀请函，发现微信端ios不能自动播放音乐，于是有了以下的解决方案  //html &lt;audio id="Jaudio" class="media-audio" src="yinyue.mp3" preload loop="loop"&gt;&lt;/audio &gt; //js &lt;script&gt; function audio
小程序createInnerAudioContext()音频播放iOS端真机调试无声音且不执行play函数
阿乐的博客
10-27 3251
小程序createInnerAudioContext()音频播放iOS端真机调试无声音且不执行play函数 分为两种情况： 1.播放音频地址含有中文字符； 2.播放音频地址不含有中文字符，且真机处于在静音模式下。 解决办法 1.第一种问题，在播放的地址上加encodeURI（）方法，可解决地址含有中文字符 innerAudioContext.src = encodeURI(voicePath); 2.第二种问题，在app.vue或者APP.js文件中加入ios端静音状态下可播放音频处理。 // ios端音
html5 audio标签在ios 微信内置浏览器中页面加载完成后自动播放声音
Julie_Go的专栏
03-20 5221
html5 audio标签在ios  微信内置浏览器中页面加载完成后自动播放声音,试了多种方法，目前只有下面的生效了，在android 和pc设备上可以直接使用 autoplaydocument.addEventListener("WeixinJSBridgeReady", function () { var _audio_url = _try_messages[0]['audio_url'...
H5 audio ios及微信端无法自动播放 暂停
little_boy_9527的博客
09-28 3058
css body{ background: #ccc; } .music-pic{ display: inline-block; width: 2rem /* 40/20 */; height: 2rem /* 40/20 */; overflow: hidden; background: url('music_icon.png') no-repe...
如何解决IOS 下固定定位fixed 失效问题？
最新发布
06-10
在 iOS 下，当页面出现滚动时，fixed 定位的元素会失效，这是因为 iOS 下的 Safari 浏览器默认会为滚动的元素添加一个滚动条，而 fixed 定位的元素会脱离文档流，因此会相对于整个文档进行定位，而不是相对于滚动的元素进行定位。 解决方法有两种： 1. 使用 overflow-scrolling：touch 在需要滚动的元素上添加 `-webkit-overflow-scrolling: touch;` 样式，可以让滚动的元素不会添加默认的滚动条，从而 fixed 定位的元素不会失效。 示例代码： ``` .scroll-wrapper { overflow: auto; -webkit-overflow-scrolling: touch; } ``` 2. 通过 JavaScript 实现 通过监听滚动事件，动态改变 fixed 定位元素的位置可以避免 fixed 定位的元素失效。 示例代码： ``` var fixedElement = document.querySelector('.fixed-element'); var scrollElement = document.querySelector('.scroll-element'); scrollElement.addEventListener('scroll', function() { var scrollY = this.scrollTop; fixedElement.style.transform = 'translateY(' + scrollY + 'px)'; }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cmyh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值