Implemented in the WeChat applet——【Music Player】

1. Learning objectives

1. Master the use of swiper components and scroll-view components

2. Master the use of image components

3. Master the use of audio API

4. Master the use of slider components

2. Preparation before development

Music applet project effect display:

1. Page structure diagram

tab navigation bar
content content area
player music playback control

2. Project initialization

Developer tools create a blank project:

{"pages:["pages/index/index"
]
}

“navigationBarBackgroudColor”:"#fff,
“navigationBartitletext”:“音乐,”
“navigationBarBackgroudColor”:“black”,

3. Task Analysis

Tabs and pages info.wxml, play.wxml, palylist.wxml

4. Preliminary knowledge

The swiper component writes the sliding page structure

<swiper>
<swiper-item style="background:#ccc">0</swiper-item>
<swiper-item style="background:#ddd">1</swiper-item>
<swiper-item style="background:#eee">2</swiper-item>
</swiper-item>

The swiper component writes the sliding page structure index.wxml:

<swiper current-item-id="c">
< swiper-item item-id="a"> <image
src= "https://assets.lexus.com.cn/images/index/kv/2880x1480. newes. 1.jpg?x-Oss-
process=image/resize,w. 1898/quality.q. 80" mode= "widthFix" > </image> </swiper-item>
<swiper-item item-id="b"> <image src= https://assets.exus.com.cn/images/models/s/s -kv-1 2880.jpg?x-oss-
process=image/resize,w. 1898/quality.q. 80" mode= "widthFix" > </image> </swiper-item>
<swiper-item item-id="c"> <image src="https://assets.lexus.com.cn/images/index/kv/ux. 300e-kv-1-2880.jpg?x-
oss-process= image/resize,w 1898/quality,q 80" mode="widthFix"> </image> </swiper-item>
</swiper>

The swiper component writes the sliding page structure index.wxss:

image{
width：100%;
}

The main purpose of include:
1. Split the code into multiple files, making it easier to find the code.
2. Extract the common part of the code. Introduced via external files.

<include src="header.wxml />
<view>body</view>
<include src="footer.wxml " />

3. Tab switching

1. Page and style:

<view class="tab>
<view class="tab-item">音乐推荐</view>
</view>
<!---内容区域--->
<view class="content"></view>
<!---底部播放器--->
<view class="player"></view>

2. The basic page and style of the music applet:

<!--标签页标题-->
<view class=" tab">
<view class= "tab-item {
   
   {tab==0? active':' }}" bindtap=”changeItem"
data-item= "0" >音乐推荐< /view>
<view class=”tab item {
   
   {tab== 1? actie':"}}" bindtap=”changeItem”
data-item="1" >播放器< /view>
<view class=”tab item {
   
   {tab== 2? actie':"}}" bindtap=”changeItem”
data-item= "2" >播放列表< /view>
< /view>

Pages and styles:

3. The style of page and style tab navigation:

Tab navigation effect:

4. Test page info.wxml, page.wxml, play.wxml files:

<view style= "background:#ddd; color:#000; h
eight:100%"> play </view>
<view style= "background:#ccc; color:#000; he
ight:100%" > info< /view>
<view style= "background:#eee; color:#00O; he
ight:100%" > playlist</view>

Realize tab page switching
Click the navigation bar tab to realize tab page switching:

<view class="tab-item {
   
   {tab==0?'a
ctive':'}}"
bindtap=" changeltem" data-item
="0">
音乐推荐< /view>
changeltem: function(e) {
this.setData({
item: e.target.dataset.item,
tab:e.target.dataset.item
}},

Tab switching style

.tab -item.active {
color: #c25b5b;
border- bottom-color: #c25b5b;

5. Switch page effects by scrolling time

< swiper current= "{item}" bindchange="c
hangeTab"> 
< swiper- item>
<include src = ../index/info" > </include>
</swiper-item>
< swiper- item>
<include src= ../index/play" > </include>
</swiper-item>
< swiper- item>
<include src=”./index/playlist" > </include>
</swiper-item>
</swiper>

(1) Scroll event

change Tab: function(e) {
this.setData({
tab: e.detail.current
.tab-item.active {
color: #c25b5b;
border- bottom-color: #c25b5b;}

(2) Switch page effects through scrolling events:

4. Music recommendation

1. Properties and description of the scroll-view component:

< scroll-view scroll-x scroll-y style="hei
ght:200px" bindscroll- "scroll">
<view style ="width:200%;height:400p
x;background:#ccc" > </view>
</scroll-view>
scroll: function(e) {
console.log(e.detail)
},

2. Image component scaling mode and cropping mode test:

content area scrolling

(1) scroll-view component:

< scroll-view class= "content-info" scroll-y>
<view style= "background:#eee;height:10
00px" > </view>
<view>已到达底部< /view>
< /scroll-view>

3. The swiper component realizes the carousel image:

<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>

4. Flex layout implements function buttons:

<view class="content-info-portal">
    <view>
      <image src="/images/04.png" />
      <text>私人FM</text>
    </view>

(1) Flex layout realizes function buttons:

.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;
}

(2) Flex layout realizes page layout:

  <view class="content-info-list">
    <view class="list-title">推荐歌曲</view>
    <view class="list-inner">
      <view class="list-item">
        <image src="/images/cover.jpg" />
        <view>紫罗兰</view>
      </view>

hit music

.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;
}

5. Play at the bottom of the index page

<!-- 底部播放器 -->
<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>

.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;
}

5. Player

1. The way of audioctx object declaration:

var  audioctx = wx.createInnerAudioContext();

(1) InnerAudioContext case use:

onReady: function() {
var audioCtx = wx.createInnerAudioContext(
audioCtx.src = htt.:/....x.o.
audioCtx.onPlay(function() {
console.log('开始播放')
})
...
},

(2) Use of the slider component:

<slider bindchanging = "sliderChangeing" show-value />
sliderChanging:function(e){
console.log(e.detail.value)
},

(3) Music playlist and music status data:

   playlist: [{
      id: 1,
      title: '钢琴协奏曲',
      singer: '肖邦',
      src: 'http://localhost:3000/1.mp3',
      coverImgUrl: '/images/cover.jpg'
    },

(4) Realize music playback function

Music playback logic code:

 audioCtx: null,
  onReady: function() {
    this.audioCtx = wx.createInnerAudioContext()
    // 默认选择第1曲
    this.setMusic(0)
    var that = this
    // 播放进度检测
    this.audioCtx.onError(function() {
      console.log('播放失败：' + that.audioCtx.src)
    })
    // 播放完成自动换下一曲
    this.audioCtx.onEnded(function() {
      that.next()
    })
    // 自动更新播放进度
    this.audioCtx.onPlay(function() {})
    this.audioCtx.onTimeUpdate(function() {
      that.setData({
        'play.duration': formatTime(that.audioCtx.duration),
        'play.currentTime': formatTime(that.audioCtx.currentTime),
        'play.percent': that.audioCtx.currentTime / that.audioCtx.duration * 100
      })
    })
    // 格式化时间
    function formatTime(time) {
      var minute = Math.floor(time / 60) % 60;
      var second = Math.floor(time) % 60
      return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
    }
  },
  // 音乐播放
  setMusic: function(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
    })
  },

(5) The structural code of the bottom player:

<!-- 底部播放器 -->
<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>

Style code for bottom player:

.player {
  display: flex;
  align-items: center;
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

(6) The bottom player pause/play button controls the song:

   <image wx:if="{
   
   {state=='paused'}}" src="/images/02.png" bindtap="play" />
    <image wx:else src="/images/02stop.png" bindtap="pause" />

(7) Realize that the player switches to the next song:

    <image src="/images/03.png" bindtap="next" />

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

(8) Player page structure code:

<view class="content-play">
  <!-- 显示音乐信息 -->
  <view class="content-play-info">
    <text>{
   
   {play.title}}</text>
    <view>—— {
   
   {play.singer}} ——</view>
  </view>

6. Player

<!-- 播放器 -->
<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}}" style="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. Player style 1

.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;
}

2. Realize the rotation function of the poster through CSS3 animation:

  <!-- 显示专辑封面 -->
  <view class="content-play-cover">
    <image src="{
   
   {play.coverImgUrl}}" style="animation-play-state:{
   
   {state}}" />
  </view>

3. The slider structure at the bottom of the player page:

   <slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada" value="{
   
   {play.percent}}" />

3. Display the progress of music playback:

  onReady: function() {
    this.audioCtx = wx.createInnerAudioContext()
    // 默认选择第1曲
    this.setMusic(0)
    var that = this
    // 播放进度检测
    this.audioCtx.onError(function() {
      console.log('播放失败：' + that.audioCtx.src)
    })
    // 播放完成自动换下一曲
    this.audioCtx.onEnded(function() {
      that.next()
    })

4. Control the length of the progress bar to control the playback progress of the song:

< slider
bindchange= "sliderChange"
activeColor= " #d33a31 
block- size=”12"
backgroundColor= " #dadada"
value= "{
   
   {play.percent}}" />

sliderChange: function(e) {
var second = e.detail.value
*
this.audioCtx.duration / 100
this.audioCtx.seek(second)
},

Control the length of the progress bar to control the playback progress of the song:

<scroll-view class="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.coverImgUrl}}" />
    <view class="playlist-info">
      <view class="playlist-info-title">{
   
   {item.title}}</view>
      <view class="playlist-info-singer">{
   
   {item.singer}}</view>
    </view>
    <view class="playlist-controls">
      <text wx:if="{
   
   {index==playIndex}}">正在播放</text>
    </view>
  </view>
</scroll-view>

7. Playlist

1. Control the length of the progress bar to control the playback progress of the song:

.playlist-item {
display: flex;
align-items:
center;
border- bottom: 1rpx solid #333;
height: 112rpx;
}
...

2. Realize the song changing function:

change:function(e){
this.setMusic(e.currentTarget.dateset.index)
this.play()
},