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

Question

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

1. 导入新库，或者

2. 使用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")
];

- KRLW890

Answer 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);
});

- Sanjit Sarda

---

我尝试使用源字符串和音频对象，但对于两者都显示：“在'FileReader'上执行'readAsArrayBuffer'失败：参数1的类型不是'Blob'。” - KRLW890

哦，你需要获取文件 blob，我回家后会帮你。 - Sanjit Sarda

@KRLW890 快问一下，你的应用是一个 Web 应用还是 JS 应用？此外，你在这里使用 nodejs 吗？ - Sanjit Sarda

我没有使用Node.js，但我很确定它是一个js应用程序（我是个新手，所以不太确定有什么区别）。但是我通过将您提供的代码与此答案合并，找到了可行的解决方案：var getTags = function(audio) { fetch(audio.src) .then(response => response.blob()) .then(mutag.fetch) .then((tags) => { console.log(tags); }); }; - KRLW890