Как загружать и проигрывать песни в реаги js с помощью хуков?

Question

У меня есть компонент, который должен позволять пользователю воспроизводить текущие песни и добавлять новые со своего компьютера. Это код

import React, {useState} from 'react';

const SongListUI = () => {

    const [songs, setSongs] = useState([])
    const [oneSong, setSong] = useState('')
    const [Artist, setArtist] = useState('')
    const [src, setSrc] = useState('')

    const addSong = (oneSong, Artist) =>{
        setSongs([...songs, {title: oneSong, artist: Artist, source: src, id: Math.random(0,1)}])
    }



    const handleSubmit = (e) =>{
        e.preventDefault()
        addSong(oneSong, Artist, src)
    }

    return ( 
        <div className="hi">
            {
                songs.map(song =>{
                    return(
                        <div key={song.id}>
                            <h4>{song.title}</h4>
                            <audio controls>
                                <source src={song.source} type="audio/mpeg" />
                            </audio>
                            <h3>{song.artist}</h3>
                        </div>
                    )
                })
            }

            <form onSubmit={handleSubmit}>
                <label>addSong</label>
                <input type="text" value={oneSong} onChange={(e) => setSong(e.target.value)}/>
                <input type="text" value={Artist} onChange={(e) => setArtist(e.target.value)}/>
                <input type="file" value={src} onChange={(e) => setSrc(e.target.value)}/>
                <input type="submit" value="Add a Song"/>
            </form>


        </div>
     );
}

export default SongListUI;

Проблема заключается в том, что всякий раз, когда я пытаюсь загрузить файл mp3 с моего компьютера через файл ввода, я получаю сообщение об ошибке: Не разрешено загружать локальный ресурс: файл: /// C: / fakepath / Black% 20Sabbath% 20-% 20Paranoid% 20 (Full% 20Album) .mp3 Как мне это решить?

Answer 1

Используете ли вы Chrome в качестве браузера? Если да, то, вероятно, chrome блокирует ваш локальный доступ к файлам по каким-то вопросам безопасности. Что это за часть: "file: /// C: / fakepath / Black% 20Sabbath% 20-% 20Paranoid% 20 (Full% 20Album) .mp3"

Попробуйте загрузить файл в какое-то облако серверы Например: http://yourserver/your/path.mp3

Или попробуйте разместить его где-нибудь в вашей папке реагирования root, а затем получить к нему доступ следующим образом:

const source = ./yourfilename.mp3

<source src={source} type="audio/mpeg" />