Чтение аудио спектра из тега Video в html5

Question

Я знаю, что есть способ чтения аудио спектра с помощью API Web Aduio, который позволяет вам создавать визуализатор спектра для воспроизведения треков. Есть ли способ сделать то же самое с Web Video API? Я хочу показать аудио спектр воспроизводимого видео html5 youtube.

Спасибо

Answer 1

Web Audio API прекрасно работает с <video> элемент в качестве ввода. Код выглядит примерно так.

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

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

// etc.

Однако это не будет работать с видео на YouTube по двум причинам:

1) YouTube <video> Элемент находится внутри iframe, и Javascript не предоставит вам доступ к DOM внутри iframe в другом домене, отличном от родительской страницы.

2) Видеофайл, на который ссылается элемент, будет обслуживаться из другого домена, а API-интерфейс Web Audio может получать доступ только к видео / аудиофайлам, которые поступают из того же домена или обслуживаются заголовками CORS. Даже если у вас был доступ к URL-адресу видеофайла YouTube, он не будет обслуживаться с заголовками CORS.

Вам нужно будет разместить видео на своем собственном сервере.