ESP32 也能实现精美UI 使用 HaaS UI Lite (Python)打造音乐播放器
音乐播放器是大家日常使用最多的工具之一,类似的音频播放场景还有在医院/银行经常见到的排队叫号系统、工业场景中常用的的操作提示装置等等。
1、简介
本文将基于HaaS UI Lite开发框架使用Python语言进行音乐播放器的打造,实际运行效果图如下:
本案例打造只需要使用M5StackCore2开发板一台即可。
2、设备端开发
2.1、开发环境
在进行下一步之前请确保M5StackCore2开发环境已经搭建完毕,详情请参考M5StackCore2快速开始中的说明。
2.2、创建解决方案
如下图所示,打开VS Code之后在新建一个基于helloworld的python工程,设定好工程名称(“music_player”)及工作区路径之后,硬件类型选择m5stackcore2,点击立即创建,创建一个Python轻应用的解决方案。
下载本案例脚本的代码解压后全部复制,覆盖“music_player”工程根目录下的所有文件,main.py文件如下图所示:
3、运行效果
将music_player工程推送到M5StackCore2开发板之后,脚本会自动运行。程序运行之后,会默认加载播放器,如下图所示:
播放音乐过程中点击“开始播放”,“暂停播放”,“下一首”,“上一首”等按钮后,日志如下。其中:
- python execute from /data/pyamp/main.py:代表Python脚本开始运行
- start to play:开始播放音乐
- music puaused:暂停播放
- switch to next song: 切换到下首音乐
- switch to previous song: 切换到上首音乐
==== python execute bootpy ======== python file check /data/pyamp/main.py ======== python execute from /data/pyamp/main.py ====
play Blob
start to play
...
----------------------------- ESP Audio Platform -----------------------------
| |
| ESP_AUDIO-v1.7.0-31-g5b8f999-3072767-09be8fe |
| Compile date: Oct 14 2021-11:00:34 |
------------------------------------------------------------------------------
...
play Blob
music puaused
...
next Blob
switch to next song
...
prev Blob
switch to previous song
...
4、HaaS UI Lite 音乐播放器模板说明
本案例中使用到了HaaS UI Lite封装的音乐播放器类型的模板。此模板的代码实现请参考music.py的实现。基于此模板可以很方便的对要播放的音乐进行管理。下面是对模板元素及面板库API的说明。
4.1、音乐播放器元素
如下图所示,此温湿度面板一共有8个元素,编号为1-4的元素是温度显示的组成部分,编号为5-8的元素为相对湿度显示的组成部分。
下面是音乐播放器模板代码中显示各元素的位置,读者可以根据自己的需求对其进行替换或修改。
元素ID | 功能 | 相关代码 | 说明 |
1 | 音乐/专辑封面 | albumCover.set_src(musicData[currentMusic]["album_url"]) | 静态图片,尺寸:116*116 |
2 | 音乐名称 | songTitle.set_text(musicData[currentMusic]["title"]) |
英文 |
3 | 专辑名称 | albumTitle.set_text(musicData[currentMusic]["album"]) | 英文 |
4 | 当前位置 | 当前播放的音乐位置 | 时间,单位:秒 |
5 | 音乐时长 | 音乐信息的"duration"字段 | 需与音乐实际长度相符,单位:秒 |
6 | 上一首按钮 | image[i].set_src(functionImage[i]) |
无 |
7 | 开始/暂停播放按钮 | image[i].set_src(functionImage[i]) | 无 |
8 | 下一首按钮 | image[i].set_src(functionImage[i]) | 无 |
9 | 添加/取消收藏 |
image[3].set_src(RESOURCES_ROOT + "images/favorite.png") image[3].set_src(RESOURCES_ROOT + "images/favorited.png") |
本功能仅仅是演示功能,重开机即丢失 |
4.2、音乐播放器模板API说明
目前音乐播放器提供了添加/删除音乐到播放列表的功能作为示例。
模板文件中内置了一个播放列表,详情见music.py中musicData的内容。
addToList(musicItem) - 将musicItem添加到播放列表中
- 函数原型
addToList(musicItem)
- 参数说明
参数 | 类型 | 必选参数? | 说明 |
musicItem | 字典类型 | 是 |
字典中各变量说明如下: title:音乐名称 album:专辑名称 album_url:专辑封面 url:音乐文件所在位置 duration:音乐总时长,单位:秒 favorite:是否加入收藏列表 |
- 返回值
无
- 示例代码
# -*- encoding: utf-8 -*-
from music import MusicPlayer
player = MusicPlayer()
player.createPage()
print('Music Player started')
my_music = {"title":"spring_short","album":"Darius","album_url": '',"url":"file://data/pyamp/spring.mp3","duration":30,"favorite": False
}
player.addToList(my_music)
print('add new music into play list')
- 代码输出
Music Player started
add new music into play list
removeFromList(musicItem) - 将musicItem从播放列表中移除
- 函数原型
removeFromList(musicItem)
- 参数说明
参数 | 类型 | 必选参数? | 说明 |
musicItem | 字典类型 | 是 | 同addToList |
在遍历musicData查找目标音乐信息的时候"favorite"字段的值会被忽略。
- 返回值
无
- 示例代码
# -*- encoding: utf-8 -*-
from music import MusicPlayer
player = MusicPlayer()
player.createPage()
print('Music Player started')
my_music = {"title":"spring_short","album":"Darius","album_url": '',"url":"file://data/pyamp/spring.mp3","duration":30,"favorite": False
}
player.addToList(my_music)
print('add new music into play list')
player.removeFromList(my_music)
print('remove music from play list')
- 代码输出
Music Player started
add new music into play list
remove music from play list
本案例中使用到了多种控件,关于HaaS UI Lite的控件说明请参考链接。
5、思考
本案例中音乐播放器模板提供了添加和删除音乐到播放列表中的功能,常见的音乐播放器还有很多其它功能,比如单曲循环、播放列表循环等等。有没有兴趣做一个客制化的播放器,添加自己想要的功能?有的话赶紧来挑战一下吧。也欢迎将您的作品投稿给我们,说不定会有小惊喜哦。
来这里发现更多有趣案例:
HaaS开发框架HaaS积木方案,赋能生态开发者,让您快速找到自己需要的解决方案,硬件主板与外设,以及各种应用组件。https://haas.iot.aliyun.com/solution
ESP32 也能实现精美UI 使用 HaaS UI Lite (Python)打造音乐播放器相关推荐
- App设计灵感之十二组精美的音乐播放器App设计案例
带上耳机,打开这些风格独特的音乐播放器,进入音乐的世界. ① Podcast App by Herdetya Priambodo ② Playo Music player app by Hesam M ...
- 基于 Qt5 ( C++ ) 开发的一个小巧精美的本地音乐播放器
LightMusicPlayer --南京大学2019秋季学期 "高级程序设计" 课程设计三 基于Qt5开发的一个小巧精美的本地音乐播放器 代码注释详细,适合作为一个用于入门的Qt ...
- 仿网易云音乐html代码,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
简要教程 APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插 ...
- html5自动播放音乐外链,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插件. 安装 ...
- 调音台docker教程_威联通Docker教程 篇二:三分钟安装精美的音乐播放器 MusicPlayer!Container Station系列教程!...
威联通Docker教程 篇二:三分钟安装精美的音乐播放器 MusicPlayer!Container Station系列教程! 2020-04-15 11:01:02 67点赞 529收藏 47评论 ...
- 漂亮的svg音乐播放器UI界面代码
下载地址 漂亮的svg音乐播放器UI界面代码 dd:
- android 音乐播放器ui界面设计音乐播放器毕业设计。Android studio编译,项目有源码和apk
使用Android Studio开发一个简易的音乐播放器 界面图: 视频展示: android 音乐播放器ui界面设计音乐播放器毕业设计.Android studio编译 项目下载: android音 ...
- Android音乐播放器 -- UI 代码构现
Fragment是 android3.0之后出现的概念, 目前广泛使用与各种App中,比如大家非常熟悉的微信,QQ等的切换,我使用了Fragment实现 我的 / 歌手 / 专辑 列表切换,下面是利用 ...
- 音乐播放器的实现(二)---UI面板的制作
音乐播放器的实现(二)---UI面板的制作 传送门:(完整工程见第五章篇尾) 音乐播放器的实现(一)-- Audio Listener和Audio Source面板的介绍 音乐播放器的实现(三)--- ...
最新文章
- Ivanti 洞察职场新趋势:71% 的员工宁愿放弃升职也要选择随处工作
- 使用 Eclipse Memory Analyzer 进行堆转储文件分析
- JavaScript——易班优课YOOC课群在线测试禁止查卷解决方案
- 详细回复某个CSDN网友,对我的文章和技术实力以及CSDN的吐槽
- 剑指offer 链表中倒数第k个节点
- linux cdc设备驱动程序,Linux Kernel 'cdc-wdm' USB设备驱动程序堆缓冲区溢出漏洞
- elementui el-from 怎样显示图片_vue2.0使用weui.js的uploader组件上传图片(兼容移动端)...
- SCOI2020游记
- 2021年网生代线上社交行为洞察报告
- C语言课后习题(63)
- Tom邮箱注册机|注册辅助工具!!!
- 使用tcl 创建vivado工程
- laravel 文件
- 冠状病毒主题网页制作——疫情地图
- PTA-哥尼斯堡的“七桥问题” (20 分)
- 系统更新win10服务器出错怎么办,windows10更新升级失败0x80072ee2解决方法
- LTE上报的CQI、PMI、RI
- 解决win2003里IIS运行ASP时出现请求资源在使用中的问题
- (中)苹果有开源,但又怎样呢?
- 大榕树BASIS QQ群