将音频从 youtube 流式传输到 html 音频标签答案

【问题标题】：Stream audio from youtube to an html audio tag将音频从 youtube 流式传输到 html 音频标签
【发布时间】：2019-10-29 06:21:55
【问题描述】：

我使用了一个名为 youtube-audio-stream 的库，它使用 fluent-ffmpeg 和 ytdl-core 从给定的 youtube 链接接收可读流，然后将其通过管道传输到响应对象并使用我的 express 服务器的端点作为来源在我的 html 页面中的音频标签中。

每当我加载 html 页面并尝试点击播放时，都会出现以下错误：

events.js:467    
function arrayClone(arr, n) {
                       ^

    RangeError: Maximum call stack size exceeded
        at arrayClone (events.js:467:20)
        at PassThrough.emit (events.js:196:23)
        at PassThrough.output.on.error (C:\development\ElectronTut\ytmp3\node_modules\youtube-audio-stream\index.js:38:16)
        at PassThrough.emit (events.js:198:15)
        at PassThrough.output.on.error (C:\development\ElectronTut\ytmp3\node_modules\youtube-audio-stream\index.js:38:16)
        at PassThrough.emit (events.js:198:15)
        at PassThrough.output.on.error (C:\development\ElectronTut\ytmp3\node_modules\youtube-audio-stream\index.js:38:16)
        at PassThrough.emit (events.js:198:15)
        at PassThrough.output.on.error (C:\development\ElectronTut\ytmp3\node_modules\youtube-audio-stream\index.js:38:16)
        at PassThrough.emit (events.js:198:15)

经过几个小时的研究，我终于放弃了，来到了这里。据我了解，当在进程的下一个滴答开始之前没有正确清空调用堆栈时会触发此错误，大多数stackoverflow论坛一直在讨论异步编程如何导致潜在的无限循环，但我没有搞砸几乎没有足够近的地方来理解这样的循环在流中的什么位置。

这是我的服务器代码：

const express = require("express");
const app = new express();
const stream = require('youtube-audio-stream');

const uri = "https://www.youtube.com/watch?v=t1TcDHrkQYg";

app.get("/audio", (req, res) => {
  stream(uri).pipe(res);
})

app.listen(3000, () => console.log("Ready!"))

我的前端代码：

<!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>Doc</title>
</head>
<body>
    <audio autoplay controls>
        <source src="http://localhost:3000/audio" type="audio/mpeg">
    </audio>
</body>
</html>

如果这听起来很愚蠢，或者我做了一些愚蠢的事情，我很抱歉，但我真的处于边缘并且已经失去了所有希望。我将如何解决或处理此范围错误？如果您这么好心，请对任何做过与我正在做的事情类似的人，有更好的选择吗？

非常感谢您的时间和精力。

【问题讨论】：

标签： javascript node.js express audio youtube

【解决方案1】：

已修复，糟糕的库使用的是过时版本的 ytdl-core！我下载了 youtube-audio-stream 的源代码，然后将 ytdl-core 更新到最新版本，现在一切正常！

【讨论】：

【解决方案2】：

这是一个无需服务器端的解决方案。

我（也）花了几个小时试图让这个工作......

在看到您的帖子后，我查看了youtube-audio-stream，但我从未成功过。相反，我最终得到了这个似乎运作良好的解决方案。在阅读了this post 之后，我修改了一些值以使用 YouTube 当前的 (2020) API。

这是一个应该可行的解决方案，任何人都在寻找！ Try on CodePen

// YouTube video ID
var videoID = "CMNry4PE93Y";

// Fetch video info (using a proxy if avoid CORS errors)
fetch('https://cors-anywhere.herokuapp.com/' + "https://www.youtube.com/get_video_info?video_id=" + videoID).then(response => {
  if (response.ok) {
    response.text().then(ytData => {

      // parse response to find audio info
      var ytData = parse_str(ytData);
      var getAdaptiveFormats = JSON.parse(ytData.player_response).streamingData.adaptiveFormats;
      var findAudioInfo = getAdaptiveFormats.findIndex(obj => obj.audioQuality);

      // get the URL for the audio file
      var audioURL = getAdaptiveFormats[findAudioInfo].url;

      // update the <audio> element src
      var youtubeAudio = document.getElementById('youtube');
      youtubeAudio.src = audioURL;

    });
  }
});

function parse_str(str) {
  return str.split('&').reduce(function(params, param) {
    var paramSplit = param.split('=').map(function(value) {
      return decodeURIComponent(value.replace('+', ' '));
    });
    params[paramSplit[0]] = paramSplit[1];
    return params;
  }, {});
}

&lt;audio id="youtube" controls&gt;&lt;/audio&gt;

【讨论】：

当我尝试在 CodePen 上尝试时，出现此错误“加载资源失败：服务器响应状态为 410 (Gone)”