今天项目上涉及到了微信小程序播放音频功能,所以今天跟着一些教程做了个简单的播放器 1.实现思路 刚开始想着有没有现成的组件可以直接用,找到了微信的媒体组件 audio,奈何看着 1.6.0版本开始,该组件不再维护.就百度了一下,还好有另一种方式,使用 InnerAudioContext 来实现音频播放 2.界面预览    点击播放,播放按钮改变为暂停,播放后展示进度条,可 拖动/点击 进度条实现进度控制,可设置倍速 没有UI设计,所以界面很丑,界面后续完善,功能实现就行啦 3.界面代码 WXML…

先来个效果图韵下味: 需求: 音频的播放,暂停,中间按钮状态的变化,播放时实时更新播放进度: 前进15s,后退15s: 进度条拖动. 一开始想着这3个功能应该挺简单的.不就是播放,暂停,前进,后退么~呵~写的时候发现自己还是太年轻.当然,这跟自己的技术功底有关系.现在把我遇到的难点及要注意的点说一下~ 需要设置一个名为seekPosition的全局变量,初始值为0.我们要在播放的时候实时记录播放的位置,存到该变量里,这是方便在前进15s 或 后退15s 时计算时间点. 前进15s时要判断剩余时间…

不多说了,直接贴code // 1.2版本以后便不在维护 wx.getBackgroundAudioManager({ success:function(res){ var status =res.status; if(status!=1){ // 没有在播放 }else{ wx.pauseBackgroundAudio(); } } }); // 1.2版本以后推荐的 const backgroundAudioManager = wx.getBackgroundAudioManager() i…

由于微信小程序官方将音频的样式固定死了,往往再工作中和UI设计师设计出来的样式不符,故一般都采用背景音频播放来实现自定义的UI样式的音频播放,即使用官网API提供的BackgroundAudioManager进行操作 也可以去官网https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.play.html查看详情 第一步,在对应的wxml页面添加如下代码,e…

最近在写一个艾美食艾音乐的微信小程序,其中有用到音乐播放的功能,基本播放切换功能已经实现,但是在反复切换歌曲.重新进入歌曲以及单曲循环.列表循环的测试过程中还是发生了bug,特此写一篇文章,捋一下思路.(功能写到后面小程序官方文档将音频这一块全都更新了...) 坑点:由于小程序主体部分没有app.wxml,这就导致小程序不能写一些公共的页面结构,如果有相同的部分,只能封装成组件再引入. 在我们点击歌曲列表中的某首歌的时候,会进入音乐播放界面,当我们退出音乐播放界面,歌曲仍然继续播放,但此时由于退…

写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.cn/xiaocx/show_53774.html 3.写的过程中参考了前辈们的方法,借过几位博客园.CSDN.简书前辈的路,这里表示感谢. 4.官方API很重要 写在第二 资深大牛在地铁上问我有没有玩过微信小程序,自觉惭愧.于是萌发了写个小程序长长见识的想法,毕竟,谁都想要做一位行业大牛嘛. 写这个…

一. 视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 1.1. 数据绑定 1.1.1. 普通写法 <view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } }) 1.1.2. 组件属性 简直和上面没区别啊 <view id="item-{{id}}"> </view> P…

小程序推荐使用wx.createInnerAudioContext()创建的innerAudioContext,我们也通过这个接口创建音频.音频的长度可以通过属性获取: 但是,给innerAudioContext赋值src后就能获取吗,请看下面的例子: onLoad: function () { bgM = wx.createInnerAudioContext(); bgM.src = 'https://upyun.lesson.bbwansha.com/dub/user/2.mp3'; con…

wxml <image bindtap="click" src="{{isPlay?'/images/':'/images/'}}"/> JS Page({ data:{ isPlay:false }, onLoad(){ var self = this; //监听音乐播放 wx.onBackgroundAudioPlay((result)=>{ self.setData({ isPlay:true }) }); //监听音乐停止 wx.onBac…

1.效果图如下: 2.代码如下: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用…