gpt4 book ai didi

javascript - 有没有使用网络音频 api 从 iframe 可视化 youtube 音频?

转载 作者:数据小太阳 更新时间:2023-10-29 06:01:43 25 4
gpt4 key购买 nike

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

从我的网站制作方式来看,我只能从 iframe 中获取源 url。这是我的一个 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>

最佳答案

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

我发现这样做的唯一方法是使用音频流库(如节点的 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/

关于javascript - 有没有使用网络音频 api 从 iframe 可视化 youtube 音频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27535244/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com