微信小程序音频播放，可拖动进度条，可有时间显示

最新推荐文章于 2025-04-21 15:36:07 发布

嘿嘿嘿呀呀呀

最新推荐文章于 2025-04-21 15:36:07 发布

阅读量8.2k

点赞数 5

CC 4.0 BY-SA版权

文章标签：音频前端

本文链接：https://blog.youkuaiyun.com/xiaoqingqing521/article/details/103655152

首先来展示一下效果：

中间的播放条以及下面的浮窗就是我们呈现的最终效果。

音频播放使用的组件是：

wx.getBackgroundAudioManager();

在wx.request()中首先初始音频路径信息

wx.request({

success:(res)=> {

that.setData({

Title: audioinfo.bookName,//标题

p_src: getApp().globalData.book_pictrue,//封面

src: 'http://211.69.130.104/books/' + audioinfo.bookName + '/' + audioinfo.name,//音频

title: audioinfo.name,

author: audioinfo.bookName,

name: audioinfo.name,

audioid: audioinfo.id,

isshow: audioinfo.favourite

})

console.log(that.data.src)

if (audioinfo.picPath)

{

that.setData({

p_src: audioinfo.picPath

})

}

}

编写音乐播放器的代码，首先是要选择正确的音频组件，我选择是wx.getBackgroundAudioManager()，这里说一下wx.getBackgroundAudioManager()注意事项：

1.onTimeUpdate事件不执行，