微信小程序实现一个音乐播放器的功能_微信小程序音乐播放器

要求

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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;
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

解析

其中，onPrev() 和 onNext() 函数实现了切换到上一首和下一首音乐的逻辑。通过 findIndex()
函数找到当前音乐在列表中的位置，然后根据播放模式计算出下一首或上一首音乐的位置，更新当前音乐并播放。

onTimeUpdate() 函数实现了更新播放进度的逻辑，通过 detail 参数获取音频的总时长和当前播放进度，并格式化成 00:00
的形式，更新页面数据。

onEnded() 函数实现了音乐播放结束的逻辑，根据当前的播放模式决定是单曲循环还是切换到下一首音乐。

onSliderChange() 函数实现了调整播放进度的逻辑，通过 seek() 函数跳转到指定的时间点。

onChangeMode() 函数实现了切换播放模式的逻辑，通过取余操作循环切换三种播放模式。

到这里也就结束了，希望对您有所帮助。