Question

我想从NodeJS / ExpressJS后端流式传输MP3音频文件。我在论坛中找到了一些开始的代码（例如，这里stream mp3 file express server with ability to fast forward/rewind），但是它似乎对我不起作用。我有以下代码：

const express = require('express');
const path = require('path');
const fs = require('fs');

const app = express();

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.get('/api/play', (req, res) => {
    var music = path.join('Z:', 'Music', 'Metallica', "Kill 'Em All", '01 - Hit the Lights.mp3');
    var stat = fs.statSync(music);
    var range = req.headers.range;
    var readStream;

    if (range != undefined) {
        var parts = range.replace(/bytes=/, '').split('-');
        var partialStart = parts[0];
        var partialEnd = parts[1];

        if (isNaN(partialStart) || partialStart == '') {
            partialStart = '0';
        }

        if (isNaN(partialEnd) || partialEnd == '') {
            partialEnd = stat.size - 1;
        }

        var start = parseInt(partialStart, 10);
        var end = parseInt(partialEnd, 10);
        var contentLength = end - start + 1;

        console.log(`Streaming ${music} as ${contentLength} bytes from ${start} to ${end}`);

        res.writeHead(206, {
            'Content-Type': 'audio/mpeg',
            'Content-Length': contentLength,
            'Content-Range': 'bytes=' + start + '-' + end + '/' + stat.size,
            'Accept-Ranges': 'bytes'
        });

        readStream = fs.createReadStream(music, { start: start, end: end });
    } else {
        console.log(`Streaming ${music} as ${stat.size} bytes`);

        res.header({
            'Content-Type': 'audio/mpeg',
            'Content-Length': stat.size
        });

        readStream = fs.createReadStream(music);
    }

    readStream.pipe(res);

    console.log('Done');
});

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

index.html基本上只是一个音频标签：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <audio controls="controls" preload="all">
        <source src="http://localhost:5000/api/play" type="audio/mpeg" />
        Your browser does not support the audio element.
    </audio>
</body>

</html>

当我从浏览器中打开页面时，我获得了音频标签，但未播放。控制台中没有错误，并且在网络选项卡中，我看到/ api / play请求只有229个字节，并带有以下响应标头：

Accept-Ranges: bytes
Connection: keep-alive
Content-Length: 4108683
Content-Range: bytes=0-4108682/4108683
Content-Type: audio/mpeg
Date: Mon, 30 Sep 2019 18:01:02 GMT
X-Powered-By: Express

但是，当我从RestMan扩展名尝试相同的操作时，会得到完整的4MB文件，并带有以下标头：

date: Mon, 30 Sep 2019 17:41:01 GMT
connection: keep-alive
x-powered-by: Express
content-length: 15987040
content-type: audio/mpeg

我尝试从RestMan客户端使用不同的“ Accept”标头，“ 0-”（如浏览器），“ 0-2”，“ 0-200”，“ 100-200”等手动执行，我总是以正确的字节数获得正确的响应（例如“ 100-200”为101个字节）。那么，为什么浏览器无法加载音频？即使直接打开/ api / play URL，我也只会得到一个自动生成的“视频”标签，但不能播放，也会发生同样的事情。

我还尝试了文件名中没有空格或特殊字符的MP3，尝试从没有空格或特殊字符的目录中加载，从本地驱动器加载（Z：是网络连接存储），尝试从与html相同的目录加载，总是一样。

如果您有任何想法请帮助。我不确定这是问题还是NodeJS方面缺少的东西，或者完全是其他东西。

Answer 1

啊，我找到了。似乎是206“部分内容”响应的元凶。我将其更改为200，现在可以使用了。如果要求完整范围，可以返回200，并且仅在返回完整文件的一部分时才使用206吗？

NodeJS mp3流在浏览器中不起作用

1 个答案: