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

axure商城

2018年最后一个工作日,给大家分享一个仿网易云播放器制作案例(带声音且可切换歌曲)。希望大家能够享受音乐带来的快乐,同时消除工作紧张、减轻生活压力,带着美好心情进入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、唱片状态改变事件设置

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

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

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

本案例已完成,点击QQ群“532261671”获取源文件;

本文由来源 产品大神,由 十月大神 整理编辑,其版权均为 产品大神 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
8

评论:

5 条评论,访客:5 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. avatar
    曹荣刚发布于: 

    为什么我做的预览听不到音乐,滑块也不滑动。是我在内联框架连接音乐连接错了,还是循环面板设置滑块用例设置错了(这块我确实没看明白)

  2. lwj10011
    lwj10011发布于: 

    你们啊,搞这么复杂,是秀技术还是弄原型啊,脱离本质了吧

    • 十月大神
      十月大神发布于: 

      本质是分享,需要的可以参考学习一下,不需要的,可以忽略,这个取决于读者本身。

    • 十月大神
      十月大神发布于: 

      手机端打开和电脑打开是一样效果的。音乐是在线加载的,可能是手机网络不稳定导致加载失败,或者是手机其他设置导致的

发表评论