使用 Javascript/Phonegap 从 Azure Blob 服务 REST api 播放 base64 音频字符串答案

【问题标题】：Play base64 audio string from Azure Blob service REST api with Javascript/Phonegap使用 Javascript/Phonegap 从 Azure Blob 服务 REST api 播放 base64 音频字符串
【发布时间】：2014-02-05 22:37:33
【问题描述】：

我无法通过 javascript 播放在 Azure Blob 存储中存储为 bae64 编码字符串的音频文件 (.aac)。

我有以下场景：

一种移动应用程序 (PhoneGap)，可将音频录制到 .aac 文件并将其存储在本地存储中。相同的文件很小（
文件 get 已转换为 base64 编码字符串，并使用 Blob 服务 REST api 通过下面的 jquery ajax 调用（请参阅 UPLOAD_CODE）上传到我的 blob 存储帐户。有关 BLOB 服务 rest api 的详细信息，请参阅this page。
当我通过浏览器手动下载文件时，我可以看到以“data:application/octet-stream;base64,AAAA.....”开头的 base64 编码字符串

UPLOAD_CODE sn-p：

$.ajax({
  url: url,
  type: "PUT",
  data: requestData,
  processData: false,
  beforeSend: function (xhr) 
              {
               xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
               },
               tryCount: 0,
               retryLimit: NUMBER_OF_RETRIES,
               success: successcallback,
               error: errorcallback
   });

此时一切都很好。我被困在从存储 api 播放文件中。我可以通过 url 访问文件，但现在我希望用户能够收听上传的音频。

我一直在考虑以下解决方案，但我还没有开始工作：

A.使用 phonegap 媒体类并将 url 传递给 base64 编码的字符串并开始播放（流式传输）音频。

B.下载base64字符串，用javascript转换成音频文件并开始播放。

C.将 Blob 存储中的文件作为实际的 aac 文件而不是 base64 编码字符串上传，以便在通过例如浏览器打开 url 时开始播放。

D. ... ?

我可以通过什么方式将这些场景中的任何一个变成可行的解决方案？

【问题讨论】：

标签： javascript audio cordova azure-storage

【解决方案1】：

我已通过将文件上传为 byte[] 而不是 base64 编码字符串来解决此问题。该文件以 .aac 音频文件的形式存储在 blob 存储中，可以直接从存储中播放。

为了上传，我使用了以下代码：

var reader = new FileReader();
reader.onloadend = function (evt) {

if (evt.target.readyState === FileReader.DONE) { // DONE == 2

    var RETRY_TIMEOUT_SECONDS = 5;
    var NUMBER_OF_RETRIES = 3;

    var requestData = new Uint8Array(evt.target.result);

    $.ajax({
             url: url,
             type: "PUT",
             data: requestData,
             processData: false,
             beforeSend: function (xhr) {
                                xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
                            },
             tryCount: 0,
             retryLimit: NUMBER_OF_RETRIES,
             success: function (data, status) {
                                console.log(status);
                            },
              error: function (xhr, desc, err) {
                      if (xhr.status === 403) {
                                    console.log("Access denied, the assigned upload  time has been exeeded");
                                } else {
                                    this.tryCount += 1;
                                    if (this.tryCount <= this.retryLimit) {
                                        console.log("Retrying transmission");
                                        setTimeout($.ajax(this), RETRY_TIMEOUT_SECONDS * 1000);
                                        return;
                                    }
                                }
                                console.log(desc);
                                console.log(err);
                            }
                        });
                    }
                };

  // Read the file as a byte[] 
  reader.readAsArrayBuffer(dbFile);

【讨论】：