无论如何,是否可以使用网络音频API可视化来自iframe的youtube音频?

编程入门 行业动态 更新时间:2024-10-12 10:28:38
本文介绍了无论如何,是否可以使用网络音频API可视化来自iframe的youtube音频?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

是否可以收听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="www.youtube/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", "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/the-web-audio-api-from-nodeexpress-to-your-browser/

已存档的链接 web.archive/web/20170715041035/www.willvillanueva/the-web-audio-api-from-nodeexpress-to-your-browser/

更多推荐

无论如何,是否可以使用网络音频API可视化来自iframe的youtube音频?

本文发布于:2023-10-08 14:57:54,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1472960.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:音频   可以使用   无论如何   网络   youtube

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!