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

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

演示地址

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

点击播放按钮，可播放、暂停歌曲；

点击前进按钮/后台按钮，可切换歌曲；

切换歌曲时，当前是播放状态，则切换歌曲的时候也是播放状态；

切换歌曲时，当前是暂停状态，则切换歌曲的时候是暂停状态；

歌曲切换的时候，顶部歌曲名称及演唱者会相应变化；

歌曲播放过程中，歌曲会显示实时的播放进度。

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

原理分析

通过播放/暂停按钮控制循环动态面板是否循环；

通过上一首、下一首按钮控制切换歌曲；

通过循环动态面板控制歌曲播放进度，歌曲旋转播放动效；

通过文本元件预存歌曲播放时长（以秒为单位）；

通过内联框架加载真实歌曲；

用热区控制用于表示播放进度圆球移动边界。

元件准备

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文件，注意相对路径和绝对路径的区别：