仿网易云播放器:带声音可切换歌曲的播放器

新的一年到来了，给大家分享一个仿网易云播放器制作案例（带声音且可切换歌曲）。希望大家能够享受音乐带来的快乐，同时消除工作紧张、减轻生活压力，带着美好心情进入2019年的生活。

演示地址

1. 点击播放按钮，可播放、暂停歌曲；
2. 点击前进按钮/后台按钮，可切换歌曲；
3. 切换歌曲时，当前是播放状态，则切换歌曲的时候也是播放状态；
4. 切换歌曲时，当前是暂停状态，则切换歌曲的时候是暂停状态；
5. 歌曲切换的时候，顶部歌曲名称及演唱者会相应变化；
6. 歌曲播放过程中，歌曲会显示实时的播放进度。

温馨提示：此演示案例带有声音，工作期间请带上耳机，以免造成不必要的影响。

原理分析

1. 通过播放/暂停按钮控制循环动态面板是否循环；
2. 通过上一首、下一首按钮控制切换歌曲；
3. 通过循环动态面板控制歌曲播放进度，歌曲旋转播放动效；
4. 通过文本元件预存歌曲播放时长（以秒为单位）；
5. 通过内联框架加载真实歌曲；
6. 用热区控制用于表示播放进度圆球移动边界。

元件准备

1. 顶部元素

1.1 2个文本矩形框，分别放作者名称和歌曲名称

1.2 1张表示返回的图片

1.3 1张顶部背景（配置阴影效果，体现层级关系）

2. 1张拨片图片，用于体现歌曲播放或暂停的状态

3. 歌曲播放动效元素

3.1 1个白色矩形框，调整圆角半径，使之成为圆形

3.2 1个黑色矩形框，调整圆角半径，使之成为圆形

3.3 动态面板，设置三种状态，分别放置三首歌曲的图片

4. 播放进度元素

4.1 1个椭圆形元件，用于动态显示歌曲播放进度

4.2 1个矩形，用于表示播放进度背景

4.3 两个矩形，分别表示播放进度时间和歌曲时间

4.4 1个热区，用于控制圆形元件的移动边界

5. 5张图片，分别表示歌曲循环、上一首、播放/暂停控制、下一首、更多

6. 一个内联框架，用于实时加载歌曲

7. 1个文本元件，用于表示当前播放歌曲的时间（秒杀）

8. 动态面板，用于控制图片循环及播放进度动效

将内联框架、时间举行，循环面板位置放在不显眼处，重新布局元件后效果如下：

实现步骤

1. 播放按钮设置

播放按钮初始状态是暂停待播放图片，表示当前是暂停状态；选中时，我们预置一张播放待暂停图片，表示当前是播放状态

选中时，启动循环面板，每个0.5秒变换一次状态，同时将播放拨片旋转到唱片上；同时判断当前面板的状态，根据面板状态分别设置歌曲名称、作者、歌曲时间及要播放的歌曲。

取消选中时，停止循环面板。将播放拨片旋转到初始位置，同时在内联框架打开空链接（终止歌曲播放作用），将用于表示播放进度的圆球移到初始位置。

循环动态面板设置事件：

播放拨片设置事件，注意锚点偏移设置：

在内联框架打开mp3歌曲的设置，如果用本地mp3文件，注意相对路径和绝对路径的区别：

2. 上一首按钮设置

点击“上一首”按钮时，需要先判断歌曲状态：

如果是播放状态的话，需要在切换动态面板显示状态后，再触发播放按钮的点击事件（否则无法切换歌曲）；

如果是暂停状态，则只需要切换动态面板状态即可。

切换循环动态面板及触发播放按钮重新播放的事件配置如下：

3. 下一首按钮设置

同理，点击“下一首”按钮时，需要先判断歌曲状态：

4. 循环动态面板事件

当播放按钮的状态是选中时，启用循环动态面板；

当循环面板的状态改变时，移动圆球，同时旋转唱片，从而动态显示歌曲播放。

用于表示播放进度的圆球移动事件如下图设置，注意每次移动的距离根据歌曲的时间长度而变化。

移动距离计算：播放背景长度 除以 歌曲时长（需要将歌曲时长换算成秒，用time元件临时保存）。

旋转唱片的设置事件：

5. 圆球移动事件设置（表示播放进度）

圆球在移动时，需要设置一个边界（放一个热区作为边界），当圆球接触边界时，触发播放的点击事件（也就是暂停歌曲播放）。

触发事件设置如下：

6. 唱片状态改变事件设置

当唱片状态改变时，需要根据唱片当前显示的状态，分别设置歌曲名称、作者、歌曲时间及要播放的歌曲。

这个步骤不能少，否则在未播放状态下点击“上一首”或“下一首”按钮时，歌曲名称等不会变化。

本文由 @十月大神 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。