如何从 ReactJs 中的输入类型文件中获取音乐信息
How to get music's info from input type file in ReactJs
我有 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)
}
}
}
音频文件可以包含存储为 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>
我有 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)
}
}
}
音频文件可以包含存储为 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>