要求
1.页面包含一个音乐列表，点击列表中的音乐可以播放对应的音乐。
2.播放中的音乐在列表中有标识，并且可以暂停或继续播放。
3.显示当前音乐的播放进度和总时长，并可以拖动进度条调整播放进度。
4.点击切换按钮可以切换到下一首音乐。
5.点击循环按钮可以切换音乐的播放模式（单曲循环、列表循环、随机播放）。
代码实现
wxml 文件
<view class="container">
<scroll-view scroll-y class="music-list">
<view wx:for="{
{ musicList }}" wx:key="{
{ index }}" class="music-item" bindtap="onMusicTap" data-index="{
{ index }}">
<view class="music-name">{
{
item.name }}</view>
<view class="music-artist">{
{
item.artist }}</view>
</view>
</scroll-view>
<audio id="audio" src="{
{ currentMusic.src }}" bindtimeupdate="onTimeUpdate" bindended="onEnded"></audio>
<view class="player">
<view class="controls">
<button class="control-btn" bindtap="onPrev">上一首</button>
<button class="control-btn" bindtap="onPlayOrPause">{
{
playing ? '暂停' : '播放' }}</button>
<button class="control-btn" bindtap="onNext">下一首</button>
<button class="control-btn" bindtap="onChangeMode">模式</button>
</view>
<view class="progress">
<text>{
{
currentTime }}</text>
<slider max="{
{ duration }}" value="{
{ currentPosition }}" bindchange="onSliderChange" />
<text>{
{
durationStr }}</text>
</view>
</view>
</view>
wxss 文件
.container {
padding: 20rpx;
}
.music-list {
height: 300rpx;
}
.music-item {
padding: 10rpx;
border-bottom: 1rpx solid #eee;
text-align: left;
}
.player {
margin-top: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.controls {
display: flex;
justify-content: space-around;
width: 100%;
margin-bottom: 10rpx;
}
.control-btn {
background-color: #009688;
color: #fff;
padding: 10rpx 20rpx;
border-radius: 4rpx;
}
progress {
display: flex;
align-items: center;
}
.slider {
flex: 1;
margin: 0 10rpx;
}
js文件
Page({
data: {
musicList: [
{
name: '歌曲1', artist: '歌手1', src: 'music1.mp3' },
{
name: '歌曲2', artist: '歌手2', src: 'music2.mp3' },
// 更多音乐...
],
currentMusic: {
},
playing: false,
duration: 0,
currentPosition: 0,
currentTime: '00:00',
durationStr: '00:00',
playMode: 0, // 0: 列表循环，1: 单曲循环，2: 随机播放
},
onMusicTap(e) {
const index = e.currentTarget.dataset.index;
const music = this.data.musicList[index];
this.setData({
currentMusic: music,
playing: true,
});
this.playMusic();
},
onPlayOrPause() {
if (this.data.playing) {
this.pauseMusic();
} else {
this.playMusic();
}
},
playMusic() {
const audio = this.selectComponent('#audio');
audio.play();
this.setData({
playing: true,
});
},
pauseMusic() {
const audio = this.selectComponent('#audio');
audio.pause();
this.setData({
playing: false,
});
},
onPrev() {
let currentIndex = this.data.musicList.findIndex(item => item.src === this.data.currentMusic.src);
if (currentIndex === 0) {
currentIndex = this.data.musicList.length - 1;
} else {
currentIndex--;
}
const music = this.data.musicList[currentIndex];
this.setData({
currentMusic: music,
playing: true,
});
this.playMusic();
},
onNext() {
let currentIndex = this.data.musicList.findIndex(item => item.src === this.data.currentMusic.src);
if (currentIndex === this.data.musicList.length - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
const music = this.data.musicList[currentIndex];
this.setData({
currentMusic: music,
playing: true,
});
this.playMusic();
},
onTimeUpdate(e) {
const duration = e.detail.duration;
const currentPosition = e.detail.currentTime;
const currentTime = this.formatTime(currentPosition);
const durationStr = this.formatTime(duration);
this.setData({
duration: duration,
currentPosition: currentPosition,
currentTime: currentTime,
durationStr: durationStr,
});
},
onEnded() {
if (this.data.playMode === 1) {
// 单曲循环
const audio = this.selectComponent('#audio');
audio.seek(0);
audio.play();
} else {
this.onNext();
}
},
onSliderChange(e) {
const value = e.detail.value;
const audio = this.selectComponent('#audio');
audio.seek(value);
},
onChangeMode() {
let playMode = this.data.playMode;
playMode = (playMode + 1) % 3;
this.setData({
playMode: playMode,
});
},
formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
const minuteStr = minutes < 10 ? '0' + minutes : '' + minutes;
const secondStr = seconds < 10 ? '0' + seconds : '' + seconds;
return minuteStr + ':' + secondStr;
},
});
解析
其中，onPrev() 和 onNext() 函数实现了切换到上一首和下一首音乐的逻辑。通过 findIndex()
函数找到当前音乐在列表中的位置，然后根据播放模式计算出下一首或上一首音乐的位置，更新当前音乐并播放。onTimeUpdate() 函数实现了更新播放进度的逻辑，通过 detail 参数获取音频的总时长和当前播放进度，并格式化成 00:00
的形式，更新页面数据。onEnded() 函数实现了音乐播放结束的逻辑，根据当前的播放模式决定是单曲循环还是切换到下一首音乐。
onSliderChange() 函数实现了调整播放进度的逻辑，通过 seek() 函数跳转到指定的时间点。
onChangeMode() 函数实现了切换播放模式的逻辑，通过取余操作循环切换三种播放模式。
到这里也就结束了，希望对您有所帮助。