无论如何，是否可以使用网络音频 api 从 iframe 中可视化 youtube 音频? [英] Is there anyway to visualize youtube audio from an iframe using the web audio api?

问题描述

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

Is it possible to listen to the audio of a youtube video that is in an iframe and then analyse it for use in a web audio api based visualizer?

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

From the way my site is made, I can only get the source url from an iframe. Here is an example of one of my iframes:

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

推荐答案

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

Hope this helps any future Googlers.

我发现这样做的唯一方法是使用音频流库(例如 youtube-audio-stream for Node)并从服务器端缓冲/管道传输音频.

The only way I've found to do this is to use an audio streaming lib (like youtube-audio-stream for Node) and buffer/pipe the audio from server-side.

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)进行可视化所需的神奇关键字.

Then you can create audioContext off of it. AudioContext is the magic keyword that you need for visualization with either WebGL or canvas (e.g. 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);
}) 

从那时起，将多个音频可视化库中的任何一个应用到上下文应该很容易.

From there on out it should be easy to apply any of the multiple audio visualization libraries out there to the context.

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

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

这篇关于无论如何，是否可以使用网络音频 api 从 iframe 中可视化 youtube 音频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！