最近在学习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学得不够)。
Logo

前往低代码交流专区

更多推荐