如何从 ReactJs 中的输入类型文件中获取音乐信息答案

【问题标题】：How to get music's info from input type file in ReactJs如何从 ReactJs 中的输入类型文件中获取音乐信息
【发布时间】：2021-10-24 11:45:40
【问题描述】：

我有 input 和 type="file" 只接受音乐文件。我想获取有关音乐的信息。例如：歌手的名字或音乐的照片。

<input type="file" className="popup-content--file" accept="audio/*" id="file" onChange={(e) => {selectMusic(e, e.currentTarget.files[0])}} />

const selectMusic = (e, file) => {
    if(file.size < 10485760 && file.type.includes('audio/')){
        const reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = () => {
            console.log(reader)
        }
    }
}

【问题讨论】：

标签： javascript reactjs input filereader

【解决方案1】：

音频文件可以包含存储为ID3 tags的元数据信息。

有像 this one 这样的基于浏览器的 id3 解析器可以帮助您 - 来自他们的文档：

<input type="file">

<script type="module">
import * as id3 from '//unpkg.com/id3js@^2/lib/id3.js';

document
  .querySelector('input[type="file"]')
  .addEventListener('change', async (e) => {
    const tags = await id3.fromFile(e.currentTarget.files[0]);
    // tags now contains v1, v2 and merged tags
  });
</script>

【讨论】：