9

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?

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="https://www.youtube.com/embed/JlhTiynRiXA?feature=oembed" frameborder="0" allowfullscreen></iframe>
will8137
  • 101
  • 1
  • 5
  • You are not allowed to separate out the audio from a YouTube video according to their terms of service. Check out a more detailed description in this related post: http://stackoverflow.com/questions/2312179/can-we-play-only-audio-using-youtube-api-for-iphone – Chris Franklin Dec 17 '14 at 21:40
  • 1
    I will be keeping the video as well. As I say is there a way to just listen to it> – will8137 Dec 17 '14 at 21:49
  • Not without separating them, no. The Web Audio API has no real way of taking in a youtube video and extracting sound from it to parse. The other alternative is to find some way to get the video to play in an HTML5 `video` tag, but I don't think that is supported under the current API. – Chris Franklin Dec 17 '14 at 21:56
  • 1
    I'm curious about this as well, but Chris Franklin is sorely misinformed. You most **certainly** can make a youtube video play in an HTML5 ` – JRad the Bad Apr 03 '15 at 16:08
  • +JRad the Bad did you ever come up with a solution? I'd also need a video tag outside of the iframe. – kano Apr 26 '17 at 18:22

1 Answers1

14

Hope this helps any future Googlers.

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)
    }
});

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

So on the front-end:

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);
})

From there on out it should be easy to apply any of the multiple audio visualization libraries out there to the context.

Basic front-end example from http://www.willvillanueva.com/the-web-audio-api-from-nodeexpress-to-your-browser/

Edit: archived link https://web.archive.org/web/20170715041035/http://www.willvillanueva.com/the-web-audio-api-from-nodeexpress-to-your-browser/

kano
  • 5,626
  • 3
  • 33
  • 48