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

多运动

已于 2024-05-24 12:00:33 修改

阅读量4.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： electron 文章标签： vue.js node.js html5

于 2020-03-24 11:16:07 首次发布

本文链接：https://blog.csdn.net/qq_39050445/article/details/105066444

本文介绍在Electron中开发音乐播放器时如何处理本地音频文件，包括使用music-metadata插件读取音频文件信息，如时长，并通过fs模块读取文件，将其转化为Blob以供audio标签播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习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