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

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


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

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

演示地址

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

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

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

温馨提示:?#25628;?#31034;案例带有声音,工作期间请带上耳机,以免造成不必要的影响。

原理分析

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

元件准备

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

1. 顶部元素

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

1.2 1张表示返回的?#35745;?/p>

1.3 1张顶部背景(配置阴影效果,体现层级关系)

2. 1张拨片?#35745;?#29992;于体现歌曲播放或暂停的状态

3. 歌曲播放动效元素

3.1 1个白色矩形框,调整?#27493;前?#24452;,使之成为圆形

3.2 1个黑色矩形框,调整?#27493;前?#24452;,使之成为圆形

3.3 动态面板,设置三种状态,分别放置三首歌曲的?#35745;?/p>

4. 播放进度元素

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

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

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

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

5. 5张?#35745;?#20998;别表示歌曲循环、上一首、播放/暂停控制、下一首、更多

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

7. 1个文本元件,用于表示当前播放歌曲的时间(秒杀)

8. 动态面板,用于控制?#35745;?#24490;环及播放进度动效

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

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

实现步骤

1. 播放按钮设置

播放按钮初始状态是暂停待播放?#35745;?#34920;示当前是暂停状态;选中时,我们预置一张播放待暂停?#35745;?#34920;示当前是播放状态

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

点击播放按钮时,切换按钮的选中状态。分别设置选中、取消选中时的?#24405;?/p>

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

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

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

循环动态面板设置?#24405;?/p>

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

播放拨片设置?#24405;?#27880;意锚点偏移设置:

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

在内联框架打开mp3歌曲的设置,如果用本地mp3文件,注意相?#26376;?#24452;和绝?#26376;?#24452;的区别:

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

2. 上一首按钮设置

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

如果是播放状态的话,需要在切换动态面板显示状态后,再触发播放按钮的点击?#24405;?#21542;则无法切换歌曲);

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

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

切换循环动态面板?#25353;?#21457;播放按钮重新播放的?#24405;?#37197;置如下:

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

3. 下一首按钮设置

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

如果是播放状态的话,需要在切换动态面板显示状态后,再触发播放按钮的点击?#24405;?#21542;则无法切换歌曲);

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

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

4. 循环动态面板?#24405;?/h3>

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

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

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

用于表示播放进度的圆球移动?#24405;?#22914;下图设置,注意每次移动的距离根据歌曲的时间长度而变化。

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

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

旋转唱片的设置?#24405;?/p>

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

5. 圆球移动?#24405;?#35774;置(表示播放进度)

圆球在移动时,需要设置一个边界(放一个热区作为边界),当圆球接触边界时,触发播放的点击?#24405;?#20063;就是暂停歌曲播放)。

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

触发?#24405;?#35774;置如下:

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

6. 唱片状态改变?#24405;?#35774;置

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

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

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

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

 

本文由 @十月大神 原创发布,未经许可,禁止转载。

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

原创文章,作者:金香槟运营,如若转载,请注明出处:http://www.ptffy.club/62997.html

征服者入侵APP下载
双辽麻将下载心悦1角钱麻将 创业板股票涨跌幅度 北京赛车开奖查询 各种漏洞赚钱论坛 云南快乐十分开奖走 华东15选5开奖结果今天 江西任选5中奖规则 20选8最容易出的五个号 大唐棋牌官方下载地 澳洲幸运5图 快中彩开奖号码 篮球即时比分捷报 新疆11选五走势图表 什么网络游戏可以赚 四川麻将手机版下载 天津11选5开奖