在这篇教程中，我们将学习如何在小程序中实现音乐播放功能。我们将使用微信小程序作为开发工具，并使用基于微信官方API的背景音频播放功能。
准备工作
在开始之前，请确保你已经安装了最新版本的微信开发者工具，并拥有一个微信小程序的开发账号。
第一步：创建小程序页面
首先，我们需要在微信开发者工具中创建一个新的小程序页面。在小程序目录下，找到并打开 app.json 文件，然后添加一个新页面的配置，如下所示：
{
"pages": [
"pages/index/index",
"pages/player/player"
]
}
我们将创建一个名为 player 的新页面来实现音乐播放功能。
接下来，创建一个名为 player 的目录，并在该目录下创建 player.js、player.json 和 player.wxml 文件。
第二步：编写页面代码
player.json
在 player.json 文件中，我们需要添加页面的配置信息，以及添加背景音频组件的引入：
{
"usingComponents": {
"background-audio": "../../components/background-audio/background-audio"
}
}
player.wxml
在 player.wxml 文件中，我们将创建一个简单的页面布局，包括一个播放按钮和一个显示当前播放时间的文本：
<view class="container">
<button class="play-button" bindtap="togglePlay">
<image class="play-icon" src="{{ playing ? '/images/pause.png' : '/images/play.png' }}"></image>
</button>
<text class="time">{{ currentTime }}</text>
</view>
player.js
在 player.js 文件中，我们将编写页面的逻辑代码，包括处理播放按钮的点击事件和更新当前播放时间的方法：
Page({
data: {
playing: false,
currentTime: '00:00'
},
togglePlay() {
const backgroundAudioManager = wx.getBackgroundAudioManager();
if (this.data.playing) {
backgroundAudioManager.pause();
} else {
backgroundAudioManager.play();
}
this.setData({
playing: !this.data.playing
});
},
updateTime() {
setInterval(() => {
const backgroundAudioManager = wx.getBackgroundAudioManager();
const currentTime = backgroundAudioManager.currentTime;
const minutes = Math.floor(currentTime / 60);
const seconds = Math.floor(currentTime % 60);
this.setData({
currentTime: `${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`
});
}, 1000);
},
onLoad() {
this.updateTime();
}
});
第三步：引入背景音频组件
我们将使用一个自定义的 background-audio 组件来处理背景音频的播放功能。在 components 目录下，创建一个名为 background-audio 的目录，并在该目录下分别创建 background-audio.js、background-audio.json 和 background-audio.wxml 文件。
在 background-audio.json 文件中，添加组件的配置信息：
{
"component": true,
"usingComponents": {}
}
在 background-audio.wxml 文件中，添加一个音频标签：
<audio id="background-audio" src="{{ audioSrc }}" autoplay="{{ autoplay }}" bindtimeupdate="bindTimeUpdate"></audio>
background-audio.js
在 background-audio.js 文件中，我们将定义组件的方法，包括播放、暂停和更新当前播放时间：
Component({
properties: {
audioSrc: {
type: String,
value: ''
},
autoplay: {
type: Boolean,
value: false
}
},
methods: {
play() {
const audio = this.selectComponent('#background-audio');
audio.play();
},
pause() {
const audio = this.selectComponent('#background-audio');
audio.pause();
},
bindTimeUpdate(event) {
const audio = this.selectComponent('#background-audio');
const currentTime = event.detail.currentTime;
audio.triggerEvent('timeupdate', { currentTime });
}
}
});
第四步：添加资源文件
在上述代码中，我们用到了两张播放按钮图标的图片。在小程序的根目录下创建一个名为 images 的目录，并将这两张图片文件 play.png 和 pause.png 放在该目录下。
第五步：测试播放功能
现在，你可以在微信开发者工具中点击运行按钮，来测试你的小程序音乐播放功能是否工作正常了。
结论
恭喜你！你已经成功地实现了小程序中的音乐播放功能。通过这个简单的教程，你学会了如何创建一个新的小程序页面，编写页面的逻辑代码，并使用背景音频组件来处理音乐的播放和暂停功能。希望这个教程对你有所帮助！
如果你想进一步扩展功能，可以考虑添加其他音乐操作，如调整音量、显示音乐封面等。祝你在小程序的开发之旅中一帆风顺！
本文来自极简博客，作者：指尖流年，转载请注明原文链接：小程序实现音乐播放功能的教程
