位置:首页 > 淘宝直通车 >

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

作者: | 发布时间:2018-12-31 11

一年到来了,给大家分享一个仿网易云播放器制作案例(带声音且可切换歌曲)。希望大家能够享受音乐带来快乐,同时消除工作紧张、减轻生活压力,带着美好心情进入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文件,注意相对路径和绝对路径区别:

2. 上一首按钮设置

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

如果播放状态话,需要在切换动态面板显示状态后,再触发播放按钮点击事件(否则无法切换歌曲);

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

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

3. 下一首按钮设置

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

如果播放状态话,需要在切换动态面板显示状态后,再触发播放按钮点击事件(否则无法切换歌曲);

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

4. 循环动态面板事件

当播放按钮状态选中时,启用循环动态面板;

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

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

移动距离计算:播放背景长度 除以 歌曲时长(需要将歌曲时长换算成秒,用time元件临时保存)。

旋转唱片设置事件:

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

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

触发事件设置如下:

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

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

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

本案例已完成,点击查看上一篇案例《穿梭器:双向列表带计数选择(支持单选、多选和全选)》

 

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

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