javascript - 未调用音频进度事件

Question

所以我在一个基于类的组件中得到了这个函数，它从 api 调用加载音频文件

loadAudio = () => {
        var x = new Audio("http://localhost:5000/getSong")
        x.addEventListener("progress", event => { console.log("progress"); })
        this.setState({ audioSrc: x })
    }

我从 componentDidMount 函数调用这个函数。

componentDidMount() {
    this.loadAudio()
}

音频加载，我可以使用它播放它，.play()但progress事件只显示两次，而当我使用浏览器点击 URL 并在 vanilla JS 中使用类似脚本时，文件被多次缓冲。然后progress被多次调用。

我需要知道加载的音频的值，这样我就可以像任何主要的流媒体网站一样将它与缓冲进度条连接起来。

后端脚本供参考：

app.get('/getSong', cors(), function (req, res) {
    var path = require('path')
    var filePath = path.join(__dirname,"assets","b.mp3")
    console.log(filePath)

    var stat = fs.statSync(filePath);
    var readStream = fs.createReadStream(filePath);

    res.writeHead(200, {
        'Content-Type': 'audio/mpeg',
        'Content-Length': stat.size
    });
    readStream.pipe(res)
});

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

标签： javascripthtmlnode.jsreactjshtml5-audio