无论如何,是否可以使用网络音频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 (用于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/
这篇关于无论如何,是否可以使用网络音频API可视化来自iframe的youtube音频?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!