微信小程序--音乐播放器

微信小程序页面结构和组件练习--音乐播放器

说明：

• 这个项目旨在练习组件以及页面的设计。页面和交互的实现可能有多种方式，这里只为了对组件和项目的结构进行熟悉了解。后续会有更加完善的项目。
• 由于涉及到mp3外链导入音乐，预览二维码在外链失效时会出错，这里不放预览二维码了；另预览二维码存在有效时长，有兴趣的可以自己试着运行程序，在运行程序之前更换mp3外链的地址，以防出错。mp3外链获取（音乐外链在线获取_音乐外链生成网站_音乐在线听-mp3外链网 (xf1433.com)）。
• 喜欢的可以点个赞，如果有问题或者想要完整的项目代码及素材，底下评论留个邮箱。

效果图：

           

• 三个页面通过轮播图的方式进行切换并实现一定的交互效果。其中，音乐推荐页没有设定交互；播放器页的进度条具有滑动可改变进度；播放列表页具有播放列表音乐的事件；底部的显示区域具有控制音频的交互。
• 遇到的问题：布局嵌套；初始数据的访问；渲染的嵌套使用；

bug:

• 播放器页面的播放时长和进度条的显示：页面首次加载获取不到默认曲目的音频时长。按下一首和播放列表进行播放也不显示，按暂停后再按播放就能正常显示。

代码部分：

• 这里给出项目的代码，没给出代码却存在的文件内容为空。关于素材方面，icon和img分别是图片和图标文件夹；照片是平时拍的，图标在阿里巴巴图标库找的（iconfont-阿里巴巴矢量图标库），需要了评论区留个邮箱。

app.json 

{

  "pages": [

    "pages/index/index"

  ],

  "window": {

    "navigationBarBackgroundColor": "#e0e0e0",

    "navigationBarTextStyle": "black",

    "navigationBarTitleText": "音乐"

  },

  "sitemapLocation": "sitemap.json"

}

 index.wxml

  音乐推荐

  播放器

  播放列表

  

      

      

      

  

  

    

      

    

    

      {{playSing.musicsong}}

      {{playSing.musicsinger}}

    

    

      

        

        

          

          

        

        

      

    

  

 index.wxss

page{

  display: flex;flex-direction: column;background: rgb(146, 128, 121);height: 100%;

}

.tap{display: flex;

  background-color: rgb(82, 240, 121);height: 70rpx;

}

.tap1{flex: 1;font-size: 20px;text-align:center;border-bottom: solid 5rpx rgb(50, 9, 235);} 

.contain{flex:1;}

.contain>swiper{height:100%;background-color: rgb(42, 182, 147);}

.recom1{margin-bottom: 60rpx;height: 550rpx;}

.recom1 image{width: 100%;height: 100%;}

.recom2{display: flex;flex-wrap:wrap;margin-bottom: 20rpx;}

.recom2>view{flex: 1;text-align: center;}

.recom2 image{width: 120rpx;height: 100rpx;border: solid 4rpx rgb(120, 223, 197);border-radius: 10%;}

.recom3{display: flex;flex-wrap:wrap;flex: 1;margin-bottom: 20rpx;}

.recom3>view{text-align:center;margin: 10rpx 20rpx;}

.recom3 image{width: 210rpx;height: 140rpx;border-radius: 10%;}

.list{display: flex;flex: 1;flex-direction: column; }

.list>view{border-bottom: solid 3rpx rgb(24, 216, 223);display: flex;}

.list image{width: 100rpx;height: 100rpx;margin: 15rpx;}

.list2{flex: 1;}

.list2_1{diaplaly: flex;}

.list2_1>view:first-child{text-align: left;margin-top: 20rpx;}

.list2_1>view:last-child{flex:1;text-align: right;margin-top: 50rpx;margin-right: 20rpx;}

.play{height:100%;display: flex;flex-direction: column;justify-content: center;}

.play1{text-align: center;margin:20rpx;font-size: 40rpx;}

.play2{text-align: center;flex: 1;}

.play2 image{width: 350rpx;height:350rpx;border-radius: 50%;margin-top: 130rpx;}

.playrotate{animation: animateRotate 10s linear infinite;}

.play3{display: flex;}

.play3 slider{flex: 1;}

.play3>view:first-child{margin: 20rpx 0rpx 20rpx 20rpx;padding:0rpx;}

.play3>view:last-child{margin: 20rpx 20rpx 20rpx 0rpx;padding:0rpx;}

.footer{background-color:rgb(12, 228, 243);font-size: 18px;}

.footer>view{display: flex;}

.footerImage{width: 80rpx;height: 80rpx;margin: 15rpx;}

.footer2{display: flex;flex-direction: column;}

.footer2 view{text-align: center;margin: 5rpx;font-size: 30rpx;}

.footer3{flex: 1;}

.footer3>view{display: flex;justify-content: flex-end;padding-top: 20rpx;}

.footer3 image{width: 70rpx;height: 70rpx;margin: 0rpx 15rpx;}

@keyframes animateRotate{

  from{transform: rotate(0deg);}

  to{transform: rotate(360deg);}

}

 index.js

Page({

  data: {

    item:0,

    isactive:0,

    isPlayMusic:false,

    isrotate:false,

    isplay:true,

    listSing:[

      {id:"1",song:"八月夜桂花",singer:"还潮",coverImg:"../../img/sw1.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107232134/30280d96986673559df9ab931c6bc75b/G174/M02/0D/01/7g0DAF3n4iOAcc9TAD3rmaDghjI270.mp3"},

      {id:"2",song:"晚风",singer:"陈婧霏",coverImg:"../../img/sw2.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107232131/e87b792dd4206b1c082ed389d423512d/G164/M03/04/00/5A0DAF1c-AKAeVXaACsys46W7mQ528.mp3"},

      {id:"3",song:"亲密爱人",singer:"梅艳芳",coverImg:"../../img/sw3.jpg",audioSrc:"http://mp.333ttt.com/mp3music/22851062.mp3"},

      {id:"4",song:"在冬天和奶奶一起晒太阳",singer:"赵照",coverImg:"../../img/sw1.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107232134/7a25da194582ddcf4cf6f856701b50e5/G189/M0A/15/18/nZQEAF5ZEk6AfipaAEPqyN-VYhI072.mp3"},

      {id:"5",song:"晚安",singer:"林宥嘉",coverImg:"../../img/sw3.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107222148/67074aa123d09ee52aa715578b487694/KGTX/CLTX001/c59c04254efa6f54d7bdd675947f68ac.mp3"},

      {id:"6",song:"Sofia",singer:"Alvaro Soler",coverImg:"../../img/sw2.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107231545/a70098ef00c6fdbb3722f0c0a32a12e7/G201/M01/0A/04/aYcBAF5ABeiAL5WOADNmeboY3wg848.mp3"},

      {id:"7",song:"Wild",singer:"Monogem",coverImg:"../../img/sw1.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107231546/2a37951e34e374ad35749dcefa39f28e/G119/M04/04/17/tw0DAFpOGEOAKYizADS68iNCyy4692.mp3"},

      {id:"8",song:"童话镇",singer:"暗杠",coverImg:"../../img/sw3.jpg",audioSrc:"https://sharefs.ali.kugou.com/202107231550/275d29499eba4450e5751bba98ad2563/G062/M03/14/11/fg0DAFd1IvSAJlbkAD0PMS2Gwek596.mp3"}

    ],

    playSing:{

      musicsong:'',

      musicsinger:'',

      musiccoverImg:'',

      currenttime:'00:00',

      totaltime:'00:00',

      percent:0

    }

    

  },

  //可直接访问并赋值属性

  audio:null,

  indexlist:0,

  musicnum:0,

  //顶部栏事件

  onRecommend:function(e){

    this.setData({item:e.target.dataset.item,isactive:0})

  },

  onPlay:function(e){this.setData({item:e.target.dataset.item,isactive:1})},

  onList:function(e){this.setData({item:e.target.dataset.item,isactive:2})},

  //recommend页面事件

  

  //play页面事件

  onMusic:function(index){

    var music = this.data.listSing[index];

    this.audio.src=music.audioSrc;

    this.setData({

      'playSing.musicsong':music.song,

      'playSing.musicsinger':music.singer,

      'playSing.musiccoverImg':music.coverImg,

      'playSing.totaltime':'00:00',

      'playSing.currenttime':'00:00'       

    })

  },

  onSlider:function(e){

    this.audio.seek(e.detail.value/100*this.audio.duration)

    this.setData({

      'playSing.currenttime':formatTime(e.detail.value/100*this.audio.duration),

      'playSing.totaltime':formatTime(this.audio.duration),

      'playSing.percent':this.audio.currentTime/this.audio.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)

    }

  },

  //底部播放栏事件

  menuTap:function(e){

    this.setData({item:e.target.dataset.item})

  },

  pauseTap:function(){

    this.onAuxiliary()

    this.audio.play()

  },

  playTap:function(){

    this.audio.pause()

    this.setData({isPlayMusic:false,isrotate:false})

  },

  nextTap:function(){

    if(this.musicnum <= (this.indexlist+1)){

      this.indexlist=0;

      this.onMusic(this.indexlist)  //音乐信息

      this.onAuxiliary()             //音乐辅助事件

      this.audio.play()             //播放音乐

      return

    }

    this.onMusic(++this.indexlist)

    this.onAuxiliary()

    this.audio.play()

  },

  //list页面事件

  musicList:function(e){

    //这里对应底部的播放器的变化，同时右边当前播放显示，且音乐播放。

    this.onMusic((e.currentTarget.dataset.listorder)-1)

    this.indexlist=(e.currentTarget.dataset.listorder)-1;

    this.onAuxiliary()

    this.audio.play()

  },

  //辅助函数

  onAuxiliary:function(){   //此辅助函数为添加播放的事件监听

    this.setData({isPlayMusic:true,isrotate:true})

    this.audio.onError(()=>{wx.showToast({    /*在播放的界面里写错误和结束事件 */

      title: '播放地址错误'

    })})

    this.audio.onEnded(()=>{

      this.nextTap()

    })

    /*使用播放事件来时刻显示播放进度 */

    // this.audio.onPlay(()=>{ })

    this.audio.onTimeUpdate(()=>{

      this.setData({

        'playSing.totaltime':formatTime(this.audio.duration),

        'playSing.currenttime':formatTime(this.audio.currentTime),

        'playSing.percent':this.audio.currentTime/this.audio.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)

    }

  },

})

 recommend.wxml

  

    

    

    

  

  

     

      

      私人FM

    

    

      

      每日歌曲推荐

    

    

      

      云音乐新歌榜

    

  

  热门音乐

  

    

      

      紫罗兰

    

    

      

      五月之家

    

    

      

      菩提树

    

    

      

      紫罗兰

    

    

      

      五月之家

    

    

      

      菩提树2

    

  

play.wxml

   

      {{playSing.musicsong}}

      --{{playSing.musicsinger}}--

   

   

      

   

   

      {{playSing.currenttime}}

      

      {{playSing.totaltime}}

   

list.wxml

  

    

      

        

      

      

        

        

          {{item1.song}}

          {{item1.singer}}

        

        点击播放

      

      

    

  

  待更新~