使用 ajax 设置 html5 媒体源答案

【问题标题】：Setting html5 media source using ajax使用 ajax 设置 html5 媒体源
【发布时间】：2012-11-27 04:00:52
【问题描述】：

我需要帮助我从外部服务器获取的音频文件的身份验证标头。所以现在我尝试使用 ajax，我可以很好地抓取文件，但我不能将它们设置为我的播放器的媒体源。您如何将 ajax 加载的文件设置为音频源？

编辑

最终修复它以防有人以这种方式回来。

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

必须做 asynch:false，否则我会得到一小块音频而不是全部。尽管最终删除了异步使调试更容易。

【问题讨论】：

标签： javascript ajax html

【解决方案1】：

您实际上是在下载文件，还是以 base64 编码格式（即作为数据 URI）返回文件？

通过 JavaScript 更改音频元素的来源非常简单。

<audio id="myAudio" controls />

然后一旦你有了来源，：

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

【讨论】：

使用 Ajax 作为 base64 编码字符串加载它。我会尝试编辑帖子。

【解决方案2】：

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

必须做 asynch:false，否则我会得到一小块音频而不是全部。尽管最终删除了异步使调试更容易。

【讨论】：