使用electron开发桌面音乐播放器_electron clientrequest

一：主要技术栈
前端：electron-vue+vue-router+axios+es6+pouchDB+node js+nsis;

二：目前已完成的功能
音乐播放：包括播放进度条、歌曲切换、缓存条、快进
音乐处理：加密，解密。
登录注册：登录、注册、激活
本地数据库：节目单曲与节目信息的本地数据库的存储、冗余单曲的本地删除与数据库删除

三：参考资料
electron-vue https://github.com/SimulatedGREG/electron-vue
pouchDB https://www.cnblogs.com/suziwen/p/4507684.html
web audio http://www.alloyteam.com/2014/12/web-audio-api-na-xie-nian-di-web-audio/

四：技术细节
1.播放
关于主要功能音频播放，才用的是Audio Data API 原因呢。。。忘了。不采用audio标签，后面等代码优化会采用Web Audio API 详情看参考资料 web audio。现在就有一问题。因为采用的是new audio 所以每次切歌的时候需要先pause 然后销毁 null。但是这时候销毁后，audio还会继续缓冲，但是不会播放。当快速点击切歌的时候会积攒特别多的音频需要缓冲，所以当快速切歌后的歌曲需要特别长的时间去缓冲当前歌曲。待解决。

2.音频加密
见博客中的另外一个文章使用crypto。

3.本地数据库pouchDB

    var music = new PouchDB('music');
   //存

     program.put({
      _id:'唯一id',
      content:'内容'
     }).then(function (responseqwe) {
     }).catch(function (erre) {
     })

    //取

      music.get('上面的id必须是字符串').then(function(doc) {
      }).then(function(response) {
      }).catch(function (err) {
       }
      }).then(()=>{
      if(r == _this.musicLis.length-1){
        _this.changeUpOk()
       }
      });            
     // 获取全部

                music.allDocs({
                    include_docs: true,
                    descending: true
                }, 
                    function (err, doc) {

                    }
                });       
    //删除单个
    music.remove({_id:'上面的id', _rev:'获取到的_rev'});

    //删除全部

    music.destroy().then(function (response) {
         console.log('成功清除全部缓存')
                    }).catch(function (err) {
                    });            
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

4 .electron

由于主体部分是webview 和本地进行交互，webview 使用的是苹果字体，但是webview 使用苹果字体就得下半天 40多MB所以需要从electron启动一个本地服务器，然后把字体托给webview

electron main 

    protocol.registerFileProtocol('nameee', (request, callback) => {
        const url = request.url.substr(7);
        callback({path: path.normalize(`${__static}/${url}`)})  // 指向的本地资源
    }, (error) => {
        if (error) console.error('Failed to register protocol')
    });

// webview
@font-face {
  font-family:PingFangSC-Light;
  src: url(nameee:///font/PingFangRegular.ttf) format('TrueType');
}

还有一个webview 使用本地方法的方法就不写了。具体使用require('events');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

托盘之类的自己百度去吧。百度写的比我好

打包 mac 直接使用 npm run build
windows npm run build 然后使用nsis 打包成可自定义安装工具

5 . 下载

const os = require("os");
export function osType (){
    return (os.type()=='Windows_NT')?process.cwd():'/tmp';
}


// windows 下载目录为 安装软件的根目录  mac 为tmp 文件夹
1
2
3
4
5
6
7