vue.js降级(ios微信端audio不能播放的解决办法之一)

最新推荐文章于 2024-07-31 10:06:40 发布
最新推荐文章于 2024-07-31 10:06:40 发布
阅读量3.2k 收藏 2
点赞数
分类专栏： 踩坑 vue 移动端 文章标签： vue ios html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31393401/article/details/79246735
版权
vue 同时被 3 个专栏收录
23 篇文章 2 订阅
订阅专栏
踩坑
21 篇文章 1 订阅
订阅专栏
移动端
11 篇文章 1 订阅
订阅专栏

还是在做qq音乐webApp~快完成了,在ios上测试的时候,发现所有audio的音乐都不能播放

几经搜索,找到了黄轶老师的一篇踩坑笔记
笔记中写的很多,关于为什么audio在ios上不能播放的根本原因和解决思路,受益颇多,感兴趣的推荐看下

回到正题,降低vue的版本可以解决ios微信端audio不能播放的问题,
但是网上看了很多,关于可用的降级的方法很少(几乎没有),我是这么做的:

在package.json中,锁死vue和vue-template-complier的版本为2.3.3,去掉版本号前的^,依赖文件夹node_modules里删掉2个原来版本的文件夹,cnpm i => 测试 => success~!

光就一个字
关注
专栏目录
H5的视频解决方案(1) —— mobile video内联播放
Joyce的前端日常
08-03 1万+
mobile内联播放 (1) webkit-playsinline和playsinline (2) android微信 (3) 最佳实践 (4) 其他尝试和存在问题 mobile内联播放 内联播放指的是视频在文档流中直接进行播放，不会弹出新的播放窗口的方式。 <video id="video&
帮你总结web前端校招面试题合集，成功拿下offer
weixin_56134381的博客
03-29 1434
前言 正值校招季，如何拿到心仪的 offer，进入梦寐以求的大厂，实现自己的职业理想。是每一位计算机相关专业学生的一个梦想，对此我特地为大家整理了各大厂前端面试题，希望能帮助各位进大厂。 大厂面试题（点击查看） 第一章 HTML 1.浏览器页面有哪三层构成，分别是什么，作用是什么? 2.HTML5的优点与缺点？ 3.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? 4.HTML5有哪些新特性、移除了哪些元素？ 5.你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么? 6.每个HTM
ios vue 添加本地音乐_vue 项目，ios上audio音频 无法自动播放
weixin_39598069的博客
12-19 187
// 音乐播放function autoPlayMusic() {// 自动播放音乐效果，解决浏览器或者APP自动播放问题function musicInBrowserHandler() {musicPlay(true);document.body.removeEventListener('touchstart', musicInBrowserHandler);}document.body.add...
微信小程序InnerAudioContext IOS真机无法播放声音
xyphf的博客
10-28 3218
如果开发模拟器可以播放，而IOS真机无法播放，可能你的手机设置了静音。要仔细看一下文档了。 InnerAudioContext | 微信开放文档 wx.setInnerAudioOption(Object object) | 微信开放文档 wx.setInnerAudioOption() IOS静音无法播放 | 微信开放社区 ...
VUE篇之音频播放可视化
最新发布
ae_pppppp的博客
07-31 385
【代码】VUE篇之音频播放可视化。
浅谈微信小程序中的坑之二：iOS背景音乐不能播放(Android 和 开发者工具可以播放)
IT_aLun的博客
10-12 6644
1、问题描述： （1）使用微信小程序的  wx.playBackgroundAudio(Object object) 等不再维护的接口向 wx.getBackgroundAudioManager 中转移，来管理微信小程序的后台播放器播放音乐。 （2）在微信开发者工具中可以播放背景音乐，真机调试：Android手机可以正常播放背景音乐；但是 ios 在真机调试的时候不能正常播放，没有声音。 2...
微信小程序播放语音|audio播放mp3|audio播放音频在IOS|苹果手机上外放没声音，戴上耳机就有声音【解决办法记录】
04-06 2317
以前项目中遇到的问题，在这里记录一下 语音播放使用的 wx.createInnerAudioContext() 诡异问题记录： 在安卓上都没问题，语音发送接收之后播放都没问题，就是在 IOS 上播放没声音，戴上耳机就可以听到声音，不戴耳机就没声音，音量加到最大还是没声音… 看手册： 有一个 API 叫 wx.setInnerAudioOption obeyMuteSwitch 选项 默认值：true（仅在 iOS 生效）是否遵循静音开关，设置为 false 之后，即使是在静音模式下，也能播放声音 原因找到
vue 项目，ios上audio音频 无法自动播放
GUOQIPING_的博客
12-25 2059
spa页面，初次进入音乐播放界面的时候，在ios上无法自动播放，通过play()方法还是无法实现播放。百度了好多，一些都没用的， 首先写入audio()标签，引入音乐 然后再methods（）中写入以下方法 最后调用就可以了 ...
Web前端面试题整合，持续更新【可以收藏】
jason的java世界
12-12 1455
css相关、JS相关、浏览器网络相关、vue相关、react相关、移动端相关、插件及工具相关、前端性能优化、原生通信、算法相关、node相关、计算机基础
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
前端面试题整理（一）
热门推荐
cyqiangweihua的博客
01-31 2万+
1、什么是HTML HTML 指的是超文本标记语言 (Hyper Text Markup Language)，不是一种编程语言，而是一种标记语言，是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序...
Vue.js 版本：v2.6.10
10-20
Vue.js为方便使用放上的，可以自行去官网下载其他版本的内容。 vue学习地址https://blog.csdn.net/baidu_41690072/article/details/102650675
vue项目 audio标签在ios 微信公众号中不能播放声音问题
smdemo的博客
06-04 2406
造成这个原因主要是ios的系统导致的。 解决的办法也就是在播放声音之前播放一个空白的音频。 代码如下： 首先判断一下是否是ios设备，因为在播放音频之前加上 self.$refs.myaudio.play()这句代码的话，对安卓设备会有影响，主要影响是不能播放音频。所以要做一个判断。 之后的代码是： if (self.$refs.myaudio.pause){...
vue项目JS播放音频音效和背景音乐
鹏多多的博客
09-08 5892
博主最近在做一个线上直播互动课堂的Vue项目，里面有一些这样的互动：老师奖励学生A一个奖章，要自动播放得奖的音效。得到这个需求，博主立马开码。 myPlay(){ let mp3 = new Audio(); mp3.src = "./奖励的声音.mp3"; mp3.load(); mp3.play(); setTimeout(() => { mp3.pause(); }, 3000); } 结果一直报错 度娘告诉我，浏览器18年改版
js控制ios设备在微信打开网页时，自动播放音乐
weixin_33724659的博客
08-29 534
实际情形： 今天在公司做一个微页的项目，涉及到在微信里面点击链接或者是扫描二维码，打开链接的时候，自动播放音乐。 这个功能是非常简单的，直接在HTML页面插入如下代码即可。 <audio src="1.mp3" autoplay="autoplay" controls></audio&g...
小程序ios音频播放没声音问题的解决wx.setInnerAudioOption
wlm123565的博客
04-07 3397
问题描述： 使用audio控件wx.createInnerAudioContext();播放音频 。开发者工具和安卓手机上都可以正常播放音频，但是IOS没有声音。 解决路径： wx.setInnerAudioOption(Object object) 基础库 2.3.0 开始支持，低版本需做兼容处理。 本接口从基础库版本2.10.0起支持在小程序插件中使用 设置InnerAudioContext的播放选项。设置之后对当前小程序全局生效 https://developers.w...
vue 微信公众号IOS手机 自动播放audio问题
CiCi2012_3_6的专栏
04-07 676
<audioclass="player"ref="audio"loopautoplaypreload> <source src="xxxxx"> </audio> 试过网上很多种方法,都没触发,例如下面这个 //微信浏览器内部初始化完成后 document.addEventListener( "Weixi...
vue.js学习笔记：audio标签实现钢琴弹奏
qq_50662136的博客
04-06 816
1、钢琴键盘布置 1、html代码，在键盘内绑定CSS类white、black，用于切换当该键按下松开时的样式，使用v-on监听鼠标事件； <div id="app"> <!-- 钢琴键盘布局 --> <ul :style="{color:fontcolor}" @mouseup="presskey('up')"> <li><div :class="{white:index==1}"@mousedown="press
Vue动态设置audio/video的src不能播放的问题
@梢的博客
09-17 6794
Vue动态设置audio/video的src不能播放的问题 <audio ref="myAudio" :src="playSrc" > 您的浏览器不支持音频播放 </audio> 这里默认列表第一个音频 data () { return { playSrc: this.audioList[0], } }, 当我动态去更改src的后要调用load() 方法重新加载一下（myAudio是我自
Vue.js实战：微信网页授权与分享功能及其本地测试指南
本篇文章主要介绍了如何在Vue.js单页应用中实现微信网页授权和...通过这篇文章，读者可以了解到Vue.js单页应用中微信开发的核心步骤和常见问题解决方案，对于从事微信相关项目开发的开发者来说，这是一份实用的指南。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值