uni-app IOS 音乐无法自动播放

最新推荐文章于 2024-07-20 16:58:03 发布
最新推荐文章于 2024-07-20 16:58:03 发布
阅读量3.7k 收藏
点赞数
分类专栏： uniapp H5 文章标签： 音乐 自动播放 uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37500884/article/details/95637401
版权
本文探讨了uni-app在iOS环境下H5页面中音乐无法自动播放的问题，分析了W3C的多媒体事件，并重点介绍了使用uni.createInnerAudioContext的方法尝试实现自动播放，但在iOS上遇到的问题。代码示例和现象描述揭示了安卓与iOS在处理音乐自动播放上的差异。
摘要由CSDN通过智能技术生成

uni-app IOS H5音乐无法自动播放

（前端小白有什么说得不对的，别怼太凶2333333）

（一）对W3C的了解

小编也是一个开发不久的前端小白，在对音乐和视频这些多媒体应用中也踩了一些坑
在我的思路中音乐播放不就是一个久解决了吗？
附上W3C的多媒体事件
在这里插入图片描述
在这里插入图片描述

有了这些根本不把这个事情放在心里。
但当我看到uniapp官网文档audio时就傻眼了
在这里插入图片描述
（surprised）没了很多方法的执行，最主要的是没有DOM对象。
但用了uniapp就要尊重框架的规定
让我还能绝处逢生的是 uni.createInnerAudioContext
https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext

最低0.47元/天 解锁文章
qq_37500884
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
移动端audio标签音频自动播放
06-01
移动端audio标签声音（音频）自动播放、暂停、停止、跳转到第几秒播放，可完全兼容苹果ios系统
uniapp 自动播放背景音乐
沉睡的博客
04-07 2065
uniapp 自动播放背景音乐 1.引入wx js-sdk的js文件 import wxj from "@/static/js/jweixin-1.6.0.js" //这是wx js-sdk的js文件 2.js调用播放事件，自动播放音乐 let that = this; function autoPlayAudio() { wxj.config({ // 配置信息,...
uniapp+vue3实现音乐播放器，包含上一首、下一首、暂停、播放、下载音频、下载视频、进度条拖拽、歌词等
最新发布
hyx_1225的博客
07-20 1193
uni-app中实现音乐播放器 1、主要利用的是uni-app中提供的uni.createInnerAudioContext()来进行实现； 2、代码示例 （1）主页面代码展示 <template> <view class="songDetailContainer"> <view class="bg" :style="{ backgroundImage: `url(${song.imageUrl})` }"></view>
uniapp小程序背景音乐自动播放、播放、暂停
m0_72642533的博客
02-27 4173
在做小程序的时候时常会用到背景音乐，对于背景音乐的使用有刚进入页面时会自动播放背景音乐，不想听点击暂停按钮，播放暂停，点击播放按钮，音乐播放。1、在html中添加两张图片：播放和暂停，v-show来动态切换图片显示，并绑定点击事件，实现手动暂停和播放音乐。2、创建音乐实例，data中声明初始化v-show表达式的值，true时图片为播放图片。3、若想要在刚进入页面时音乐就播放，需要在生命周期开始时页面渲染时添加自动播放。4、点击图片实现音乐播放的方法。
uni-app H5解决IOS音频不能自动播放的问题
qq_35992191的博客
04-01 5245
使用uniapp提供的api，在IOS的微信客户端中audio不能播放，网上有不同的说法，本人首次使用uniapp，摸索了几个小时，终于搞明白通过微信的config接口和ready接口配置才生效 先看uniapp的uni.createInnerAudioContext()接口示例 const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.s.
uniapp 运行到H5或微信小程序，无法自动播放音频
清音的博客
10-09 1144
【代码】uniapp 运行到H5或微信小程序，无法自动播放音频。
uni-app实现一进入H5页面，背景音乐自动播放
可可爱爱的你吖的博客
09-08 6961
最近写了H5的答题测试，有个需求是需要一进入页面背景音乐就要自动播放的。上代码 首页在APP.vue里面创建audio对象（一些属性还有方法，可以去看uni-app的官方文档uni-app的官方API） 然后在你想要一进入就自动播放背景音乐的页面中给出音频的地址 这样下次一进入这个页面，背景音乐就自动播放了，如果想要停止，可以在想要暂停音乐的某个页面中 加上一个stop方法就可以了 多说一句：这是一个uni-app开发的H5页面，主要实现的是答题测试性格的一个小东西。 ...
uni-app优医问诊-配套资料
05-04
uni-app是一个多端开发框架，它允许开发者使用Vue.js语法编写一次代码，就可以在iOS、Android、H5、小程序等多个平台上运行，极大地提高了开发效率。 该配套资料可能包括了以下关键知识点： 1. **uni-app基础**：...
uni-app登录实例的实现
10-29
在移动应用开发领域，uni-app是一个备受青睐的跨平台框架，它允许开发者用一套代码实现多端部署，包括iOS、Android、Web等。本实例将详细讲解如何使用HBuilderX工具来开发一个uni-app登录功能。 首先，我们需要了解...
基于Uni-app+Node.js音乐听歌系统的设计与实现
06-06
技术需求：前端采用Uni-app框架，框架语法为Vue + 小程序，基于组件、路由、...开发者通过uni-app编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
uni-app调用Android原生可以实现通信及打开WiFi
01-13
【uni-app调用Android原生实现通信及打开WiFi】\n\nuni-app是一个跨平台的前端框架，允许开发者使用一套代码编写应用，同时在iOS、Android、H5等多个平台上运行。在uni-app中，通过调用原生插件，我们可以实现与...
uni-app
02-22
【uni-app】是一款由DCloud（即数字天堂）开发的多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、字节跳动小程序等多个平台上运行。uni-app极大...
uniapp js自动播放音频
m0_70716007的博客
03-28 581
【代码】uniapp js自动播放音频。
uniapp H5端解决ios音频自动播放
peijiajing的博客
04-27 1957
<script> import wx from 'weixin-js-sdk'; // 引入微信SDK onLoad() { let that = this; innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.loop = true; innerAudioContext.src ='https://vkc.
H5 自动播放背景音频，兼容安卓和苹果手机， ios createInnerAudioContext 无法自动播放解决
a_靖的博客
03-03 5513
原因应该是IOS不允许自动播放音频，需要与用户有交互，就是用户点击一下之后，再调用就可以了 在main.js Vue.prototype.playAudio = function(audioUrl) { var innerAudioContext = null; innerAudioContext = uni.createInnerAudioContext(); //创建播放器对象 innerAudioContext.autoplay = false; innerAudioContext
uniapp 背景音乐自动播放，适配ios+安卓
weixin_48578764的博客
08-31 1075
【代码】uniapp 背景音乐自动播放，适配ios+安卓。
uniapp之音频播放器
weixin_72222776的博客
03-25 5833
uniapp音频播放器
uniapp实现简单的音乐播放器功能
weixin_46189958的博客
10-29 7155
uniapp实现简单的音乐播放器功能 问题描述： 创建并返回内部audio上下文来控制音乐播放 我是直接用scroll-into-view来实现的这个 <scroll-view scroll-y="true" class="gundong" :scroll-into-view="tolast" scroll-with-animation> <view :class="y == ind?'ind':'textarea'" v-for="(x,y) in inp1 " :key="y"
uni-app 微信小程序解决音频无法自动播放
琞、小菜
12-03 3496
我遇到的音频无法自动播放的原因是：音频使用的是本地文件，改为url（把音频文件上传到服务器）访问的形式即可。 但是使用本地文件并非所有机型都无法播放，测试过程中只发现iphone X 以上版本出现无法播放的问题。改为url访问后所有机型均可正常播放 代码如下： data() { return { Audio: uni.createInnerAudioContext(), // 创建 }; }, methods: { palyAudio() { this.Audio.sr
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值