在反应 js 中加载期间播放音频文件

问题描述

我有一个 node js API，它提供一些静态音乐文件（myMusic.mp3）

http://localhost:4000/musics/myMusic.mp3

我编写了这段代码来播放和暂停音乐。

function MusicCard() {
const [playing,setPlaying] = useState(false);

const url = "http://localhost:4000/musics/myMusic.mp3";

//this is Audio object which fully loads the music file and plays it
const audioRef = useRef(new Audio(url));

//this is the main function to play and pause
const handleMusicPlay = () => {
    if(playing) {
        audioRef.current.pause();
        setPlaying(false);
    }else {
        audioRef.current.play();
        setPlaying(true);
    }
}

return (
    <div className="music-card">
        <div className="music-card_image-con">
            <button style={{
                backgroundImage: `url(${process.env.PUBLIC_URL}song-image.jpg)`
            }} onClick={handleMusicPlay}>{ playing ? <FaPause /> : <FaPlay /> }</button>
        </div>
        <div className="music-card_info-con">
            <div className="music-card_info-name">
                <h3>song name</h3>
                <p> - </p>
                <p>singer</p>
            </div>
            <div className="music-card_info-seekbar">
                <input type="range" style={{
                    width: "100%"
                }} />
            </div>
        </div>
        <button className="music-card_actions-btn"><FaEllipsisV /></button>
    </div>
);
}

Audio 对象首先从服务器完全加载音乐文件并播放它。我不想等待音乐完全加载。我希望它在加载时播放音乐。 YouTube 音乐之类的东西。

我的音乐文件保存在节点 js 公共文件夹中，然后保存在音乐文件夹中。 我是否必须使用 socket.io-stream 之类的东西在节点 js 中创建流？ 我可以在 react 内完成整个加载过程吗？ 哪种方法更好，我该如何实施？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）