Configuring html5 multimedia source using ajax

Question

I needed to use authentication headers for my audio files, which I captured from an external server. So now I'm trying to use ajax, I can parse the files perfectly, but I can not set them as the media source for my player. How do you approach installing the downloaded ajax file as a sound source?

EDIT

The fix ended if someone comes back here.

if (this.mAudioPlayer.canPlayType("audio/mpeg")) { this.mExtension = '.mp3'; }else if (this.mAudioPlayer.canPlayType("audio/ogg")) { this.mExtension = '.ogg'; } else if (this.mAudioPlayer.canPlayType("audio/mp4")) { this.mExtension = '.m4a'; } this.CreateAudioData = function() { //downloading audio for use in data:uri $.ajax({ url: aAudioSource + this.mExtension + '.txt', type: 'GET', context: this, async: false, beforeSend: function(xhr) {xhr.setRequestHeader('Authorization', window.userId);}, success: this.EncodeAudioData, error: function(xhr, aStatus, aError) { HandleError('Audio Error: ' + aStatus); } }); }; this.EncodeAudioData = function(aData) { //this.mAudioData = base64_encode(aData); this.mAudioData = aData; if (this.mExtension == '.m4a') { Debug("playing m4a"); this.mAudioSrc = "data:audio/mp4;base64," + this.mAudioData; } else if (this.mExtension == '.ogg') { Debug("playing ogg"); this.mAudioSrc = "data:audio/ogg;base64," + this.mAudioData; } else if (this.mExtension == '.mp3') { Debug("playing mp3"); this.mAudioSrc = "data:audio/mp3;base64," + this.mAudioData; } }; this.play = function() { if (this.mAudioPlayer.src != this.mAudioSrc) { this.mAudioPlayer.src = this.mAudioSrc; } this.mAudioPlayer.load(); this.mAudioPlayer.play(); }; 

I have to do asynch: false, otherwise I get a small piece of audio, and not all. Although removing asynchronously facilitated debugging at the end.

Answer 1

 if (this.mAudioPlayer.canPlayType("audio/mpeg")) { this.mExtension = '.mp3'; }else if (this.mAudioPlayer.canPlayType("audio/ogg")) { this.mExtension = '.ogg'; } else if (this.mAudioPlayer.canPlayType("audio/mp4")) { this.mExtension = '.m4a'; } this.CreateAudioData = function() { //downloading audio for use in data:uri $.ajax({ url: aAudioSource + this.mExtension + '.txt', type: 'GET', context: this, async: false, beforeSend: function(xhr) {xhr.setRequestHeader('Authorization', window.userId);}, success: this.EncodeAudioData, error: function(xhr, aStatus, aError) { HandleError('Audio Error: ' + aStatus); } }); }; this.EncodeAudioData = function(aData) { //this.mAudioData = base64_encode(aData); this.mAudioData = aData; if (this.mExtension == '.m4a') { Debug("playing m4a"); this.mAudioSrc = "data:audio/mp4;base64," + this.mAudioData; } else if (this.mExtension == '.ogg') { Debug("playing ogg"); this.mAudioSrc = "data:audio/ogg;base64," + this.mAudioData; } else if (this.mExtension == '.mp3') { Debug("playing mp3"); this.mAudioSrc = "data:audio/mp3;base64," + this.mAudioData; } }; this.play = function() { if (this.mAudioPlayer.src != this.mAudioSrc) { this.mAudioPlayer.src = this.mAudioSrc; } this.mAudioPlayer.load(); this.mAudioPlayer.play(); }; 

I have to do asynch: false, otherwise I get a small piece of audio, and not all. Although removing asynchronously facilitated debugging at the end.

Answer 2

In fact, are you downloading the file or returning it in base64 encoded format (i.e. as a data URI)?

Changing the source of an audio element through JavaScript is pretty simple.

 <audio id="myAudio" controls /> 

And then, as soon as you have the source,

 var audio = document.getElementById("myAudio"); audio.src = myAudioFile; audio.type = "type/ogg"; // ony showing an OGG example here