0

So I am making an audio visualization website and I thought it would be cool if I could actually have the user paste a youtube video url into the site, and the site would use the source url of that youtube video as the source for the html5 audio tag (html5 audio supports mp4). But for some reason, it just doesn't wanna work.

example source url: https://r2---sn-bvvbax4pcxg-hjps.googlevideo.com/videoplayback?ratebypass=yes&dur=306.456&lmt=1429960077715849&expire=1485011355&clen=12330222&key=cms1&mime=video%2Fmp4&gir=yes&requiressl=yes&sparams=clen,dur,ei,expire,gir,id,initcwndbps,ip,ipbits,ipbypass,itag,lmt,mime,mm,mn,ms,mv,nh,pl,ratebypass,requiressl,source,upn&itag=18&upn=F5801EjVMXo&id=o-AMtqgvheiMbojDYpNlp2mIfm0RPLHkn5y1KyFyYEH8QS&ei=OyWDWLDbDuGw8gS5u4go&pl=44&ipbits=0&source=youtube&signature=589789D247A6000CD16FA5AAD36C0CBD99219874.3ECC34B28702ED0249FA9A8AA384BBFE845C96DE&redirect_counter=1&req_id=3145e0a0e752a3ee&cms_redirect=yes&ipbypass=yes&mm=31&mn=sn-bvvbax4pcxg-hjps&ms=au&mt=1484992255&mv=m

As it stands now, when I try to do it, I get the error "MediaElementAudioSource outputs zeros due to CORS access restrictions". So, since I've read up on this issue before, I came to the solution that I could just add the attribute: crossOrigin = "anonymous"; to my audio tag, and it would start working.

Nope, it doesn't. Now I get the error "Uncaught (in promise) DOMException: Failed to load because no supported source was found." I am completely stumped.

Also please note that the site works perfectly fine right now when the user simply drags audio tracks or mp4 videos onto the site. I use URL.createObjectURL() to create a url of the file dragged on.

Any help would be greatly appreciated, thanks.

edit1: So I did some more research and I came upon an article, HTMLMediaElement.play() Returns a Promise, and so I put together some code

var audio = document.getElementById("myAudio");
audio.crossOrigin = "anonymous";
audio.src = songSources[currentIndex];
audio.load();

var playPromise = audio.play();

if (playPromise !== undefined) {
    playPromise.then(function() {
        alert("good");
    }).catch(function(error) {
        alert(error);
    });
}

and as I sorta expected I got an error message, from the catch block. It read: "NotSupportedError: Failed to load because no supported source was found." This I find extremely confusing because the audio element will play fine if I simply remove the crossOrigin="anonymous" attribute from it. Any ideas?

edit2: Seems as though I've also stumped you guys, lol.

Jacob
  • 439
  • 6
  • 19
  • http://stackoverflow.com/questions/31083704/mediaelementaudiosource-outputs-zeroes-due-to-cors-access-restrictions/37806272#37806272 seems relevant – sideshowbarker Jan 21 '17 at 12:11
  • Yea, I took a look at that exact same thread, what's weird is if I don't have the attribute: crossOrigin="anonymous" to my audio tag, the audio will play but I get that error: "MediaElementAudioSource outputs zeros due to CORS access restrictions". But then if I add the attribute: crossOrigin="anonymous" to my audio tag, the audio won't play, and I get the error "Uncaught (in promise) DOMException: Failed to load because no supported source was found." but I don't get any errors with the MediaElementAudio... idk – Jacob Jan 21 '17 at 22:44

0 Answers0