Question

是否可以收听iframe中的YouTube视频的音频，然后对其进行分析，以便在基于Web音频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>

Answer 1

希望这可以帮助任何未来的Google员工。

我发现这样做的唯一方法是使用音频流式lib（如节点的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或canvas（例如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/

无论如何使用网络音频API来显示来自iframe的youtube音频？

1 个答案: