微信小程序音频播放之音乐播放器

使用微信小程序实现一个简易的音乐播放器.

Github地址

虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能).

主要实现的功能有:

1.实现音频播放,暂停

2.实现拖拽进度条,快进音频进度

3.实现上一首,下一首,列表循环播放

4.实现关闭小程序,也可在后台播放,正式版需要通过审核,开发版本可正常测试

一丶index.js

二丶index.wxml

三丶index.wxss

四丶要实现关闭小程序后,依然后台播放,微信顶部悬浮展示,需要再app.json配置requiredBackgroundModes属性

附上官方相关api链接:

BackgroundAudioManager.html

wx.getBackgroundAudioManager()

slider组件

微信小程序没声音可通过以下方法解决：

1、先看一下音量键是否开启，可以尝试播放其他视频、音频文件来检测。

2、手机打开微信后，在页面的右下角有个“设置”选项，点击进入后，页面一直往下拉有个“通知”选项，点击进入“通用”，进入后可以看到其中有个“新消息通知”，页面往下拉找到“声音设置”并打开即可。

如果你的微信小程序后台没有背景音乐功能，可以考虑自己写代码实现背景音乐播放。具体的实现思路是首先在小程序的`app.js`文件中初始化一个Audio Context对象，然后在需要播放背景音乐的页面中调用这个对象的createInnerAudioContext方法，传入音乐文件地址后即可开始播放。同时可以借助各种开源组件或插件来优化自己的代码，比如一些优秀的音乐播放器组件或插件可以让代码更加方便、优雅。除此之外，也可以尝试一些第三方平台提供的解决方案，例如百度AI语音识别、科大讯飞语音识别等等，为小程序添加更加丰富的音频听感。

---