如何在 JavaScript 中从 MP3 文件中读取元数据属性？

Posted 2023-03-07

【中文标题】如何在 JavaScript 中从 MP3 文件中读取元数据属性？

【英文标题】：How do I read metadata properties from MP3 file in JavaScript?

【发布时间】：2019-12-29 03:29:02

【问题描述】：

我知道以前有人问过类似的问题，特别是 this one，但所有答案通常都涉及以下两件事之一，这两件事我都想避免：

导入新库，或者，

使用 FileReader，据我所知，它仅适用于用户输入的文件。

我正在制作一个小游戏，其中包括在选项菜单中切换多个音乐曲目的选项，我希望能够显示曲目标题和艺术家。我可以调整我的歌曲对象，以便在代码中输入标题、艺术家等信息，但将其作为元数据包含在文件中似乎更简单，这样我只需输入文件名。有什么方法可以在不使用额外库的情况下从用户未输入的文件中读取元数据？这是我正在使用的 Song 对象，虽然它非常简单：

var Song = function(filename)

    this.intro = new Audio(); // the introduction of the song that leads into a loop
    this.intro.src = filename + "-intro.mp3";
    var temp = this;
    this.intro.addEventListener("ended", function() 
        this.currentTime = 0;
        temp.loop.currentTime = 0;
        temp.loop.play();
    );

    this.loop = new Audio(); // the main file that will be looped. Also has the relevant metadata
    this.loop.src = filename + ".mp3";
    this.loop.addEventListener("ended", function() 
        this.currentTime = 0;
        this.play();
    );
;

var songs = [
    new Song("track1"),
    new Song("track2"),
    new Song("track3")
];

【参考方案1】：

为此使用 mutag

在你的html中添加：

<script src="sanjit1.github.io/mutag/dist/mutag.min.js"></script>

并在你的 js 中添加：

const mutag = window.mutag;

并使用变量filename，

mutag.fetch(filename).then((tags) => 
      console.log(tags);
);

【讨论】：

我尝试使用源字符串和音频对象，但对于这两个对象来说，“无法在 'FileReader' 上执行 'readAsArrayBuffer'：参数 1 不是 'Blob' 类型。”

哦，我回家后你将不得不 grt 文件 blob 帮我解决这个问题

@KRLW890 快速提问您的应用程序是 Web 应用程序还是 js 应用程序？你也在这里使用 nodejs 吗？

我没有使用 Node.js，我很确定它是一个 js 应用程序（有点新手，所以我不能 100% 确定有什么区别）。但我设法通过合并您提供的代码与this answer 找到了一些有用的东西：var getTags = function(audio) fetch(audio.src) .then(response => response.blob()) .then(mutag.fetch) .then((tags) => console.log(tags); ); ;