[英]Setting html5 media source using ajax
I needed to aid authentication headers for my audio files i was grabbing from a external server. 我需要为我从外部服务器抓取的音频文件提供身份验证标头。 So now im trying to use ajax, i can grab the files fine, but i cant set them as the media source for my player.
所以现在我试图使用ajax,我可以很好地抓取文件,但我不能将它们设置为我的播放器的媒体源。 How do you approach setting a ajax loaded file as a audio source?
如何设置ajax加载文件作为音频源?
EDIT
编辑
Ended up fixing it in case someone comes back this way. 结束修复它以防有人以这种方式回来。
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();
};
Had to do asynch:false, otherwise i would get a small chunk of the audio instead of all of it. 不得不做asynch:假,否则我会得到一小部分音频而不是全部。 Though removing the asynch made debugging easier in the end.
虽然删除asynch最终使调试更容易。
Are you actually downloading the file, or returning it in base64 encoded format (ie as a Data URI)? 您是实际下载文件,还是以base64编码格式(即作为数据URI)返回?
Changing the source of an audio element via JavaScript is quite straightforward. 通过JavaScript更改音频元素的来源非常简单。
<audio id="myAudio" controls />
And then once you have the source,: 一旦你有了源头,:
var audio = document.getElementById("myAudio");
audio.src = myAudioFile;
audio.type = "type/ogg"; // ony showing an OGG example 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();
};
Had to do asynch:false, otherwise i would get a small chunk of the audio instead of all of it. 不得不做asynch:假,否则我会得到一小部分音频而不是全部。 Though removing the asynch made debugging easier in the end.
虽然删除asynch最终使调试更容易。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.