从html5中的Video标签读取音频频谱 [英] Reading audio spectrum from Video tag in html5

问题描述

我知道有一种方法可以使用Web Aduio API读取音频频谱，允许您
创建用于播放曲目的频谱可视化工具。
有没有办法对Web Video API做同样的事情？我想显示播放html5 youtube视频的音频
频谱。

I know there is a way to read the audio spectrum with Web Aduio API, allowing you to create a spectrum visualizer for playing tracks. Is there a way to do the same with Web Video API? I want to show the audio spectrum of a playing html5 youtube video.

谢谢

推荐答案

使用< video> 元素作为输入时，Web Audio API可以正常工作。代码看起来大致如下。

Web Audio API works just fine with a <video> element as input. The code looks roughly like this.

var context = new AudioContext();
var source = context.createMediaElementSource(document.getElementById('video'));
var analyser = context.createAnalyser();

sourceNode.connect(analyserNode);
analyserNode.connect(context.destination);

// etc.

然而，这不适用于YouTube视频有两个原因：

However, this will not work with a YouTube video for two reasons:

1）YouTube的< video> 元素位于iframe内，而Javascript则不会允许您访问与父页面不同的域内的iframe内的DOM。

1) YouTube's <video> element is inside an iframe, and Javascript will not give you access to the DOM inside an iframe on a different domain from the parent page.

2）元素引用的视频文件将从不同的域提供，并且Web Audio API只能访问来自同一域或带有CORS标头的视频/音频文件。即使您有权访问YouTube视频文件的网址，也不会使用CORS标头。

2) The video file referenced by an element will be served from a different domain, and the Web Audio API can only access video/audio files that either come from the same domain or are served with CORS headers. Even if you had access to the URL of YouTube's video file, it will not be served with CORS headers.

您将不得不自己托管视频服务器。

You're going to have to host the video on your own server.

这篇关于从html5中的Video标签读取音频频谱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！