# 播放页的整体思路

初始化应用的时候，没有播放入口（没有添加播放列表），需要添加播放列表才可播放。用户在进入到 album 歌单页面选择播放列表时进入到播放页面，并到列表存在 Vuex 中，歌曲列表都在全局，这样可以做到全局播放。并记录用户的行为数据，播放列表处在哪一首。

# 播放器的基本控制

播放：点击播放列表中的歌曲进行播放，播放时跳转播放界面，并显示歌曲信息。
停止：当歌曲正在播放时，点击歌曲播放界面下方的停止键，停止当前播放的歌曲。
上一曲：当前歌曲索引值减一，重新初始化加载音频数据，播放列表中上一首歌曲，如果索引值小于0，则索引值为列表长度减去一。
下一曲：当前歌曲索引值加一，重新初始化加载音频数据，播放列表中下一首歌曲，如果索引值大于列表长度，则索引值为0。
播放列表：点击弹出歌曲列表界面。
播放模式：随机，顺序，单曲，控制改变歌曲索引值，加载不同音频数据。
添加歌曲：插入播放列表中。
删除歌曲：从播放列表剔除歌曲。

# 音频 API

const bgAudioMannager = uni.getBackgroundAudioManager();   // 创建一个音频
bgAudioMannager.title = '致爱丽丝';     // 音频的标题（歌名）
bgAudioMannager.singer = '暂无';       // 音频的作者 （歌手）
bgAudioMannager.coverImgUrl = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg';  // 音频的封面（专辑海报）
bgAudioMannager.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3';   // 音频源 （mp3）
// 事件不用重复设定，只用在 onload 时初始化一次即可
backgroundAudioManager.onPlay()    // 背景音频播放事件，判定播放状态
backgroundAudioManager.onPause()   // 背景音频暂停事件，判定暂停状态
backgroundAudioManager.onTimeUpdate() // 背景音频播放进度更新事件，确定当前播放进度时间和底部滑块位置
backgroundAudioManager.onEnded()  // 背景音频自然播放结束事件，播放完自动加载下一首歌曲

@前端进阶之旅: 代码已经复制到剪贴板

有上面 backgroundAudioManager 对象的方法和属性，就可以创建一个简单的播放器了，但是一个播放器有更多的交互，更新歌单，对应播放的歌曲，界面交互等效果，下面就来介绍网易云的播放器的效果与交互。

# 页面及样式的处理

这一块的样式效果主要是海报的虚化填充，磁盘的旋转动画，拨条机械臂的动画，以及进度滑块的使用。

1.背景虚化

<view class="play-page" :style="bgStyle">
	<!-- 虚化蒙板 -->
	<view class="bg"></view>
	<!-- 内容层级在蒙板上 -->
	<view class="content"></view>
</view>
// 最底层元素负责背景渲染，背景为行内样式
.play-page {
	position: fixed;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
// filter 虚化最底层元素背景
.bg {
	position: fixed;
	z-index: 0;
	right: 0;
	left: 0;
	height: 100%;
	width: 100%;
	filter: blur(40rpx);
	background: inherit;
	z-index:-1;
	transform:scale(1.5);
}

@前端进阶之旅: 代码已经复制到剪贴板

磁盘转圈播放动画暂停以及重新开始旋转

主要的样式处理是磁盘转圈动画，以及拨条机械臂的滑动动画，监听音频播放停止事件，触发动画的运行。当点击开始按钮时候，就使用 css3 属性 transition 动画 transform 的旋转一定角度使得机械臂刚好落入到唱片磁盘内。当点击停止按钮时候，一方面控制唱片磁盘停止旋转，另一方面要操纵拨条机械臂匀速逆时针向上旋转离开唱片磁盘。监听 playState 的变化，判定是否在播放状态。

<!-- 磁盘盒 -->
<view class="play-poster" @click="openList(0)">
	<div class="poster-box" :class="playState ? '' : 'pause'">
		<image class="img" v-if="curSongItem.picUrl" :src="curSongItem.picUrl"></image>
	</div>
</view>
.play-poster {
	margin: 310rpx auto 0;
	.poster-box{
		display: flex;
		width: 616rpx;
		height:616rpx;
		margin: 0 auto;
		background: url(https://s3.music.126.net/mobile-new/img/disc-ip6.png?69796123ad7cfe95781ea38aac8f2d48=) center center no-repeat;
		background-size:100%;
		align-items: center;
		justify-content: center;
		animation: circling 20s linear infinite;
		// 播放停止下 animation 停止，旋转动画停止
		&.pause{
			animation-play-state: paused;
		}
	}
	.img {
		display: block;
		margin: 0 auto;
		width: 382rpx;
		height: 382rpx;
		border: solid 16rpx rgba(0, 0, 0, .15);
		border-radius: 50%;
	}
}
// 定义动画帧
@-webkit-keyframes circling {
	0% {
		transform: rotate(0);
	}
	100% {
		// 旋转一圈
		transform: rotate(1turn);
	}
}

@前端进阶之旅: 代码已经复制到剪贴板

拨条设置

拨条机械臂监听播放状态进行滑动动画，由于 transform 的 rotate 属性值的旋转动画在元素中心点，这里需要更改一下 transform-origin 变换基点让机械臂顶部旋转。

<view class="strip-box" :class="playState ? 'active' : ''">
	<image class="img" src="https://s3.music.126.net/mobile-new/img/needle-ip6.png?be4ebbeb6befadfcae75ce174e7db862="></image>
</view>
.strip-box{
	position: absolute;
	width:100%;
	top:142rpx;
	height: 329rpx;
	z-index: 100;
	transform: rotate(-30deg);
	// 更改旋转原点为上方中心点
	transform-origin: center 0;
	transition: transform 0.3s;
	&.active{
		transform: rotate(0deg);
	}
}

@前端进阶之旅: 代码已经复制到剪贴板

拖拽进度条设置

播放进度可以使用 Uniapp 中的 slider 滑动选择器，滑块的位置由 curPlayTime 当前播放时间决定，滑块的滑动长度（max 最大值）由单曲音频的播放总时长 playTime 决定。

<slider class="line" :value="curPlayTime" min="0" :max="playTime" @change="sliderChange" block-size="15" backgroundColor="rgba(255,255,255,.5)" activeColor="rgba(255,255,255,.5)" />

@前端进阶之旅: 代码已经复制到剪贴板

# 歌单（播放列表）从哪里来

在应用初始化的时候，播放列表暂时还没有，用户需要进入到 album 歌单页面选择播放列表时进入到播放页面，并到列表存在 Vuex 中。选定了播放列表后，进入到播放页。播放页拿到存储在 Vuex 的歌单数据，进行创建音频播放。

// 在 H5 中存在用户刷新应用的可能，这里就要记住用户行为，利用 H5 的 localstorage 的缓存优势。如果用户刷新了应用，重新进入的时候读取缓存中数据再赋值到 Vuex 中。
// store/index.js
let storePlayList = {
	curSong: {},       // 当前播发歌曲信息
	list: [],          // 播放列表
	playState: false   // 播放状态
}
try {  // 给H5端缓存住音乐数据
    const value = uni.getStorageSync('playList');
    if (value) {
		storePlayList = JSON.parse(value)
    }
} catch (e) {
    // error
}

const store = new Vuex.Store({
	state: {
		playList: storePlayList,
	},
	mutations: {
		// 设置播放列表
		storePlayList(state, payload) {
			// 用对象扩展的方式去传值，这样就不用所有值传值覆盖
			state.playList = {...state.playList, ...payload}

			// 给 H5 端缓存住音乐数据
			// #ifdef H5
			uni.setStorage({
			    key: 'playList',
			    data: JSON.stringify(payload),
			    success: function () {
			        console.log('success');
			    }
			});
			// #endif
		}
	}
})

@前端进阶之旅: 代码已经复制到剪贴板

歌单页设置播放列表

// pages/subpages/index/album.vue
methods: {
	// 设置歌单
	...mapMutations(['storePlayList']),
	setPlayList() {
		// 传递歌单信息到 store
		this.storePlayList({
			curSong: item,
			list: this.songList,
		})
		uni.navigateTo({
			url: '/pages/subpages/index/play'
		})
	}
}

@前端进阶之旅: 代码已经复制到剪贴板

播放页获取播放列表

computed: {
	...mapState(['playList']),
},

@前端进阶之旅: 代码已经复制到剪贴板

# 播放页的整体思路

# 播放器的基本控制

# 音频 API

# 页面及样式的处理

# 歌单（播放列表）从哪里来

# 创建音频

# 总结

实战12_播放页的开发|uniapp专题

实战12_播放页的开发|uniapp专题