前端无法使用 NodeJS 音频流移动进度条

Question

我正在使用 NodeJS 将 MP3 文件流式传输到网站，我的想法是按照 Spotify 的思路制作一些东西。但是，即使用户可以通过正在接收音频流的 html 标签看到进度，也无法将其更改为前进或后退音乐，例如跳过一两分钟的歌曲。

NodeJS 代码：


    const express = require('express')
        , app = express()
        , fs = require('fs')
        , getStat = require('util').promisify(fs.stat);
    
    app.use(express.static('public'));
    
    const highWaterMark = 32;
    
    app.get('/audio', async (req, res) => {
    
        const filePath = './tracks/mixaund-sunshine-day.mp3';;
        const stat = await getStat(filePath);
        console.log(stat);    
        
        res.writeHead(200, {
            'Content-Type': 'audio/mp3',
            'Connection': 'Keep-Alive',
            'Transfer-encoding': 'chunked',
            'Content-Length': stat.size
        });
    
        const stream = fs.createReadStream(filePath, { highWaterMark });
    
        stream.on('end', () => console.log('End of streaming'));
    
        stream.pipe(res);
    });
    
    app.listen(3000, () => console.log('app is running'));

前端客户端代码


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>client-side</title>
    </head>
    <body>
        <audio controls>
            <source src="/audio" type="audio/ogg">
        </audio>
    </body>
    </html>

Answer 1

添加'Accept-Ranges': 'bytes'Header以妥善处理部分内容

像这样

res.writeHead(200, {
            'Content-Type': 'audio/mp3',
            'Accept-Ranges': 'bytes',
            'Connection': 'Keep-Alive',
            'Transfer-encoding': 'chunked',
            'Content-Length': stat.size
        });

前端无法使用 NodeJS 音频流移动进度条

Front-end can't move progress bar with NodeJS audio streaming

javascript

html

node.js

audio

streaming