Блог

Главная - Вопросы по программированию - Как получить информацию о музыке из файла типа ввода в ReactJS

Как получить информацию о музыке из файла типа ввода в ReactJS

#javascript #reactjs #input #filereader

Вопрос:

У меня есть 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 amp;amp; file.type.includes('audio/')){
        const reader = new FileReader()

        reader.readAsDataURL(file)

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

Ответ №1:

Аудиофайл может содержать метаданные, хранящиеся в виде тегов ID3.

Существуют браузерные анализаторы 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>
Метки: