新的一年到来了，给大家分享一个仿网易云播放器制作案例（带声音且可切换歌曲）。希望大家能够享受音乐带来的快乐，同时消除工作紧张、减轻生活压力，带着美好心情进入2019年的生活。
演示地址
点击前进按钮/后台按钮，可切换歌曲；
温馨提示：此演示案例带有声音，工作期间请带上耳机，以免造成不必要的影响。
原理分析
通过播放/暂停按钮控制循环动态面板是否循环；
通过上一首、下一首按钮控制切换歌曲；
通过内联框架加载真实歌曲；
用热区控制用于表示播放进度圆球移动边界。
元件准备
1. 顶部元素
1.1 2个文本矩形框，分别放作者名称和歌曲名称
1.2 1张表示返回的图片
1.3 1张顶部背景（配置阴影效果，体现层级关系）
3.1 1个白色矩形框，调整圆角半径，使之成为圆形
3.2 1个黑色矩形框，调整圆角半径，使之成为圆形
3.3 动态面板，设置三种状态，分别放置三首歌曲的图片
4. 播放进度元素
4.2 1个矩形，用于表示播放进度背景
4.4 1个热区，用于控制圆形元件的移动边界
5. 5张图片，分别表示歌曲循环、上一首、播放/暂停控制、下一首、更多
6. 一个内联框架，用于实时加载歌曲
8. 动态面板，用于控制图片循环及播放进度动效
将内联框架、时间举行，循环面板位置放在不显眼处，重新布局元件后效果如下：
实现步骤
1. 播放按钮设置
播放按钮初始状态是暂停待播放图片，表示当前是暂停状态；选中时，我们预置一张播放待暂停图片，表示当前是播放状态
点击播放按钮时，切换按钮的选中状态。分别设置选中、取消选中时的事件。
选中时，启动循环面板，每个0.5秒变换一次状态，同时将播放拨片旋转到唱片上；同时判断当前面板的状态，根据面板状态分别设置歌曲名称、作者、歌曲时间及要播放的歌曲。
取消选中时，停止循环面板。将播放拨片旋转到初始位置，同时在内联框架打开空链接（终止歌曲播放作用），将用于表示播放进度的圆球移到初始位置。
循环动态面板设置事件：
播放拨片设置事件，注意锚点偏移设置：
在内联框架打开mp3歌曲的设置，如果用本地mp3文件，注意相对路径和绝对路径的区别：
2. 上一首按钮设置
点击“上一首”按钮时，需要先判断歌曲状态：
如果是播放状态的话，需要在切换动态面板显示状态后，再触发播放按钮的点击事件（否则无法切换歌曲）；
如果是暂停状态，则只需要切换动态面板状态即可。
3. 下一首按钮设置
同理，点击“下一首”按钮时，需要先判断歌曲状态：
如果是播放状态的话，需要在切换动态面板显示状态后，再触发播放按钮的点击事件（否则无法切换歌曲）；
如果是暂停状态，则只需要切换动态面板状态即可。
4. 循环动态面板事件
当播放按钮的状态是选中时，启用循环动态面板；
当循环面板的状态改变时，移动圆球，同时旋转唱片，从而动态显示歌曲播放。
用于表示播放进度的圆球移动事件如下图设置，注意每次移动的距离根据歌曲的时间长度而变化。
移动距离计算：播放背景长度 除以 歌曲时长（需要将歌曲时长换算成秒，用time元件临时保存）。
旋转唱片的设置事件：
5. 圆球移动事件设置（表示播放进度）
圆球在移动时，需要设置一个边界（放一个热区作为边界），当圆球接触边界时，触发播放的点击事件（也就是暂停歌曲播放）。
触发事件设置如下：
6. 唱片状态改变事件设置
当唱片状态改变时，需要根据唱片当前显示的状态，分别设置歌曲名称、作者、歌曲时间及要播放的歌曲。
这个步骤不能少，否则在未播放状态下点击“上一首”或“下一首”按钮时，歌曲名称等不会变化。
本案例已完成，点击查看上一篇案例《穿梭器：双向列表带计数选择（支持单选、多选和全选）》
