微信小程序innerAudioContext本地音频播放

原创 已于 2022-04-11 21:40:54 修改 · 6.8k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

于 2020-02-27 17:15:16 首次发布
本文解析了微信小程序中innerAudioContext组件对于音频文件路径的支持情况，指出其不支持相对路径，而需使用绝对路径。通过实例展示了正确的音频文件路径设置方法。

微信小程序innerAudioContext本地音频播放文件路径不支持相对路径

innerAudioContext.src = '../images/test.mp3'

应该使用绝对路径

innerAudioContext.src = 'pages/images/test.mp3'

超级计算器小程序码

精选资源
微信小程序播放缓存的音频文件
03-29
但是最近在处理微信小程序播放缓存到本地的音频文件的时候，遇到一些小问题，然后对于安卓和IOS需要采用不同的播放策略。 首先，如果哪怕用audio标签来播放在线的音频文件，假如服务端没有实现断点续传，IOS是无法...
微信小程序开发—audio音频播放
03-29
微信小程序开发—audio音频播放功能实现。       (此图片来源于网络，如有侵权，请联系删除! )   一.知识点 （1）.audio为音频组件，我们可以轻松的在小程序中播放音频。 (此图片来源于网络，如有侵权，请联系删除! ) 整理下就是： (此图片来源于网络，如有侵权，请联系删除! ) （2）.API 1.wx.createAudioContext(audioId):创建并返回 audio 上下文 audioContext 对象  audioContext:audioContext 通过 audioId 跟一个 <audio/> 组件绑定，通过它可以操作对应的 <audio/> 组件
微信小程序—InnerAudioContext实现一个音乐播放器
WeiHan_Seven的博客
03-02 3408
直接上效果： 体验： 自定义系列>>音乐播放器 功能描述： 1、可播放、暂停内置的一条音乐 2、可控制播放进度 3、音乐封面在播放过程中实现旋转动画 4、背景图片表现为音乐封面的高斯模糊 5、离开页面音乐停止播放 完整代码： js const app = getApp() const innerAudioContext = wx.createInnerAudioContext();...
关于 uni.createInnerAudioContext 或者 wx.createInnerAudioContext 播放本地音频
weixin_41013858的博客
06-04 3636
今天有个需求，就是播放本地的音频，但是，网上找了一圈，都说的是播放网络音频。幸运的是，在微信公众社区里面找到了解决的办法，就是直接用绝对路径，比如 “/static/mp3/XXX.mp3”,这样就可以播放了，不管是uni.createInnerAudioContext 还是wx.createInnerAudioContext 都没问题 了。 之前写的是 “@/static/mp3/XXX.mp3” 和"../../static/mp3/XXX.mp3" 都不能播放 ...
微信小程序-音频播放 每次都是重复播放同一条录音
Himhim的笔记
08-02 9924
前言 在调试微信小程序音频播放时，刚开始我也是直接复制官方文档的实例： const innerAudioContext = wx.createInnerAudioContext() innerAudioContext.autoplay = true innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21x...
微信小程序音频的使用：wx.createInnerAudioContext的使用
lily2016n的博客
08-24 1万+
需求是一进来音乐就开始播放，本来以为只有wx.playBackgroundAudio（使用后台播放器播放音乐，对于微信客户端来说，只能同时有一个后台音乐在播放。当用户离开小程序后，音乐将暂停播放；当用户在其他小程序占用了音乐播放器，原有小程序内的音乐将停止播放。）才能实现。还是文档没仔细看。发现有更好用的wx.createInnerAudioContext。 由于自己是边写项目边看文档，发现自己...
开发 | 微信小程序audio音频播放组件+api_wx.createAudioContext
weixin_34220963的博客
02-06 1045
引言： audio是微信小程序中的音频组件，可以轻松实现小程序中播放/停止音频等自定义动作。 附上微信小程序audio组件的相关属性说明：https://mp.weixin.qq.com/debu... 本次将通过小程序audio的 poster、name、author、src、id、controls 属性，以及相关api：wx.crea...
微信小程序获取音频时长与实时获取播放进度问题
10-18
微信小程序在开发中涉及到音视频内容的播放是非常常见的功能需求，尤其是对于音乐播放器类、在线教育类或者语音服务类的小程序来说，准确获取音频时长和实时播放进度对于用户体验至关重要。本篇文章主要针对微信小...
IOS中微信小程序播放缓存的音频文件的方法
08-28
其中，音频播放功能是非常重要的一部分，本文将分享如何在微信小程序中播放缓存到本地的音频文件的方法。 在微信小程序中播放音频文件有多种方法，但是需要根据不同的平台采取不同的策略。在IOS平台上，微信小程序...
微信小程序播放音频
最新发布
Yzccccccccccg的博客
06-02 2300
总结 通过本文的介绍，我们可以看到，在微信小程序中播放音频是非常简单的。只需准备好音频文件，并编写相应的代码，就可以实现音频的播放功能。第四步，优化播放效果 为了提升音频播放效果，我们可以在小程序中添加一些其他的功能，比如显示音频的播放进度、音频的总时长等信息，或者添加音频的循环播放功能等。第三步，添加用户交互 为了提升用户体验，我们可以在小程序界面上添加一些按钮或者控件，实现用户对音频的控制。通过在wxml文件中添加按钮，并在对应的js文件中编写相应的事件处理函数，就可以实现用户对音频的控制操作。
精选资源
微信小程序音乐播放组件
12-06
在微信小程序中，开发者可以利用`createInnerAudioContext`接口创建一个音频上下文对象，用于实现音频播放功能。这个接口是微信小程序专为小程序内音频处理设计的，它提供了丰富的控制音频播放的能力，如播放、暂停...
【uniappl里面uni.createInnerAudioContext()使用本地路径开始无法播放音频，使用网络地址能正常播放音频的问题】
jsmylo的博客
11-24 4385
#uniappl里面uni.createInnerAudioContext()使用本地路径无法播放音频，使用网络地址能正常播放音频的问题。 一开始使用本地相对路径无法播放音频。使用网络路径能正常播放，折腾了半天，后来安卓机重新编译运行后，可以正常播放。 解决方法：在安卓机上面，用本地路径是可以播放的。需要重新编译运行程序。 ...
微信小程序：wx.createInnerAudioContext的使用
热门推荐
胡世林的博客
03-29 2万+
百度了一下，很多都是使用的createAudioContext对于使用createInnerAudioContext  的反倒比较少，但是人家那儿写着升级版，所以想了下还是使用的createInnerAudioContext比较好点wxml代码如下：&lt;!--当前为停止状态 --&gt; &lt;view style="width:250rpx;height:250rpx;left:250r...
上传声音 微信小程序_微信小程序 audio音频播放详解及实例_JavaScript_脚本之家...
weixin_39753674的博客
12-22 1048
微信小程序 audio音频播放audioaudio为音频组件，我们可以轻松的在小程序中播放音频。属性名类型默认值说明idStringvideo 组件的唯一标识符，srcString要播放音频的资源地址loopBooleanfalse是否循环播放controlsBooleantrue是否显示默认控件posterString默认控件上的音频封面的图片资源地址，如果 controls 属性值为 fals...
微信小程序—audio(音频)
Afanbaby的博客
12-19 1万+
今天来介绍一下微信小程序中音频播放控件–audio 官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html 1.效果图如下，2.index.js中： //index.js //获取应用实例 const app = getApp() var isLoop = true; var isControls = true; P
微信小程序：使用InnerAudioContext做一个简单的音频播放器
immocha的博客
01-31 5141
官方已经不再维护audio 组件，推荐使用InnerAudioContext API 参考：https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/InnerAudioContext.html
微信小程序中音频播放
qq_45219069的博客
03-21 7015
如何在小程序中实现音频播放 需要注意几点 由于现在官方不再维护 audio 组件 ，所以音频播放尽可能采取 wx.createInnerAudioContext() 接口 （ 若需要在后台播放，则采用 wx.getBackgroundAudioManager() ） 音频播放，只有在播放时才可以获取到音频长度（参考了多个带音频的小程序 qq音乐，百度网盘等，都是采取自动播放的方式，以获取...
微信小程序 用wx.getRecorderManager()和wx.createInnerAudioContext()制作一个简单的录音播放器（录制以及播放）
m0_50516958的博客
08-31 1902
音频录制、播放音频、暂停音频、计时器、简易
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

SOC罗三炮

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

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

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

打赏作者

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

抵扣说明：

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

余额充值