打造自己的音乐小程序（中）——主要功能实现

柔光的暖阳◎ 2022-11-15 11:27 144阅读 0赞

### 文章目录 ###

*   *  效果展示
     *   *  主信息页面：info.wxml
     *  播放页面：play.wxml
     *   *  播放列表：playlist.wxml

## 效果展示 ##

音乐小程序，点击播放效果视频

*  content 有 主页面信息，音乐播放器，播放列表三部分构成
    
     *  info：主页信息内容部分
     *  play：播放器页面
     *  playlist：播放列表

主要功能包括主页信息，播放器页面，播放列表三部分  
下面依次是各部分效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

### 主信息页面：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/1.jpg" />
              </swiper-item>
              <swiper-item>
                <image src="/images/2.jpg" />
              </swiper-item>
              <swiper-item>
                <image src="/images/3.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/avatar_ (1).jpg" />
                  <view>紫罗兰</view>
                </view>
                <view class="list-item">
                  <image src="/images/avatar_ (2).jpg" />
                  <view>五月之歌</view>
                </view>
                <view class="list-item">
                  <image src="/images/avatar_ (3).jpg" />
                  <view>菩提树</view>
                </view>
                <view class="list-item">
                  <image src="/images/avatar_ (4).jpg" />
                  <view>欢乐颂</view>
                </view>
                <view class="list-item">
                  <image src="/images/avatar_ (5).jpg" />
                  <view>安魂曲</view>
                </view>
                <view class="list-item">
                  <image src="/images/avatar_ (6).jpg" />
                  <view>摇篮曲</view>
                </view>
              </view>
            </view>
          </scroll-view>

## 播放页面：play.wxml ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]  
其中有播放功能，进度条功能和头像旋转显示功能等，

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

播放功能事件  
用createInnerAudioContext创建媒体 进行播放就好啦

// 实现播放器播放功能
    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
      })
    },

当点击播放或者暂停时  
会改后台state的值进行播放与暂停之间的切换

state: 'running'

### 播放列表：playlist.wxml ###

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

点击歌曲就会调用change事件 进行修改歌曲id 就能切换歌曲啦

主要功能完成，感谢大家支持❀

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/c313f8bb05634e78836c6d9a6dd2a77c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]: /images/20221022/7ec0f46016444e4791c64db1c7f05126.png