音乐播放器

前言

使用swiper组件完成三个标签页的切换，并且实现轮播图。scroll-view组件完成滚动视图，使用微信小程序提供的音乐API播放音频。

主页

主页

index.wxml

<view class="nav"><view class="nav-item {{currentTab==0?'active':''}}" bindtap="switchTab" data-tab="0">音乐推荐</view><view class="nav-item {{currentTab==1?'active':''}}" bindtap="switchTab" data-tab="1">播放器</view><view class="nav-item {{currentTab==2?'active':''}}" bindtap="switchTab" data-tab="2">播放列表</view></view><!-- 标签页 --><view class="main"><swiper current="{{currentTab}}" bindchange="changeTab"><swiper-item class="nav-item"><include src="recommend.wxml" /></swiper-item><swiper-item class="nav-item"><include src="play.wxml" /></swiper-item><swiper-item class="nav-item"><include src="playlist.wxml" /></swiper-item></swiper></view><!-- 底部播放器 --><view class="playing"><view class="thumb"><image src="{{play.coverImgUrl}}"></image></view><view class="info"><view class="title">{{play.title}}</view><view class="authors">{{play.singer}}</view></view><view class="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>

index.wxss

@import "recommend.wxss";@import "play.wxss";@import "playlist.wxss";page{background-color: #17181a;color: #ccc;font-size: 35rpx;display: flex;flex-direction: column;height: 100%;}/* 导航栏 */.nav{height: 80rpx;line-height: 80rpx;display: flex;}.nav-item{flex: 1;flex-basis:33.3%;text-align: center;}.active{color: orange;}/* 主体 */.main{flex: 1;height: 100%;}.main>swiper{height: 100%;}/* 底部 */.playing{height: 120rpx;display: flex;}.thumb{width: 120rpx;}.thumb>image{width: 110rpx;height: 110rpx;margin: 5rpx;}.info{flex: 1;}.info>view{height: 60rpx;line-height: 60rpx;}.controls{width: 250rpx;}.controls>image{width: 80rpx;height: 80rpx;margin-top: 20rpx;}

三个标签页

推荐页

recommend.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/4.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/cover.jpg" /><view>紫罗兰</view></view><view class="list-item"><image src="/images/cover.jpg" /><view>五月之歌</view></view><view class="list-item"><image src="/images/cover.jpg" /><view>菩提树</view></view><view class="list-item"><image src="/images/cover.jpg" /><view>欢乐颂</view></view><view class="list-item"><image src="/images/cover.jpg" /><view>安魂曲</view></view><view class="list-item"><image src="/images/cover.jpg" /><view>摇篮曲</view></view></view></view></scroll-view>

index.wxss

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

播放器页

play.wxml

<view class="play"><!-- 基本信息 --><view class="music_info"><view class="name">{{play.title}}</view><view class="auto">{{play.singer}}</view></view><!-- 封面 --><view class="cover"><image src="{{play.coverImgUrl}}" style="animation-play-state:{{state}}" /></view><!-- 进度条 --><view class="progress"><!-- 显示播放进度和时间 --><text>{{play.currentTime}}</text><slider bindchange="sliderChange" activeColor="#d33a31" block-size="12" backgroundColor="#dadada"value="{{play.percent}}" /><text>{{play.duration}}</text></view></view>

play.wxss

.play {display: flex;flex-direction: column;}/* */.music_info {text-align: center;margin-top: 20rpx;margin-bottom: 20rpx;}/* */.cover {margin-top: 80rpx;margin-bottom: 120rpx;flex: 1;}.cover>image {width: 400rpx;height: 400rpx;display: block;margin: 0 auto;border-radius: 50%;/* 动画旋转 */animation: rotateImage 10s linear infinite;}@keyframes rotateImage {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}.progress{padding-bottom: 50rpx;display: flex;}.progress>slider{display: inline-block;/* width: 400rpx; */flex: 1;}.progress>text{padding: 16rpx;height: 50rpx;line-height: 50rpx;}

播放列表页

playist.wsml

<scroll-view class="playlist" scroll-y><view class="playlist-item" wx:for="{{musics}}" 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>

playist.wsss

.playlist-item {display: flex;align-items: left;border-bottom: 1rpx solid #333;height: 140rpx;}.playlist-cover {width: 100rpx;height: 100rpx;margin: 12rpx;margin-left: 20rpx;border-radius: 8rpx;border: 1px solid #333;}.playlist-info {flex: 1;font-size: 12pt;line-height: 50rpx;margin-left: 10rpx;text-align: left;padding-bottom: 8rpx;margin-top: 12rpx;}.playlist-info-singer {color: #888;}.playlist-controls {font-size: 12pt;margin-right: 30rpx;color: #c25b5b;}

逻辑

index.js

Page({/*** 页面的初始数据*/data: {currrentTab: 1,musics: [{id: 1,title: '智联世界',singer: '小冰',src: '/audio/智联家园.mp3',coverImgUrl: '/images/小冰.jpg'}, {id: 2,title: '不要认输',singer: '坂井泉水',src: '/audio/不要认输.mp3',coverImgUrl: '/images/坂井泉水.jpg'}, {id: 3,title: '白桦林',singer: '朴树',src: '/audio/白桦林.mp3',coverImgUrl: '/images/朴树.jpg'}, {id: 4,title: '红豆',singer: '王菲',src: '/audio/红豆.mp3',coverImgUrl: '/images/王菲.jpg'}],state: 'paused',playIndex: 0,play: {currentTime: '00:00',duration: '00:00',percent: 0,title: '',singer: '',coverImgUrl: '/images/cover.jpg',}},// 单击导航栏拿到自定义属性switchTab: function (e) {// var tab = e.target.dataset.tab// this.setData({// currrentTab:tab// })this.setData({currentTab: e.target.dataset.tab,})},changeTab: function (e) {// var tab = e.target.dataset.tab// this.setData({// currrentTab:tab// })this.setData({currentTab: e.detail.current})},// 实现播放器播放功能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) % 60return (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)}},// 音乐播放setMusic: function(index) {var music = this.data.musics[index]this.audioCtx.src = music.srcthis.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.musics.length - 1 ? 0 : this.data.playIndex + 1this.setMusic(index)if (this.data.state === 'running') {this.play()}},// 滚动条调节歌曲进度sliderChange: function(e) {var second = e.detail.value * this.audioCtx.duration / 100this.audioCtx.seek(second)},// 播放列表换曲功能change: function(e) {this.setMusic(e.currentTarget.dataset.index)this.play()}