微信小程序：音乐播放器(附源码)_微信小程序音乐播放器代码

作者：不正经 | 2024-05-24 07:01:41

踩

微信小程序音乐播放器代码

效果图：

在这里插入图片描述

代码实现：

index.js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    item:0,
    tab:0,
    // 播放器列表数据
    playlist:[{
      id:1,
      title:"晴天",
      singer:'周杰伦',
      src:'http://localhost:3000/1.mp3',
      converImgUrl:'../images/yhm.png'
    },{
      id:2,
      title:"反方向的钟",
      singer:'周杰伦',
      src:'http://localhost:3000/2.mp3',
      converImgUrl:'../images/yhm.png'
    },{
      id:3,
      title:"兰亭序",
      singer:'周杰伦',
      src:'http://localhost:3000/3.mp3',
      converImgUrl:'../images/yhm.png'
    },{
      id:4,
      title:"青花瓷",
      singer:'周杰伦',
      src:'http://localhost:3000/4.mp3',
      converImgUrl:'../images/yhm.png'
    },{
      id:5,
      title:"本草纲目",
      singer:'周杰伦',
      src:'http://localhost:3000/4.mp3',
      converImgUrl:'../images/yhm.png'
    },{
      id:6,
      title:"爱在西元前",
      singer:'周杰伦',
      src:'http://localhost:3000/4.mp3',
      converImgUrl:'../images/yhm.png'
    },{
      id:7,
      title:"花海",
      singer:'周杰伦',
      src:'http://localhost:3000/4.mp3',
      converImgUrl:'../images/yhm.png'
    },{
      id:8,
      title:"半岛铁盒",
      singer:'周杰伦',
      src:'http://localhost:3000/4.mp3',
      converImgUrl:'../images/yhm.png'
    },{
      id:9,
      title:"轨迹",
      singer:'周杰伦',
      src:'http://localhost:3000/4.mp3',
      converImgUrl:'../images/yhm.png'
    },{
      id:10,
      title:"搁浅",
      singer:'周杰伦',
      src:'http://localhost:3000/4.mp3',
      converImgUrl:'../images/yhm.png'
    }
  ],
    state:'paused',
    playIndex:0,
    play:{
      currentTime:'00:00',
      duration:'00:00',
      percent:0,
      title:'',
      singer:'',
      // converImgUrl:'../images/cover.jpg'
      coverImgUrl:'../images/yhm.png'
    }
  },

  audioCtx:null,

  changeItem(e){
    this.setData({
      item : e.target.dataset.item
    })
  },
  changeTab(e){
    this.setData({
      tab:e.detail.current
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.audioCtx = wx.createInnerAudioContext();
    this.setMusic(0);
  },
  setMusic(index){
    var music = this .data.playlist[index];
    this.audioCtx.src = music.src;
    this.setData({
      playIndex: index,
      'play.title': music.title,
      'play.singer': music.singer,
      'play.coverImgUrl': music.coverImgUrl,
      'play.currentTime': '00:00',
      'play.duration': '00:00',
      'play.percent': 0
    })
  },

  // 播放
  play: function() {
    this.audioCtx.play();
    this.setData({state: 'running'})
  },

  // 暂停
  pause: function () {
    this.audioCtx.pause();
    this.setData({state: 'paused'});
  },

  // 下一曲
  next: function() {
    var index = this.data.playIndex >= this.data.playlist.length - 1 ? 0 : this.data.playIndex + 1
    this. setMusic(index)
    if (this .data.state == 'running') {
      this.play()
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188

index.wxml页面：

<!-- 顶部 -->
<view class="tab">
  <view class="tab-item {{tab == 0 ? 'active' : ''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
  <view class="tab-item {{tab == 1 ? 'active' : ''}}" bindtap="changeItem" data-item="1">播放器</view>
  <view class="tab-item {{tab == 2 ? 'active' : ''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 播放器 -->
<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">
    <swiper-item>
      <include src="info.wxml"/>
    </swiper-item>
    <swiper-item>
      <include src="play.wxml"/>
    </swiper-item>
    <swiper-item>
      <include src="playlist.wxml"/>
    </swiper-item>
  </swiper>
</view>
<!-- 底部播放器 -->
<view class="player">
  <image class="player-cover" src="{{play.coverImgUrl}}" />
  <view class="player-info">
    <view class="player-info-title">{{play.title}}</view>
    <view class="player-info-singer">{{play.singer}}</view>
  </view>
  <view class="player-controls">
    <!--切换到播放列表-->
    <image src="../images/01.png" bindtap="changePage" data-page="2" />
    <!--播放或暂停-->
    <image wx:if="{{state == 'paused'}}" src="../images/02.png" bindtap="play" />
    <image wx:else src="../images/02stop.png" bindtap="pause" />
    <!--下一曲-->
    <image src="../images/03.png" bindtap="next" />
  </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
24
25
26
27
28
29
30
31
32
33
34
35
36
37

info.wxml页面：

<!-- 轮播图 -->
<scroll-view class="content-info" scroll-y>
  <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay>
    <swiper-item>
      <image src="../images/banner.jpg"/>
    </swiper-item>
    <swiper-item>
      <image src="../images/banner.jpg"/>
    </swiper-item>
    <swiper-item>
      <image src="../images/banner.jpg"/>
    </swiper-item>
  </swiper>
  <!-- 功能按钮 -->
  <view class="content-info-portal">
    <view>
      <image src="../images/04.png"/>
      <text>私人FM</text>
    </view>
    <view>
      <image src="../images/05.png"/>
      <text>每日歌曲推荐</text>
    </view>
    <view>
      <image src="../images/06.png"/>
      <text>云音乐新歌榜</text>
    </view>
  </view>
  <view class="content-info-list">
    <view class="list-title">推荐歌曲</view>
    <view class="list-inner">
      <view class="list-item">
        <image src="../images/mjz.png"/>
        <view>稻香</view>
      </view>
      <view class="list-item">
        <image src="../images/qlx.png"/>
        <view>七里香</view>
      </view>
      <view class="list-item">
        <image src="../images/syydxb.png"/>
        <view>夜曲</view>
      </view>
      <view class="list-item">
        <image src="../images/mjz.png"/>
        <view>花海</view>
      </view>
      <view class="list-item">
        <image src="../images/ylxb.png"/>
        <view>一路向北</view>
      </view>
      <view class="list-item">
        <image src="../images/yhm.png"/>
        <view>以父之名</view>
      </view>
    </view>
  </view>
</scroll-view>
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

play.wxml页面：

<!-- 播放器 -->
<view class="content-play">
  <!--显示音乐信息-->
  <view class="content-play-info">
    <text>{{play.title}}</text>
    <view>—— {{play.singer}} ——</view>
  </view>
  <!-- 显示专辑封面 -->
  <view class="content-play-cover">
    <image src="{{play.coverImgUrl}}" sty1e="animation-play-state:{{state}}" />
  </view>
  <!--显示播放进度和时间-->
  <view class="content-play-progress">
    <text>{{play.currentTime}}</text>
    <view>
      <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{{play. percent}}" />
    </view>  
    <text>{{play.duration}}</text>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

playlist.wxml页面：

<scroll-view cclass="content-playlist" scroll-y>
  <view class="playlist-item" wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}">
    <image class="playlist-cover" src="{{item.converImgUrl}}" />
    <view class="playlist-info">
      <view class="playlist-info-title">{{item.title}}</view>
      <view cclass="playlist-info-singer">{{item.singer}}</view>
    </view>
    <view class="playlist-controls">
      <text wx:if="{{index==playIndex}}">正在播放</text>
    </view>
  </view>
</scroll-view>
1
2
3
4
5
6
7
8
9
10
11
12

index.wxss页面：

page {
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;
}
.tab{
  display: flex;
}
.tab-item{
  flex:1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eee;
}
.tab-item.active{
  color: #c25b5b;
  border-bottom-color: #c25b5b;
}
.content {
  flex: 1;
}
.content > swiper{
  height: 100%;
}
.player{
  background: #222;
  border-top:1px solid #252525;
  height: 112rpx;
}
.content-info{
  height: 100%;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.content-info-slide{
  height: 302rpx;
  margin-bottom: 20px;
}
.content-info-slide image{
  width: 100%;
  height: 100%;
}

/* 功能按钮 */
.content-info-portal{
  display: flex;
  margin-bottom: 15px;
}
.content-info-portal > view{
  flex: 1;
  font-size: 11pt;
  text-align: center;
}
.content-info-portal image{
  width: 120rpx;
  height: 120rpx;
  display: block;
  margin: 20rpx auto;
}

/* 热门音乐 */
.content-info-list{
  font-size: 11pt;
  margin-bottom: 20rpx;
}
.content-info-list > .list-title{
  margin: 20rpx 35rpx;
}
.content-info-list > .list-inner{
  display: flex;
  flex-wrap: wrap;
  margin: 0 20rpx;
}
.content-info-list > .list-inner > .list-item{
  flex: 1;
}
.content-info-list > .list-inner > .list-item > image{
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  border: 1rpx solid #555;
}
.content-info-list > .list-inner > .list-item > view{
  width: 200rpx;
  margin: 10rpx auto;
  font-size: 10pt;
}
/*播放器*/
.content-play {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  text-align: center ;
}
.content-play-info > view{
  color: #888;
  font-size: 11pt;
}
/*操放进度和时间*/
.content-play-progress{
  display: flex;
  align-items: center;
  margin:0 35rpx;
  font-size: 9pt; 
  text-align: center;
}
.content-play-progress > view {
  flex: 1;
}
/*显示专辑页面样式*/
.content-play-cover image {
  animation: rotateImage 10s linear infinite;
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  border: 1px solid #333 ;
}
@keyframes rotateImage {
  from {
    transform: rotate(0deg);
  }

  to{
    transform: rotate(360deg);
  }
}
/* 播放进度和时间 */
.content-play-progress{
  display: flex;
  align-items: flex;
  margin: 0 35rpx;
  font-size: 9pt;
  text-align: center;
}
.content-play-progress > view {
  flex: 1;
}

/* 底部播放器 */
.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525 ;
  height: 112rpx;
}
.player-cover {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15rpx;
  border-radius: 8rpx;
  border: 1px solid #333 ;
}
.player-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx;
  padding-bottom: 8rpx;
}
.player-info-singer {
  color:  #888;
}
.player-controls image {
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
}
.content-playlist{
  height: 100%;
}
/* 播放列表 */
.playlist-item {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #333 ;
  height: 112rpx;
}
.playlist-cover {
  width: 20rpx;
  height: 80rpx;
  margin-left:15rpx;
  border-radius: 8rpx;
  border: 1px solid#333 ;
}
.playlist-info {
  flex: 1;
  font-size: 10pt;
  line-height: 38rpx;
  margin-left: 20rpx; 
  padding-bottom: 8rpx;
}
.playlist-info-singer {
  color:#888;
}
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204

index.json

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "音乐",
  "navigationBarTextStyle": "black"
}
1
2
3
4
5

源码包：

链接：https://pan.baidu.com/s/1yFkSCOSpRoy9YtaX7ZNQdA?pwd=4d2k 提取码：4d2k

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/616331