MusicFree简介
一个跨平台的开源音乐软件,基于React Native框架
通过其灵活的插件能力,以支持各种定制化玩法
通过MusicFree插件+云服务器的方式,即可打造个人音乐库
开始搭建
1. 分析插件接口
先参考插件示例
根据其plugin.d.ts文件,提取出两个个关键接口
search 搜索音乐
1
2
3
4
5
6
7
8type ISearchFunc = <T extends ICommon.SupportMediaType>(
query: string,
page: number,
type: T,
) => Promise<ISearchResult<T>>;
interface IPluginDefine {
search?: ISearchFunc;
}getMediaSource 获取音乐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15interface IMediaSourceResult {
headers?: Record<string, string>;
/** 兜底播放 */
url?: string;
/** UA */
userAgent?: string;
/** 音质 */
quality?: IMusic.IQualityKey;
}
interface IPluginDefine {
getMediaSource?: (
musicItem: IMusic.IMusicItemBase,
quality: IMusic.IQualityKey,
) => Promise<IMediaSourceResult | null>;
}
search从服务器搜索音乐资源
getMediaSource从服务器获取音乐资源进行播放或下载
实现上述两个接口即可在APP内通过 搜索=>下载=>播放 的方式,来播放存在云服务上的音乐了
2. 准备资源
通过QQ音乐PC客户端下载资源(app下载的资源无法解码)
通过转换工具,将vip资源解码
通过ftp直接传到loolob的云服务上
3. 准备服务器
MusicFree的插件通过http协议进行交互,所以直接使用loolob的服务器,扩展几个接口即可
搜索接口
1
2
3
4
5
6
7
8
9
10
11
12// search接口支持分页,可以在服务端自定义搜索结果的分页逻辑
func (slf *MusicFreePlugin) searchmusic(c *gin.Context) {
// ...
var body struct {
Page int
Query string
}
err := c.ShouldBindBodyWith(&body, binding.JSON)
// ...
c.JSON(200, gin.H{"list": list[start:end], "isEnd": page*PageCount >= len(list)})
// ...
}获取资源接口
1
2
3
4
5
6// 返回音乐资源
func (slf *MusicFreePlugin) getmusic(c *gin.Context) {
// ...
c.File(fp)
// ...
}
注意点
- 音乐资源通过唯一id识别,直接使用md5值即可
- 服务器与APP交互的核心值就是id和url,一个用于标识资源,一个用于下载/播放
- 最简策略,直接静态路由本地文件,search接口返回本地音乐的url即可
4. 准备插件
直接在示例工程上进行开发
将plugin.d.ts文件替换为MusicFree中最新的即可
搜索接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16// 通过http请求搜索音乐资源
async function searchMusic(query, page) {
// ...
const result = await axios.post(`${URL}searchmusic`, body)
// ...
return {
isEnd,
data: list.map(v => {
return {
id: v.MD5,
artist: v.Author,
title: v.Name,
}
}),
}
}获取资源接口
1
2
3
4
5
6
7// 本接口只负责返回资源url,资源的下载由app接管
async function getMediaSource(musicItem, quality) {
return {
url: `${URL}getmusic?id=${musicItem.id}`,
quality: quality,
}
}
开始使用自己的音乐服务
编译插件并拷贝进手机,然后通过APP安装
1
npm run build
搜索,然后播放,大功告成