提取音频文件元数据，而无需使用fileStream

问题描述

我正在尝试向我的node.js Web应用程序添加功能，以便当用户输入多个音频文件时，我可以提取和显示每个文件的元数据信息，例如标题/艺术家/专辑/年份等。 m尝试添加它，以使其理想地适用于大多数音频文件（mp3 / wav / flac / etc ..）。

此示例（带有github链接）显示了可能的情况：https://audio-tag-analyzer.netlify.app/几乎完全按照我的意愿做。该网站的代码是一个React应用，但是我并不熟悉。

我在node.js网络应用程序中研究了几种可能的解决方案来实现我的目标：

选项1：使用默认文件输入选择

无法工作，因为文件默认文件输入选择将返回仅具有名称/大小/类型信息（无元数据）的FileList对象

选项2：使用music-Metadata npm包通过parseFile读取文件

使用此软件包：https://github.com/Borewit/music-metadata，如果您具有完整的文件路径，则可以使用parseFile输入选项，我无法在浏览器中获得此文件，而没有将文件上传到我的本地服务器上，这是我想避免的

选项3：使用parseStream函数使用Node.js流。

使用此软件包：https://github.com/Borewit/music-metadata

此程序包的parseStream示例代码需要'someReadStream'作为输入，如下所示：

mm.parseStream(someReadStream,{mimeType: 'audio/mpeg',size: 26838})
  .then( Metadata => {
     console.log(util.inspect(Metadata,{showHidden: false,depth: null}));
     someReadStream.destroy();
   });

我一直在研究此解决方案，但还无法使其正常工作，我正在通过以下HTML代码读取文件输入：

 <input style="cursor: pointer;" type="file" id="file" multiple="multiple" />

输入文件时我应该监视事件，然后以某种方式在前端创建一个readFileStream，然后将该readFileStream传递给我的后端，以便我可以运行该程序包以提取元数据信息吗？

解决方法

我将使用一个不同的库，因为该库的前端似乎不需要反应，有角度的工具或诸如browserify之类的其他工具即可使用。注意：我试图使其与Browserify一起使用，但是遇到了很多问题。我花了太多时间试图让它变得有趣起来。

无论如何，这是使用jsmediatags

获取所有标签的好方法

$(document).ready(() => {
  function readSong(file) {
    return new Promise((resolve,reject) => {
      window.jsmediatags.read(file,{
          onSuccess: (tag) => {
            resolve(tag.tags);
          },onError: (error) => {
            reject(error);
          }
      });
    });
  }

  $("#file").change(async (event) => {
    var fileList = event.target.files;
    try {
      const tags = await readSong(fileList[0]);
      console.log(tags);
    } catch(e) {
      console.log(e);
    }
  });
});

<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.3/jsmediatags.min.js"></script>
    <script src="./lib/index.js"></script>
  </head>
  <body>
    <input style="cursor: pointer;" type="file" id="file" multiple="multiple" />
  </body>
</html>

audio audio metadata metadata