electron和vue开发的音乐播放器遇到的一些问题(本地音频文件的播放,文件信息的读取)
最近在学习electron,尝试开发了一个音乐播放器。在播放器本地音乐的时候遇到了一些问题。在获取到本地的音频文件路径之后,audio不会向网络路径一样直接去缓存播放。废话不多说,直接上代码。获取本地视频文件的时长 需要用到一个插件 music-metadata,点击进入。import fs from 'fs';import path from 'path';...
·
最近在学习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进行读取了。
在查资料的过程中发现了前人的一些解决方案,使用 electron 做个播放器 · Issue #8 · whxaxes/blog · GitHub 。这里边介绍了两种方法。第一种方法不创建audio标签,直接利用
new window.AudioContext().createBufferSource() 去直接播放音频。第二种方法创建一个serve监听音频服务(一直没搞懂怎么实现的,node学得不够)。
更多推荐
已为社区贡献2条内容
所有评论(0)