微信小程序播放音乐的方法有很多种，这里总结一下其中两种的优缺点，主要是最近用到了

audio组件

这个是最简单的

<audio src="播放链接" id="music"></audio>

其他的就不多说了，说一下现在微信文档里没有的action属性

action属性可以选择组件对应的动作，比如播放或暂停，具体如下

<audio src="播放链接" action="play" id="music"></audio>

或者

data{action:{ method:'play' }
}

<audio src="播放链接" action="{{action}}" id="music"></audio>

不过这样的话要考虑渲染延时问题，具体在这里：audio组件渲染层错误

audio组件操作简单，但是有些功能不好实现，或者说功能太单调了，比如想要一个自定义的音乐进度条，或者显示音乐时长和已播放时间，那么该怎么得到组件中音乐的时长？又怎么跳到对应的进度？

之前还有个audioContext，可以和组件的id绑定，从而操作组件的行为，但是现在audioContext不维护了，不过还有个innerAudioContext

innerAudioContext

可以在page外定义一个innerAudioContext，这样可以在其他方法中对同一个innerAudioContext进行操作，也不需要重复定义

const innerAudioContext = wx.createInnerAudioContext()
page{onload(){innerAudioContext.autoplay = trueinnerAudioContext.src = '播放链接' var duration = innerAudioContext.duration  //获取总时长innerAudioContext.seek(666)      //跳至对应的时间，单位为秒}}

利用slider实现进度条

<view class="timebox"><view>{{passTime}}</view><slider block-size="12" bindchange="sliderChange" value="{{sliderSeek}}"></slider><view>{{musicEndTime}}</view>
</view>

const innerAudioContext = wx.createInnerAudioContext()Page({data: { musicId: "",musicDuration: <any>[],musicEndTime: "",passTime: "00:00",sliderSeek: <number>{},},getMusicEndTime: function () {               //拿到时长var duration: numberinnerAudioContext.onCanplay(() => {innerAudioContext.durationsetTimeout(() => {duration = innerAudioContext.durationthis.setData({ musicDuration: duration })var min = parseInt(duration / 60)var sec = parseInt(duration % 60)if (min < 10) {min = `0${min}`                //以00:00的格式保存}if (sec < 10) {sec = `0${sec}`}this.setData({ musicEndTime: `${min}:${sec}` })}, 10);})},updataSlider: function () {               //自动更新进度条var duration: numbervar value = 0let that = thisvar timeSeekvar interval: number | null = nullinnerAudioContext.onPlay(() => {innerAudioContext.durationsetTimeout(function () {            //setTimeout fuction 是个闭包duration = innerAudioContext.duration;if (interval != null) {                //检查定时器是否重置clearInterval(interval)              console.log("interval!=null")} else {interval = setInterval(function () {             //设置定时器value += 1timeSeek = parseInt(100 * value / duration)// console.log(that.data.sliderSeek)var min = parseInt(value / 60)var sec = parseInt(value % 60)if (min < 10) {min = `0${min}`              //改为两位数格式}if (sec < 10) {sec = `0${sec}`              }console.log(min + ":" + sec)that.setData({ passTime: `${min}:${sec}` })if (timeSeek >= 100) {                      //进度条进度达到一百重置clearInterval(interval)timeSeek = 0console.log("进度条百分比大于一百")}that.setData({ sliderSeek: timeSeek })}, 1000)}}, 10)})},onLoad() {this.getMusicEndTime()this.updataSlider()let id = this.data.musicIdinnerAudioContext.autoplay = trueinnerAudioContext.src = 'http://music.163.com/song/media/outer/url?id=' + id},
})

需要注意的duration得这样拿，不然会拿到0或者undefined

getMusicEndTime: function () {               var duration: number                           innerAudioContext.onCanplay(() => {innerAudioContext.duration                        //先初始化setTimeout(() => {                                //再timeout延时duration = innerAudioContext.duration            //duration才不为0，缺一不可    }, 10);})
}

有时间再更新一下滑动进度条更改歌曲进度的实现

微信小程序播放音乐的方法中的两种方法相关推荐

小程序底部弹窗css_微信小程序之animation底部弹窗动画（两种方法）
简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果,这里分享的是点击按钮后底部弹窗的动画效果.第一种方式是动态设置显示区域的高度,第二种方法是动态设置显示区域的移动的位置( ...
微信小程序播放音乐并同步一次显示一行歌词
主要是对于歌词部分的描述 gitee项目仓库地址 https://gitee.com/manster1231/master-cloud-music(点个star哦!) 1.总体思路先在加载页面时异步 ...
微信小程序-（js和wxml中）utils公共方法使用
通过开发者工具快速创建了一个 QuickStart 项目时,会生成一个utils/util.js文件. util.js const formatTime = date => {const yea ...
微信小程序之获取用户信息（流程+2种方法）
获取流程图 ui库Vant Weapp:Vant Weapp地址(点击跳转) 第一种方法适用于直接点击登录获取在界面添加登录按钮,用户点击按钮调用wx.getUserProfile()函数来提示用 ...
微信小程序开发--如何在swiper中显示两个item以及下一个item的部分内容
如何在swiper中显示两个item以及下一个item的部分内容我所实现的效果我实现的代码 <!--要展示两个item 以及下一个item的部分内容,ci ...
微信小程序实现动态横向步骤条的两种方式
1.实现效果 2.实现原理方法一: 页面总宽:750rpx ,去除相应间距等,留有长度600rpx左右.当列表的索引为0时,不显示步骤条横线, 即每个步骤条的宽度为600/(总步骤数-1)rpx. ...
微信小程序播放音乐(仿QQ音乐)
效果图如下所示 .wxml <image mode="widthFix" class="music-image" src="{{mush[num ...
微信小程序实现音乐播放器（2）
文章目录前情提要 BackgroundAudioManager API:wx.setNavigationBarTitle() 搭建静态资源服务器小程序项目 app.json app.wxss pa ...
微信小程序之音乐播放
微信小程序之音乐播放这次用的是API中的wx.createInnerAudioContext()接口 (创建内部 audio 上下文 InnerAudioContext 对象.) InnerAudi ...

微信小程序播放音乐的方法中的两种方法

audio组件

innerAudioContext

利用slider实现进度条

微信小程序播放音乐的方法中的两种方法相关推荐

最新文章

热门文章