无论如何，是否可以使用网络音频 api 从 iframe 可视化 youtube 音频？答案

【问题标题】：Is there anyway to visualize youtube audio from an iframe using the web audio api?无论如何，是否可以使用网络音频 api 从 iframe 可视化 youtube 音频？
【发布时间】：2015-02-16 13:42:32
【问题描述】：

是否可以收听 iframe 中的 youtube 视频的音频，然后对其进行分析以用于基于网络音频 api 的可视化工具？

从我的网站制作方式来看，我只能从 iframe 获取源网址。这是我的一个 iframe 的示例：

<iframe id="youtube-player" type="text/html"  width="500" height="281" src="https://www.youtube.com/embed/JlhTiynRiXA?feature=oembed" frameborder="0" allowfullscreen></iframe>

【问题讨论】：

根据其服务条款，您不得从 YouTube 视频中分离出音频。在此相关帖子中查看更详细的描述：stackoverflow.com/questions/2312179/…
我也会保留视频。正如我所说，有没有办法只听它>
不分开，不。 Web Audio API 没有真正的方法来接收 youtube 视频并从中提取声音进行解析。另一种选择是找到某种方法让视频在 HTML5 video 标记中播放，但我认为当前 API 不支持。
我对此也很好奇，但克里斯·富兰克林被严重误导了。您当然可以在 HTML5 <video> 元素中播放 youtube 视频。在我的具体情况下，我正在尝试捕获和可视化已经在 HTML5 iframe 中的音频。（AutoDJ for Nightbot Twitch Bot 在 HTML5 <video> 元素中播放请求的 Youtube 视频）我正在寻找一种使用 jQuery 有效复制 iframe 中的 video 元素并从中可视化音频的方法。如果我设法找到解决方案，我会在这里发布答案。
+JRad the Bad 你有没有想出一个解决方案？我还需要 iframe 之外的视频标签。

标签： javascript api audio iframe youtube

【解决方案1】：

希望这对未来的 Google 员工有所帮助。

我发现这样做的唯一方法是使用音频流库（如用于 Node 的 youtube-audio-stream）并缓冲/管道来自服务器端的音频。

var express = require('express');
var router = express.Router();

var youtubeStream = require('youtube-audio-stream');

router.get('/stream/:videoId', function (req, res) {
    try {
        youtubeStream(req.params.videoId).pipe(res);
    } catch (exception) {
        res.status(500).send(exception)
    }
});

然后你可以创建 audioContext 关闭它。 AudioContext 是使用 WebGL 或画布（例如 pixi.js）进行可视化所需的神奇关键字。

所以在前端：

function loadSound() {
  var request = new XMLHttpRequest();
  request.open("GET", "http://localhost:8000/stream/nl6OW07A5q4", true); 
  request.responseType = "arraybuffer"; 

  request.onload = function() {
      var Data = request.response;
      process(Data);
  };

  request.send();
}

function process(Data) {
  source = context.createBufferSource(); // Create Sound Source
  context.decodeAudioData(Data, function(buffer){
    source.buffer = buffer;
    source.connect(context.destination); 
    source.start(context.currentTime);
})

从那里开始，应该很容易将多个音频可视化库中的任何一个应用到上下文中。

来自http://www.willvillanueva.com/the-web-audio-api-from-nodeexpress-to-your-browser/的基本前端示例

编辑：存档链接 https://web.archive.org/web/20170715041035/http://www.willvillanueva.com/the-web-audio-api-from-nodeexpress-to-your-browser/

【讨论】：

链接 404s，这是一个存档：web.archive.org/web/20170715041035/http://…