短学期-音乐播放小程序制作

day1-实现简易的音乐列表

效果图

项目目录下新建public文件夹，用来存放图片等文件

新建mine文件夹，用来展示列表界面

修改app.json文件，添加pages，修改窗口属性，添加底部导航栏

{
  "entryPagePath":"pages/mine/mine",
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#C62F2F",
    "navigationBarTitleText": "网抑云",
    "navigationBarTextStyle":"white"
  },
  "tabBar":{
    "color":"#000",
    "selectedColor":"#a82222",
    "backgroundColor": "#fff",
    "list":[
      {
        "text":"首页",
        "pagePath":"pages/index/index",
        "iconPath":"./public/mine.png",
        "selectedIconPath":"./public/mine_active.png"
      },
      {
        "text":"列表",
        "pagePath":"pages/mine/mine",
        "iconPath":"./public/music.png",
        "selectedIconPath":"./public/music_active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

修改mine.js,添加页面的数据

data: {
    playBtn:"/public/play.png",
    "songList":[
      {
        "songName":"70億のピース",
        "singer":"秦基博",
        "url":"http://p1.music.126.net/ssKtJQMehHO1_xTs3n0DZw==/109951163097041912.jpg?param=130y130"
      },
      {
        "songName":"私へ",
        "singer":"supercell",
        "url":"http://p2.music.126.net/vBq3ttdbWrVIVnXaVcfDug==/803742999928373.jpg?param=130y130"
      },
      {
        "songName":"何もかも有り余っている こんな時代も",
        "singer":"Goose house",
        "url":"http://p2.music.126.net/2i1igcfXAYRJN9qf_LnWbA==/109951163067866087.jpg?param=130y130"
      }
    ]
  }

mine.wxml，添加基本界面

<view>
	<view class="songList" wx:for="{{songList}}" wx:key="item">
		<view class="no">{{index+1}}</view>
		<image class="img" src="{{item.url}}"></image>
		<view class="text">
			<view class="name">{{item.songName}}</view>
			<view class="singer">{{item.singer}}</view>
		</view>
		<image class="playBtn" src="{{playBtn}}"></image>
	</view>
</view>

mine.wxss 添加样式

.songList{
  margin-top: 30px;
  display: flex;
  position: relative;
}
.songList .playBtn{
  position: absolute;
  height: 40px;
  width: 40px;
  right: 12px;
  top: 50%;
  margin-top: -20px;
}
.songList .img{
  margin-left: 20px;
  width: 60px;
  height: 60px;
}
.songList .no{
  margin-left: 15px;
  margin-top: 20px;
}
.songList .text{
  margin-left: 15px;
}
.songList .text .name{
  margin-top: 4px;
  font-size: 14px;
}
.songList .text .singer{
  margin-top:16px;
  font-size: 12px;
  color: #8d8d8d;
}

day2-简单的播放界面

效果

新建playpage用来表示播放界面

playpage.wxml

<view>
	<image id="needle" src="../../public/needle.png"></image>
</view>
<view id="playPage">
	<image id="turntable" src="https://s3.music.126.net/mobile-new/img/disc-ip6.png?6979612%E2%80%A6="></image>
	<image id="coverImg" src="http://p2.music.126.net/2i1igcfXAYRJN9qf_LnWbA==/109951163067866087.jpg?param=130y130"></image>
</view>
<view id="control">
	<image id="left" src="../../public/last.png"></image>
	<image id="middle" src="../../public/playBtn.png"></image>
	<image id="right" src="../../public/next.png"></image>
</view>

playpage.wxss

@keyframes coverRotate{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
page{
  background-color: #161824;
}
#needle{
  position: absolute;
  width: 96px;
  height: 137px;
  left: 50%;
  z-index: 10;
}
#playPage{
  width: 290px;
  height: 290px;
  position: relative;
  left: 50%;
  transform: translate(-50%,10%);
}
#coverImg{
  position: absolute;
  width:160px;
  height:160px;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  margin-left: -80px;
  margin-top: -80px;
  animation: coverRotate 2s linear infinite;
}
#turntable{
  position: absolute;
  width: 290px;
  height: 290px;
}
#control{
  position: absolute;
  width: 100%;
  bottom: 10%;
  height: 60px;
}
#control image{
  position: absolute;
  width: 60px;
  height: 60px;
}
#control #left{
  left: 20%;
}
#control #right{
  right: 20%;
}
#control #middle{
  left: 50%;
  transform: translate(-50%,0);
}

在mine中写一个简单的跳转函数

playBtnClick:function(e){
	var id=e.currentTarget.dataset.pid;
	wx.navigateTo({
		url: '/pages/playpage/playpage',
	})
}

绑定到按钮上

这样点击列表的按钮时就会跳转到播放界面

day3 音乐加载与播放控制

效果

在playpage.js中加载音乐

onLoad: function (options) {
    var audio=wx.createInnerAudioContext();
    audio.src="http://music.163.com/song/media/outer/url?id=430208792.mp3";
    audio.autoplay=false;
    audio.loop=true;
    this.setData({
      audioContext:audio
    })
}

data中定义音乐对象以及playStatus控制播放

data: {
    audioContext:null,
    playStatus:false,
    coverImg:'http://p2.music.126.net/2i1igcfXAYRJN9qf_LnWbA==/109951163067866087.jpg?param=130y130',
    middleImg:'../../public/play.png',
}

点击函数

play(){
    var status=this.data.playStatus;
    if (status) {
        this.setData({
            playStatus:false,
            middleImg:'../../public/play.png',
        },()=>{
            this.data.audioContext.stop();
        })
    }else{
        this.setData({
            playStatus:true,
            middleImg:'../../public/stop.png',
        },()=>{
            this.data.audioContext.play();
        })
    }
}

修改一下之前的playpage.wxss

.coverImg{
  position: absolute;
  width:160px;
  height:160px;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  margin-left: -80px;
  margin-top: -80px;
}
.coverImgPlay{
  animation: coverRotate 2s linear infinite;
}

playpage.wxml

<view>
	<image id="needle" src="../../public/needle.png"></image>
</view>
<view id="playPage">
	<image id="turntable" src="https://s3.music.126.net/mobile-new/img/disc-ip6.png?6979612%E2%80%A6="></image>
	<image class="coverImg {{playStatus?'coverImgPlay':''}}" src="{{coverImg}}"></image>
	<image wx:if="{{!playStatus}}" id="playStatus" src="../../public/playBtn.png"></image>
</view>
<view id="control">
<image id="left" src="../../public/last.png"></image>
<image id="middle" src="{{middleImg}}" bindtap="play"></image>
<image id="right" src="../../public/next.png"></image>
</view>

day4

网络接口

使用https://www.fastmock.site来实现https请求

将mine.js中的playList数组数据以json格式存储

{
  "data": {
    "songList": [{
        "songName": "70億のピース",
        "singer": "秦基博",
        "url": "http://p1.music.126.net/ssKtJQMehHO1_xTs3n0DZw==/109951163097041912.jpg?param=130y130",
        "src": "http://music.163.com/song/media/outer/url?id=430208792.mp3"
      },
      {
        "songName": "私へ",
        "singer": "supercell",
        "url": "http://p2.music.126.net/vBq3ttdbWrVIVnXaVcfDug==/803742999928373.jpg?param=130y130",
        "src": "http://m10.music.126.net/20200724172317/65ab25eaf9e5d395049f354542b1c18f/ymusic/52ea/d34d/5d9d/bfbee932fe397564d9493cb930f0b2cf.mp3"
      },
      {
        "songName": "何もかも有り余っている こんな時代も",
        "singer": "Goose house",
        "url": "http://p2.music.126.net/2i1igcfXAYRJN9qf_LnWbA==/109951163067866087.jpg?param=130y130",
        "src": "http://m10.music.126.net/20200724172419/ff53054f3dbae9182aba049991afa722/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/3036668087/dd8c/9050/4242/c36f4b9a93f759463a2ccfff54c9ab35.mp3"
      }
    ]
  }
}

在onLoad函数中从网络加载playList

onLoad: function (options) {
    wx.request({
        url: 'https://www.fastmock.site/mock/5b416e93c6759da32f907b7da9b15f14/music/songlist',
        method:"post",
        success:(res)=>{
            this.setData({
                songList:res.data.data.songList
            })
        }
    })
}

url跳转

在点击事件中传入参数

playBtnClick:function(e){
    var id=e.currentTarget.dataset.pid;
    wx.navigateTo({
        url: '/pages/playpage/playpage?index='+id+'&list='+encodeURIComponent(JSON.stringify(this.data.songList)),
    }) 
}

播放界面playpage.js中接受数据

onLoad: function (options) {
    var song=JSON.parse(decodeURIComponent(options.list));
    var index=options.index;
    var audio=wx.createInnerAudioContext();
    audio.src=song[index].src;
    audio.autoplay=false;
    audio.loop=true;
    this.setData({
        audioContext:audio,
        coverImg:song[index].url,
        songList:song,
        playIndex:index
    })
}

data数据

data: {
    audioContext:null,
    playStatus:false,
    coverImg:null,
    middleImg:'../../public/play.png',
    songList:null,
    playIndex:null
}

前一首，播放/暂停，下一首

play(e){
    var status=this.data.playStatus;
    if (status) {
        this.setData({
            playStatus:false,
            middleImg:'../../public/play.png',
        },()=>{
            this.data.audioContext.stop();
        })
    }else{
        this.setData({
            playStatus:true,
            middleImg:'../../public/stop.png',
        },()=>{
            this.data.audioContext.play();
        })
    }
},
pre(){
    var index=this.data.playIndex;
    var songList=this.data.songList;
    var audio=this.data.audioContext;
    index--;
    if (index<0) {
        index=songList.length-1;
    }
    audio.src=songList[index].src;
    this.setData({
        audioContext:audio,
        coverImg:songList[index].url,
        playIndex:index,
    },()=>{
        if(this.data.playStatus){
            this.data.audioContext.play();
        }
    })
},
next(){
    var index=this.data.playIndex;
    var songList=this.data.songList;
    var audio=this.data.audioContext;
    index++;
    if (index>songList.length-1) {
        index=0;
    }
    audio.src=songList[index].src;
    this.setData({
        audioContext:audio,
        coverImg:songList[index].url,
        playIndex:index,
    },()=>{
        if(this.data.playStatus){
            this.data.audioContext.play();
        }
    })
}

首页

效果

index.wxml

<view>
	<swiper class="swiper" indicator-dots="true" autoplay="true">
		<swiper-item>
			<image src="{{swiper[0]}}"></image>
		</swiper-item>
		<swiper-item>
			<image src="{{swiper[1]}}"></image>
		</swiper-item>
	</swiper>
	<view class="container" >
		<view class="center" wx:for="{{icon1}}" wx:key="item">
			<image src="{{item.src}}"></image>
			<view class="text">{{item.name}}</view>
		</view>
	</view>
  	<view class="container" >
		<view class="center" wx:for="{{icon2}}" wx:key="item">
			<image src="{{item.src}}"></image>
			<view class="text">{{item.name}}</view>
		</view>
	</view>
</view>

index.wxss

.swiper image{
width: 100%;
height: 100%;
}
.container{
  margin-top: 60px;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}
.container image{
  width: 60px;
  height: 60px;
}
.center{
  width: 60px;
  height: 60px;
  text-align: center;
}
.text{
  margin-top: 8px;
  font-size: 12px;
  color: #111111;
}

index.js

Page({
  data: {
    "swiper": [
      "http://p1.music.126.net/q2ag5aifgDZqAOm6GLkc_g==/109951165165020942.jpg?imageView&quality=89",
      "http://p1.music.126.net/XQziGhiSXy3CHgUqzJst8g==/109951165163926069.jpg?imageView&quality=89"
    ],
    "icon1": [
      {
        "name": "每日推荐",
        "src": "../../public/topicon1.png"
      },
      {
        "name": "歌单",
        "src": "../../public/topicon2.png"
      },
      {
        "name": "排行榜",
        "src": "../../public/topicon3.png"
      },
      {
        "name": "电台",
        "src": "../../public/topicon4.png"
      }
    ],
    "icon2": [
      {
        "name": "直播",
        "src": "../../public/topicon5.png"
      },
      {
        "name": "火前留名",
        "src": "../../public/topicon6.png"
      },
      {
        "name": "数字专辑",
        "src": "../../public/topicon7.png"
      },
      {
        "name": "唱聊",
        "src": "../../public/topicon8.png"
      }
    ]
  },
})