打造跳跃音波播音乐放器(Electron+Nodejs+React)

1
2
npm install -g package --registry=https://registry.npm.taobao.org
复制代码

1
2
git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
复制代码

1
2
3
cd NeteaseCloudMusicApi
node app.js
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
fluentApp
    |--app
        |--cache //图片缓存目录
        |--dist //js，scss打包编译文件夹
        |--font //字体文件
        |--...文件
    |--server
        |--express目录
    |--ui
        |--js //js开发文件
        |--scss //scss样式文件
复制代码

1
2
npm install express --save
复制代码

1
2
express server
复制代码

1
2
node bin/www
复制代码

1
2
const {app} = require('electron');
复制代码

1
2
app.on('ready', createWindow);
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const {BrowserWindow} = require('electron');
let win//定义一个窗口
function createWindow() {
    win = new BrowserWindow({
        frame: false,
        width: 400,
        height: 670,
        transparent: true,
        resizable: false,
        maximizable: false,
        backgroundColor: '#00FFFFFF',
        webPreferences: {
            nodeIntegrationInWorker: true
        },
        icon: path.join(__dirname, 'icon.ico')
    });
}
复制代码

1
2
3
4
5
6
win.loadURL(url.format({
    pathname: path.join(__dirname, 'app.html'),
    protocol: 'file:',
    slashes: true
}));
复制代码

1
2
3
4
win.on('ready-to-show', () => {
    win.show();
});
复制代码

1
2
3
4
5
6
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
});
复制代码

1
2
win.webContents.openDevTools();
复制代码

1
2
const { default: installExtension, REDUX_DEVTOOLS } = require('electron-devtools-installer');
复制代码

1
2
3
4
5
installExtension(REDUX_DEVTOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));

复制代码

1
2
3
<audio src="audio.mp3" id="audio"></audio>
let audio = document.getElementById('audio');
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//获取web audio上下文
this.audioContext = new window.AudioContext();
//获取canvas节点
this.canvas = document.getElementById('waveCanvas');
//获取canvas 2d上下文
this.ctx = this.canvas.getContext('2d');
//设置canvas宽高
this.width = this.canvas.offsetWidth,
this.height = this.canvas.offsetHeight;
this.canvas.width = this.width,
this.canvas.height = this.height;
//画出矩形方框，this.baseY是方框高度相对于窗口高度的基准线
this.ctx.beginPath();
this.ctx.fillStyle = 'rgba(102,102,102,0.8)';
this.ctx.moveTo(0, this.baseY);
this.ctx.lineTo(this.width, this.baseY);
this.ctx.lineTo(this.width, this.height);
this.ctx.lineTo(0, this.height);
this.ctx.fill();

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
this.audio = document.getElementById('audio');
//使用audio标签作为音源
this.source = this.audioContext.createMediaElementSource(this.audio);
//创建一个分析器
this.analyser = this.audioContext.createAnalyser();
//串联起分析器节点和音源输出
this.analyser.connect(this.audioContext.destination);
this.source.connect(this.analyser);
//从分析器中获取当前播放的频率数据
let array = new Uint8Array(_this.analyser.frequencyBinCount);
this.analyser.getByteFrequencyData(array);
复制代码

1
2
3
4
5
6
7
8
9
10
this.ctx.beginPath();
this.ctx.moveTo(0,this.baseY);
for(let i = 0;i < array.length; i++) {
    this.ctx.lineTo(i, this.baseY - array[i]);
}
this.ctx.lineTo(this.width, this.baseY);
this.ctx.lineTo(this.width, 0);
this.ctx.lineTo(0, 0);
this.ctx.fill();
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
let waveArr1 = [],waveArr2 = [],waveTemp = [],leftTemp = [],rightTemp = [],waveStep = 50,leftStep = 70, rightStep = 90;
array.map((data, k) => {
    if(waveStep == 50 && waveTemp.length < 9) {
        waveTemp.push(data / 2.6);
        waveStep = 0;
    }else{
        waveStep ++;
    }
    if(leftStep == 0 && leftTemp.length < 5) {
        leftTemp.unshift(Math.floor(data / 4.8));
        leftStep = 70;
    }else {
        leftStep --;
    }
    if(rightStep == 0 && rightTemp.length < 5) {
        rightTemp.push(Math.floor(data / 4.8));
        rightStep = 90;
    }else {
        rightStep --;
    }
});
waveArr1 = leftTemp.concat(waveTemp).concat(rightTemp);
waveArr2 = leftTemp.concat(rightTemp);
waveArr2.map((data, k) => {
    waveArr2[k] = data * 1.8;
});
let waveWidth = Math.ceil(this.width / (waveArr1.length - 3));
let waveWidth2 =  Math.ceil(this.width / (waveArr2.length - 3));
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
this.ctx.beginPath();
this.ctx.fillStyle = 'rgba(102,102,102,0.8)';
this.ctx.moveTo(-waveWidth * 2, this.baseY - waveArr1[0]);
for(let i = 1; i < waveArr1.length - 2; i ++) {
    let p0 = {x: (i - 2) * waveWidth, y:waveArr1[i - 1]};
    let p1 = {x: (i - 1) * waveWidth, y:waveArr1[i]};
    let p2 = {x: (i) * waveWidth, y:waveArr1[i + 1]};
    let p3 = {x: (i + 1) * waveWidth, y:waveArr1[i + 2]};

    for(let j = 0; j < 100; j ++) {
        let t = j * (1.0 / 100);
        let tt = t * t;
        let ttt = tt * t;
        let CGPoint ={};
        CGPoint.x = 0.5 * (2*p1.x+(p2.x-p0.x)*t + (2*p0.x-5*p1.x+4*p2.x-p3.x)*tt + (3*p1.x-p0.x-3*p2.x+p3.x)*ttt);
        CGPoint.y = 0.5 * (2*p1.y+(p2.y-p0.y)*t + (2*p0.y-5*p1.y+4*p2.y-p3.y)*tt + (3*p1.y-p0.y-3*p2.y+p3.y)*ttt);
        this.ctx.lineTo(CGPoint.x, this.baseY - CGPoint.y);
    }
    this.ctx.lineTo(p2.x, this.baseY - p2.y);
}
this.ctx.lineTo((waveArr1.length) * waveWidth, this.baseY - waveArr1[waveArr1.length - 1]);
this.ctx.lineTo(this.width + waveWidth * 2, this.baseY);
this.ctx.lineTo(this.width + waveWidth * 2, this.height);
this.ctx.lineTo(-2 * waveWidth, this.height);
this.ctx.fill();
复制代码

1
2
3
4
5
<svg width="32vw" height="32vw">
    <circle cx="16vw" cy="16vw" r="15.5vw" strokeWidth="3" stroke="#DDD" fill="none"></circle>
    <circle cx="16vw" cy="16vw" r="15.5vw" strokeWidth="3" stroke="#666" fill="none" strokeDasharray={`${this.calcCir()}vw 2000`}></circle>
</svg>
复制代码

1
2
3
4
<div className="dot-wrap" id="dotWrap" style={{transform: `rotate(${this.calcDeg()}deg)`}}>
    <div className="dot" onMouseDown={this.dotMouseDown.bind(this)}></div>
</div>
复制代码

1
2
3
import {remote} from 'electron';
const fs = remote.require('fs');
复制代码

1
2
3
4
5
6
7
8
 remote.dialog.showOpenDialog({
    title: '选择添加目录',
    properties: ['openDirectory', 'multiSelections'],
}, (files) => {
    if(!files) return;
    ...
})
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
const {ipcMain} = require('electron');
const child_process = require('child_process');
//主进程监听scanningDir，当渲染进程触发scanningDir时主进程开始进行扫描
ipcMain.on('scanningDir', (e, dirs) => {
    const cp = child_process.fork('./scanFile.js');
    cp.on('message', () => {
        e.sender.send('scanningEnd');
        cp.disconnect();
    });
    cp.send(dirs);
});
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const jsmediatags = require('jsmediatags');
const btoa = require('btoa');
const fs = require('fs');
//对扫描到的所有音乐文件进行循环出来
songItem.map((data, k) => {
    let name = getFileName(data);
    jsmediatags.read(data, {
        onSuccess: (tag) => {
            //文件内包含的专辑封面是base64格式的图片，获取后转成jpeg格式缓存到cache文件夹内。
            let image = tag.tags.picture;
            let filename = `cache/albumCover/${createRandomId()}.jpeg`;
            let base64String = "";
            image.data.map((d, j) => {
                base64String += String.fromCharCode(d);
            });
            let dataBuffer = new Buffer(btoa(base64String), 'base64');
            fs.writeFile(filename, dataBuffer, (err) => {
               ...
            });
        },
        onError: (error) => {
            ...
        }
    });
});
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const low = require('lowdb');
const FileAsync = require('lowdb/adapters/FileAsync');
const adapter = new FileAsync('db.json');
const db = low(adapter);

...
//读取一下数据库
db.then(db => {
    db.set('localPlayList', data).write().then(() => {
        process.send('');
    })
});
...
复制代码

1
2
db.read().get('key').value();
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import shuffleArray from 'shuffle-array';
//创建随机列表
createShuffeList() {
    let playlist = db.get('playList').value() || [];
    let shuffleList = shuffleArray(playlist, {copy: true });
    store.dispatch(Actions.setShuffleList(shuffleList));
}

//将新增歌曲插入到随机列表
insertSongToShuffleList(item) {
    if(!item) return;
    let shuffleList = store.getState().main.shuffleList;
    let len = shuffleList.length;
    (item || []).map((data, k) => {
        let insertPosition = Math.floor(len * Math.random());
        shuffleList = shuffleList.splice(insertPosition, 0, data);
    });
    store.dispatch(Actions.setShuffleList(shuffleList));
}
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
let thumbarButtons = [
    {
        tooltip: '上一曲',
        icon: path.join(__dirname, 'prev.png'),
        flags: [
            'nobackground'
        ],
        click: () => {
            win.webContents.send('pre');
        }
    },
    {
        tooltip: '播放',
        icon: path.join(__dirname, 'play.png'),
        flags: [
            'nobackground'
        ],
        click: () => {
            win.webContents.send('switch');
        }
    },
    {
        tooltip: '下一曲',
        icon: path.join(__dirname, 'next.png'),
        flags: [
            'nobackground'
        ],
        click: () => {
            win.webContents.send('next');
        }
    }
]
 win.setThumbarButtons(thumbarButtons);
 ...
ipcMain.on('playSwitch', (e, state) => {
    let icon = state?'paused.png':'play.png';
    thumbarButtons[1].icon = path.join(__dirname, icon);
    win.setThumbarButtons(thumbarButtons);
});
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let http = require('http');
let https = require('https');
let httpProxy = require('http-proxy');
let url = require('url');
router.use('*', (req, res) => {
    req.url = req.originalUrl.replace('/proxy', '');
    let proxy = httpProxy.createProxy({});
    proxy.on('error', (err) => {
        console.log('ERROR');
        console.log(err);
    });
    let finalUrl = 'http://m10.music.126.net';
    let finalAgent = null;
    let parsedUrl = url.parse(finalUrl);
    if (parsedUrl.protocol === 'https:') {
        finalAgent = https.globalAgent;
    } else {
        finalAgent = http.globalAgent;
    }
    proxy.web(req, res, {
        target: finalUrl,
        agent: finalAgent,
        headers: { host: parsedUrl.hostname },
        prependPath: false,
        xfwd : true,
        hostRewrite: finalUrl.host,
        protocolRewrite: parsedUrl.protocol
    });
});
复制代码

1
2
--no-cache --update $FileName$:$ProjectFileDir$/app/dist/$FileNameWithoutExtension$.css
复制代码

1
2
3
4
5
6
7
8
9
10
plugins: [
    new ExtractTextPlugin("bundle_style.css"),
    //new webpack.DefinePlugin({
    //    'process.env': {
    //        'NODE_ENV': JSON.stringify('production')
    //    }
    //}),
    //new UglifyJSPlugin()
]
复制代码

1
2
electron .
复制代码

1
2
3
4
5
"scripts": {
    "start": "electron app/main.js",
},
//运行 npm start
复制代码

1
2
npm install electron-packager -g
复制代码

1
2
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
复制代码

1
2
electron-packager ./ fluentApp --platform=win32 --out=../../build --arch=x64 --electron-version=1.4.13 --icon=./icon.ico --ignore=/"(cache|db.json)" --overwrite
复制代码

1
2
3
npm install grunt --save
npm install grunt-electron-installer --save
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const grunt = require("grunt");
grunt.config.init({
    pkg: grunt.file.readJSON('package.json'),
    'create-windows-installer': {
        x64: {
            appDirectory: './fluentApp-win32-x64',
            authors: 'maikuraki.',
            exe: 'fluentApp.exe',
            description:"music app",
        }
    }
});

grunt.loadNpmTasks('grunt-electron-installer');
grunt.registerTask('default', ['create-windows-installer']);
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
let handleStartupEvent = () => {
    let install = () => {
        let updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe');
        let target = path.basename(process.execPath);
        let child = child_process.spawn(updateDotExe, ["--createShortcut", target], {detached: true});
        child.on('close', (code) => {
            app.quit();
        });
    };
    let uninstall = () => {
        let updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe');
        let target = path.basename(process.execPath);
        let child = child_process.spawn(updateDotExe, ["--removeShortcut", target], {detached: true});
        child.on('close', (code) => {
            app.quit();
        });
    };

    if (process.platform !== 'win32') {
        return false;
    }

    let squirrelCommand = process.argv[1];

    switch (squirrelCommand) {
        case '--squirrel-install':
        case '--squirrel-updated':
            install();
            return true;
        case '--squirrel-uninstall':
            uninstall();
            app.quit();
            return true;
        case '--squirrel-obsolete':
            app.quit();
            return true;
    };

};

if (handleStartupEvent()) {
    return;
}
复制代码