仿网易云播放器:带声音可切换歌曲的播放器
新的一年到来了,给大家分享一个仿网易云播放器制作案例(带声音且可切换歌曲)。希望大家能够享受音乐带来的快乐,同时消除工作紧张、减轻生活压力,带着美好心情进入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协议。
- Android控制所有播放器的音频切换上下首歌、播放、停止
- IE 播放器没有声音。
- android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)
- 魅族MX5——视频播放,横竖屏切换黑屏,有声音没图像
- 利用VideoView简单实现视频播放 包括 横竖屏切换 声音 亮度 暂停
- QML播放器切换文件路径
- 播放器声音太小 加入以下几句话
- 戴尔dell电脑播放歌曲只能听到伴奏的声音,而听不到歌曲的声音,声音很小
- 控件(播放器)全屏和半屏切换
- python模拟Get请求保存网易歌曲的url
- 解决android开发Mp3播放器切换歌曲的问题
- 单项选择题管理系统 密码123456 界面优美 带声音 界面切换 底色。。。。。。
- 一个具有动态切换,自然过渡效果的Segment,常见于今日头条,网易新闻类,Write By Swift3.0
- android声音通道的切换
- iOS从零开始学习直播之音频3.歌曲切换
- Scrapy获取网易云音乐歌手全部歌曲(excel存取)
- Android TV快捷键切换到其他应用后电视声音仍未中止问题的解决
- xamarin 为button增加click的音效,也可以理解成单首歌曲的播放器
- android listview的HeadView左右切换图片(仿新浪,网易,百度等切换图片)
- Android开发播放器根据锁定横竖屏快捷键进行横竖屏切换,横屏状态观看锁屏