Reading audio spectrum from Video tag in html5

问题

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.

Thanks

回答1:

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.

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

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) 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.

来源：https://stackoverflow.com/questions/21877155/reading-audio-spectrum-from-video-tag-in-html5