RT-Thread-网络音频流播放器的实现 -- 基于RT-thread柿饼派RT-Thread问答社区

网络音频流播放器的实现 -- 基于RT-thread柿饼派

发布于 2021-01-25 23:57:03 浏览：1292 订阅该版

[tocm]

# 一、概要
## 1.1、功能
基于柿饼派实现一个网络音频流播放器，目前实现的基本功能是这样的：
- 扫描附近的WiFi，输入密码后连接WIFi
- 能够播放本地音乐
- 能够搜索音乐
- 能够播放网络音乐
- 能够查看所播放网络音乐的歌词
- 能够查看所播放网络音乐评论区的内容
## 1.2、开发环境
开发环境是由RT-thread 提供的一整套工具：
- 硬件：柿饼派：RT-thread 官方的一款GUI开发板，屏幕大小480X272，底层驱动由RT-thread操作系统实现，上层GUI应用可以采用JavaScript开发。
- PersimmonUI Builder  -- 版本：1.4.20200918
GUI开发软件PersimmonUI Builder，所见即所得的开发模式，该工具支持控件的布局和操作，同时可以在该软件结合柿饼UI提供的控件编写对应的JavaScript代码，支持一键下载，支持在线仿真（这个功能省却了很多时间，可以先预览效果再下载）。
# 二、网络音频流播放器的功能与实现
功能和界面都有点模拟网易云音乐，工程只使用了一个page，别的功能区显现、界面切换等等都是使用了自定义面板（这个控件真滴很强），如下所示：
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/b6b0f5b924b40ec882fc41bc4241d924b1dfeb89.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Njk3MzM1,size_16,color_FFFFFF,t_70)
先看看屏幕下方的功能区说明：
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/df746e2c6f6da2db5b2fe700de0432017ed90cca.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Njk3MzM1,size_16,color_FFFFFF,t_70)
功能区负责切换不同的功能，主要包括个性推荐、在线音乐、本地音乐、设置等。
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/4db410cbc841d44c0feebc1615ee095d7d964f68.gif)

- 个性推荐区
打算实现的是网易云一些歌单的推荐，但是目前没有做，所以用动态图片糊弄一下，有空再实现。
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/8e82fe8b44e09276f4b417d3ea0974dd30244e64.gif)
- 本地音乐
用于播放存储在本地的音乐，可以选择某一曲音乐进行播放
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/1c59bb3bd91ebf6517b286a2b181c1966468df87.gif)
- 网络音乐
这里由于是仿真，无法使用WIFI，所以无法搜索，使用柿饼派失误是可以实现音乐的搜索的，由于文本输入控件目前只能输入字母、数字等字符，无法输入中文，所以只能选择使用拼音之类的方式搜索。
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/a58fff02b304fc3339fe66256025a42a85210cbf.gif)
- 设置界面
同样是因为仿真的原因，无法使用WIFI控件，所以WiFi的名称都没有显示出来，如果是直接使用柿饼派，是可以直接查看到你附近的WIFI，点击后，就可以输入密码。连接WIFI了。
![在这里插入图片描述](https://oss-club.rt-thread.org/uploads/20220714/fb23249c157f4d9e5771545f1ddf622d8c052b9f.gif)
- 本来还想描述每个功能是如何实现的，但是感觉太浪费时间了，且工程还有很多不足和BUG，之后还得慢慢完善，将工程分享出来，各位看看源代码也能够知道是怎么实现的。

# 三、工程资料和展示
- 项目工程已上传到Github，工程地址：[persimmonUI_network_music_player](https://github.com/YGL1024/persimmonUI_network_music_player)
该工程后期会不断更新。
- 工程百度云地址：链接：https://pan.baidu.com/s/1J8obDrbNqx6wfvvIBBNWxA   提取码：ucrv 
下载解压后，就music文件夹放入柿饼派SD卡的根目录下即可，然后下载工程文件进入柿饼派。
# 四、参考资料和工具
## 4.1、JavaScript相关
- [《菜鸟教程》之 JavaScript 教程](https://www.runoob.com/js/js-tutorial.html)
非常适合入门的教程，初学JavaScript的可以快速浏览一下，能够很快的入门。
## 4.2、素材相关
### 4.2.1、静态图片
- [觅元素](http://www.51yuansu.com/)
图片素材非常多的图片素材，尤其是一些免扣的图片。
- [百度图片](https://image.baidu.com/)
这个素材更多了，不过需要自己抠图
### 4.2.2、gif图片
- [https://www.soogif.com/](https://www.soogif.com/)
- [百度图片](https://image.baidu.com/)

## 4.3、开发工具
- gif处理软件  -- ScreenToGif [[官网地址]](https://www.screentogif.com/)
非常优秀的一款处理GIF的开源软件，能够录制、绘制和处理GIF，功能强大，且很容易使用。
个人最喜欢的是里面能够将gif转换成图片帧，还有裁剪gif大小等等。
- 图片在线处理工具   [photopea](https://www.photopea.com/)
该工具相当于PS的在线版本，一般不怎么抠图的话，应该不会安装占用空间那么大的Photoshop。诸如抠图等比较简单的工作使用该工具还是能够很方便的去实现。

## 4.4、网易云音乐相关API
- [收藏这些API，获取网易云音乐数据超轻松](https://my.oschina.net/u/3772410/blog/4357234)
- [网易云音乐在线获取](https://www.jianshu.com/p/98965cee3615)
## 4.5、个人在使用柿饼派的一些笔记
- [使用Persimmon UI Builder 开发的一些技巧和注意事项 -- （RT-thread 柿饼UI）](https://blog.csdn.net/m0_37697335/article/details/112299697)