electron和vue开发的音乐播放器遇到的一些问题（本地音频文件的播放，文件信息的读取）

        最近在学习electron，尝试开发了一个音乐播放器。在播放器本地音乐的时候遇到了一些问题。
在获取到本地的音频文件路径之后，audio不会向网络路径一样直接去缓存播放。废话不多说，直接上代码。

获取本地视频文件的时长 需要用到一个插件 music-metadata，点击进入。

 import fs from 'fs';
 import path from 'path';
 import {remote} from 'electron';
 import * as mm from 'music-metadata';


//...




readLocalFiles() {
                //获取文件的一些关键信息
                const me = this;
                const url = remote.app.getPath('music');//文件夹路径；
                fs.readdir(url, function (err, files) {
                    files.forEach(item => {
                        if (path.extname(item).toLowerCase() !== '.mp3') return;//遍历每一个文件，遇到非mp3文件直接返回（当然音频文件不止mp3，有需要可以多做判断）
                        mm.parseFile(path.join(url, item), {//利用music-metadata来获取文件的时长等信息 npm包地址 https://www.npmjs.com/package/music-metadata
                            duration: true
                        }).then(metadata => {
                            console.log(metadata);
                            me.localList.push({
                                name:item,
                                __dir_url:path.join(url, item),
                                duration:metadata.format.duration});
                        });

                    })
                })
            },

第二个关键部分就是去读取本地文件，本地文件需要用到fs模块。用fs模块读取文件，然后将缓存文件利用new Bolb()转化为bolb；

readFile1(item) {
                const me = this;
                const buf = fs.readFileSync(item.__dir_url);//读取文件，并将缓存区进行转换
                const uint8Buffer = Uint8Array.from(buf);
                const bolb = new Blob([uint8Buffer]);//转为一个新的Blob文件流
                console.log(bolb);
                me.url = window.URL.createObjectURL(bolb); //转换为url地址并直接给到audio
            },

这样本地的音频文件就可以利用audio进行读取了。

 

在查资料的过程中发现了前人的一些解决方案，https://github.com/whxaxes/blog/issues/8 。这里边介绍了两种方法。第一种方法不创建audio标签，直接利用

new window.AudioContext().createBufferSource() 去直接播放音频。第二种方法创建一个serve监听音频服务（一直没搞懂怎么实现的，node学得不够）。