0%

MusicFree+loolob搭建自己的音乐应用(一)

MusicFree简介

一个跨平台的开源音乐软件,基于React Native框架
通过其灵活的插件能力,以支持各种定制化玩法

通过MusicFree插件+云服务器的方式,即可打造个人音乐库

开始搭建

1. 分析插件接口

先参考插件示例

根据其plugin.d.ts文件,提取出两个个关键接口

  1. search 搜索音乐

    1
    2
    3
    4
    5
    6
    7
    8
    type ISearchFunc = <T extends ICommon.SupportMediaType>(
    query: string,
    page: number,
    type: T,
    ) => Promise<ISearchResult<T>>;
    interface IPluginDefine {
    search?: ISearchFunc;
    }
  2. getMediaSource 获取音乐

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    interface 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. 准备资源

  1. 通过QQ音乐PC客户端下载资源(app下载的资源无法解码)

  2. 通过转换工具,将vip资源解码

  3. 通过ftp直接传到loolob的云服务上

3. 准备服务器

MusicFree的插件通过http协议进行交互,所以直接使用loolob的服务器,扩展几个接口即可

  1. 搜索接口

    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)})
    // ...
    }
  2. 获取资源接口

    1
    2
    3
    4
    5
    6
    // 返回音乐资源
    func (slf *MusicFreePlugin) getmusic(c *gin.Context) {
    // ...
    c.File(fp)
    // ...
    }

注意点

    1. 音乐资源通过唯一id识别,直接使用md5值即可
    1. 服务器与APP交互的核心值就是idurl,一个用于标识资源,一个用于下载/播放
    1. 最简策略,直接静态路由本地文件,search接口返回本地音乐的url即可

4. 准备插件

直接在示例工程上进行开发

将plugin.d.ts文件替换为MusicFree中最新的即可

  1. 搜索接口

    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,
    }
    }),
    }
    }
  2. 获取资源接口

    1
    2
    3
    4
    5
    6
    7
    // 本接口只负责返回资源url,资源的下载由app接管
    async function getMediaSource(musicItem, quality) {
    return {
    url: `${URL}getmusic?id=${musicItem.id}`,
    quality: quality,
    }
    }

开始使用自己的音乐服务

  1. 编译插件并拷贝进手机,然后通过APP安装

    1
    npm run build
  2. 搜索,然后播放,大功告成