起因

关于为啥要做这个音乐播放器。这有好多原因,最重要的自然是因为想听歌,但是网易官方的客户端在播放的时候用着不顺手,另外,感觉官方的客户端功能对我来说实在太多功能了,许多功能我实际上是用不到的,于是想动手开始写一个合自己心意的播放器。其次@xinda的inn项目给了我很多启发,因此动笔开工。

为啥百度轻咕了?

步入高三,很多时候的都身不由己,因此这个项目恐怕之后也无法持续更新。

准备

思考再三,暂时也没有什么时间学习新东西,于是决定使用自己暂时最顺手的electron加上推荐给@xinda233用的NeteaseCloudMusicApi,参考Ant Design为设计标准,差不多也万事俱备了

配色系统: Muzli Colors
API: NeteaseCloudMusicApi
UI库: electron
语言: NodeJS

环境搭建

  1. 首先安装nodejs环境,毕竟不是第一次使用node,这个早早准备好了。
  2. 接着安装electron,因为我还不会使用electron-builder,而且为了减少项目文件夹体积,选择全局安装 npm install electron -g
  3. 执行md codemusic ; cd codemusic ; npm init新建开发项目(现在在Windows环境下)

1.png

  1. 新建完index.jsindex.html界面如图所示

1.png

  1. 到此,一个基本的electron开发环境准备完成

正式开始

做好一个窗体

首先我需要明确自己需要什么,根据已有的设计,界面主要部分是一个圆形窗体加上环绕窗体的环状进度条

因此,我不需要菜单栏,窗体框架,而且这必须是个不可聚焦且不可改变大小的置顶窗口

因此我设置如下属性

    focusable: false,
    alwaysOnTop: true,
    frame:false,
    transparent: true, 
    resizable: false

让我们来试着运行……

神奇的事情发生了,什么都没有,因为我们的窗体内部还没有绘制任何东西,所以马上开始运行自然只是坑自己

因为运行时出现了滚动条,所以我们使用css移除它

body {
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-app-region: drag;
}

环形进度条

进度条这东西也不是第一次做,详细可以参考我之前的文章

但是直线进度条变为环形似乎导致了大脑宕机,毕竟我的css知识极其薄弱

于是一翻收藏夹,找回Ant Design里的进度条,又去掘金找了篇文章《css3 制作圆环进度条》,以及简书的《利用 clip-path 实现环形进度条》,比较过后决定还是使用svg方案。毕竟使用环境为electron,而css实现又过于麻烦,尽管之前有做过css大圆旋转,但也正是因为以前做过,所以再也不想踩进这个坑了。

在一通折腾后,总算参考《html svg生成环形进度条的实现方法》完成了

1.png

《html svg生成环形进度条的实现方法》中的js控制代码改为

let path = document.querySelector('.progress');
let len = path.getTotalLength(); //最大长度
path.style.strokeDashoffset = "300px"; #为471px减去所需百分比,见后文

连接网易云

按照已有的设计,连接网易的部分不使用原生API实现,转而使用Binaryify/NeteaseCloudMusicApi

连接准备

  1. Binaryify/NeteaseCloudMusicApi目录下的pluginsutilmodule文件夹和main.js文件拷贝到项目目录下

  2. 安装模块

npm install asios --save
npm install pac-proxy-agent --save
npm install tunnel --save

开始连接

模块怎么引用

首先以歌单详情和歌单url为例

ovIKK.png

ov30a.png

由官网给出的请求地址,再结合model下文件名可得

需要引用的模块名如 /playlist/detail 模块名为 playlist_detail

故得代码如下

const {
    playlist_detail,
    song_url,
} = require('./main')
async function test() {
    try {
        const result = await playlist_detail({
                id: 5334910692,
            })
        console.log(result.body.playlist)
        const result4 = await song_url({
            cookie: result.body.cookie,
            id: 22699108,
        })
        console.log(result4.body)

    } catch (error) {
        console.log(error)
    }
}
test()

得到格式化出来的代码

oyM1N.png

ovCwS.png

结合文档的描述,我们可以轻易看出,需要的歌曲ID数据应在result.body.playlist.trackIds

js控制audio

参照HTML DOM Audio 对象

定义一个audio标签

<audio src="b.mp3" controls="controls" preload id="music" hidden>

播放:DOM.play()

暂停:DOM.pause()

是否暂停:DOM.paused 暂停返回true,否则返回false

时间控制:DOM.currentTime赋值控制,读值读取,以秒计

总时长:DOM.duration 以秒计

实时更新进度条进度

path = document.querySelector('.progress');
audio = document.getElementById('music');
async function interv() {
    setInterval(function() {
        path.style.strokeDashoffset = parseInt(471 * (1 - audio.currentTime / audio.duration)).toString() + "px";
        console.log(path.style.strokeDashoffset)
    }, 100);
}

interv()

后续步骤

由于时间原因,暂时停于此处,日后再更