1. 确定需求，分析设计
在实现小程序音乐播放条前，我们需要先确定播放条的需求和功能，并对其进行分析设计。
1.1 需求分析
音乐播放条一般包括歌曲名称、歌手、封面、播放进度、播放时间、播放/暂停、上一曲、下一曲等基本功能。
1.2 设计思路
设计思路如下：
（1）整体结构：整体结构可以采用view标签来进行布局，text标签用于展示歌曲信息。
（2）封面：封面可以使用image标签，尺寸一般为正方形。
（3）播放进度条：播放进度条可以使用slider标签。
（4）播放时间：播放时间可以使用text标签来展示。
（5）播放/暂停、上一曲、下一曲：这些功能可以使用button标签来实现。
可以参考以下代码进行布局设计：
<view class='player'>
<image src='cover.jpg' class='cover'>
<text class='name'>歌曲名称</text>
<text class='singer'>歌手</text>
<slider class='progress' value='50' />
<text class='time'>00:00</text>
<button class="icon-btn" bindtap="prev" ></button>
<button class="icon-btn" bindtap="play" ></button>
<button class="icon-btn" bindtap="next" ></button>
</view>
上述代码中，class='player'代表播放条的整体容器，class='cover'代表封面，class='name'代表歌曲名称，class='singer'代表歌手姓名，class='progress'代表播放进度条，class='time'代表播放时间。而class='icon-btn'代表按钮，bindtap代表绑定点击事件。
2. 实现音乐播放条
接下来，我们可以通过以下几个步骤来实现小程序音乐播放条。
2.1 数据准备
在实现播放条前，我们需要先准备好所需要的数据，例如歌曲名称、歌手姓名、歌曲封面等。可以在data中定义以下变量：
data: {
name: '歌曲名称',
singer: '歌手姓名',
cover: 'cover.jpg',
time: '00:00',
progress: 50
}
2.2 实现布局
布局可以参照上面的设计思路，使用view、text、slider、image和button标签来进行布局。
<view class='player'>
<image src='{{cover}}' class='cover'>
<text class='name'>{{name}}</text>
<text class='singer'>{{singer}}</text>
<slider class='progress' value='{{progress}}' />
<text class='time'>{{time}}</text>
<button class="icon-btn" bindtap="prev" ></button>
<button class="icon-btn" bindtap="play" ></button>
<button class="icon-btn" bindtap="next" ></button>
</view>
在上述代码中，我们使用了{{}}来获取data中定义的变量。
2.3 实现播放/暂停功能
播放/暂停功能是音乐播放条最重要的功能之一，其实现可以通过以下步骤来完成：
（1）在data中定义一个isPlaying变量来标识当前是否正在播放：
data: {
isPlaying: false
}
（2）在play方法中切换isPlaying的值，并调用BackgroundAudioManager相关的方法实现播放/暂停功能：
play: function() {
var that = this;
if (!that.data.isPlaying) {
that.setData({
isPlaying: true
});
wx.playBackgroundAudio({
dataUrl: 'http://xxx.mp3',
success: function(res) {
console.log(res);
}
});
} else {
that.setData({
isPlaying: false
});
wx.pauseBackgroundAudio();
}
}
在上述代码中，我们使用了wx.playBackgroundAudio()和wx.pauseBackgroundAudio()两个方法来实现播放/暂停功能。其中，dataUrl参数代表歌曲的链接。
2.4 实现上一曲/下一曲功能
上一曲/下一曲功能的实现都比较相似，我们以实现上一曲为例，可以通过以下步骤来完成：
（1）定义一个数组songs，用于存储歌曲信息：
data: {
songs: [
{
name: '歌曲1',
singer: '歌手1',
cover: 'cover1.jpg',
src: 'http://xxx.mp3'
},
{
name: '歌曲2',
singer: '歌手2',
cover: 'cover2.jpg',
src: 'http://xxx.mp3'
}
],
songIndex: 0
}
其中，songs数组中每个元素代表一首歌曲，包括姓名、歌手、封面和链接。而songIndex变量用于标识当前正在播放的歌曲。
（2）在prev方法中实现上一曲功能：
prev: function() {
var that = this;
var index = that.data.songIndex;
index--;
if (index < 0) {
index = that.data.songs.length - 1;
}
that.setData({
songIndex: index,
name: that.data.songs[index].name,
singer: that.data.songs[index].singer,
cover: that.data.songs[index].cover
});
wx.playBackgroundAudio({
dataUrl: that.data.songs[index].src,
success: function(res) {
console.log(res);
}
});
}
在上述代码中，我们首先获取当前歌曲的下标index，然后index--表示切换到上一首歌曲，如果index < 0，则将index重置为songs.length - 1，以实现循环播放。最后，我们通过setData()方法来修改name、singer和cover等变量的值，并调用wx.playBackgroundAudio()方法来播放上一曲所对应的歌曲。
2.5 实现播放进度/播放时间
播放进度和播放时间的显示可以通过BackgroundAudioManager的currentTime和duration来实现。
（1）在data中定义一个duration变量，用于存储歌曲的总时长（单位为秒）：
data: {
duration: 0
}
（2）在onLoad中获取歌曲的总时长duration：
onLoad: function(options) {
var that = this;
wx.getBackgroundAudioPlayerState({
success: function(res) {
console.log(res);
that.setData({
duration: res.duration
});
}
});
}
在上述代码中，我们通过wx.getBackgroundAudioPlayerState()方法来获取歌曲的总时长，并将其赋值给duration变量。
（3）在onTimeUpdate中更新progress和time：
onTimeUpdate: function(res) {
console.log(res);
var that = this;
var currentTime = res.detail.currentTime;
var duration = that.data.duration;
var progress = Math.floor(currentTime / duration * 100);
that.setData({
time: that.formatTime(currentTime),
progress: progress
});
}
在上述代码中，我们首先获取当前的播放时间currentTime和歌曲的总时长duration，然后计算出当前播放的进度progress。最后，我们调用formatTime()方法将currentTime转化为00:00格式的时间，并通过setData()方法更新time和progress的值。
2.6 实现播放完成后的跳转
当一首歌曲播放完成后，我们需要自动跳转到下一首歌曲，该功能可以通过以下步骤来实现：
（1）在onEnded事件中实现下一曲功能：
onEnded: function() {
var that = this;
var index = that.data.songIndex;
index++;
if (index >= that.data.songs.length) {
index = 0;
}
that.setData({
songIndex: index,
name: that.data.songs[index].name,
singer: that.data.songs[index].singer,
cover: that.data.songs[index].cover
});
wx.playBackgroundAudio({
dataUrl: that.data.songs[index].src,
success: function(res) {
console.log(res);
}
});
}
在上述代码中，我们首先获取当前歌曲下标并将其+1表示下一曲。如果index >= songs.length，则将index重置为0，以实现循环播放。然后通过setData()方法更新歌曲的名称、歌手和封面等信息，并调用wx.playBackgroundAudio()方法来播放下一曲所对应的歌曲。
2.7 增加样式
样式可以根据个人喜好进行自定义，以下是一个简单的样式实现：
.player {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60rpx;
background-color: #fafafa;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10rpx;
box-shadow: 0 -2rpx 4rpx rgba(0, 0, 0, 0.05);
}
.cover {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
border-radius: 50%;
}
.name {
color: #333;
font-size: 14rpx;
font-weight: bold;
margin-top: 4rpx;
}
.singer {
color: #999;
font-size: 12rpx;
}
.progress {
width: 60%;
margin-left: 10rpx;
margin-right: 10rpx;
}
.time {
color: #999;
font-size: 12rpx;
}
.icon-btn {
width: 30rpx;
height: 30rpx;
background-image: url(../images/prev.png);
background-repeat: no-repeat;
background-size: 100% 100%;
border: none;
}
.icon-btn.play {
background-image: url(../images/play.png);
}
.icon-btn.pause {
background-image: url(../images/pause.png);
}
.icon-btn.next {
background-image: url(../images/next.png);
}
在上述代码中，我们使用flex布局来实现歌曲信息和按钮的排布，并使用position和box-shadow等属性增加样式的效果，让音乐播放条更加美观。
3. 总结
以上就是小程序如何做音乐播放条的详细教程。在实现播放条的过程中，我们需要仔细分析功能需求和布局设计，并结合Button、Image、Text、Slider和BackgroundAudioManager等API来实现播放、暂停、上一曲、下一曲等基本功能。