コードバスアプリでMP3ブロブを再生する

Question

ウェブアプリケーションでは、ユーザーは自分の声を録音し、再生して結果を聞くことができます。

これはnodejs（流星）アプリであり、MP3 Blobを取得できるMp3LameEncoderオブジェクトで記録が行われます。私がそれを手に入れたら、windowURLを使ってblobのURLを取得します。次に、urlをsrc属性としてaudio html5要素に追加します。デスクトップ/モバイルブラウザでは、（ほとんどのブラウザで）うまくいきます。

input.disconnect(); 
    processor.disconnect(); 

    if (encodingProcess === 'direct') { 
    if (finish) { 
     blob = encoder.finish(); 
     console.log("Stopping and saving", blob); 
     t.$('#playback').attr("src", window.URL.createObjectURL(blob)); 
     //saveRecording(blob); 
    } else { 
     encoder.cancel(); 
    } 
    } else { 
    worker.postMessage({ command: finish ? 'finish' : 'cancel' }); 
    } 

私のコードバスアプリでは、何もしませんでした：何を試しても、私はいつもオーディオを再生できませんでした。 srcのattrは正しく設定されていますが、ネイティブコントロールの再生ボタンを使用すると何も起こりません。しかし、ブロブはそこにうまくいて、ストレージサーバにアップロードして、後で正しく聞くことができます。

また、ソースコードがリモートサーバー（AWSバケットまたはアプリケーションサーバー上の静的ファイル）からのものである場合、私のコードバスアプリケーションでは、<audio>でオーディオを聴くことができます。

私はメディアコーデックプラグインを使用してサウンドを録音して再生し、それから透過的にアップロードされたブロブをアップロードしようとしましたが、Media()とJS libの両方で同時に使用することはできません。

私は自分の記憶のどこかにブロブを持っています（私はコードバスアプリでもアップロードできます）。アップロードする前にどうすればいいですか？

ありがとう。

Answer 1

一部のプラットフォームでは、HTML5メディア要素は、FileReaderまたはXHRによって作成されなかったメタデータを持たないブロブを再生できません。それが理由なら、一つの解決策は、新しいもののためにURLを使用して、偽のダウンロード（XHR）ブロブとしてブロブに次のようになります。

var xhr = new XMLHttpRequest; 
xhr.open("get", yourBlobURL); 
xhr.responseType = "blob"; 
xhr.onload = function() { 
    var yourNewBlob = xhr.response; 
    audioElement.src = URL.createObjectURL(yourNewBlob) 
}; 
xhr.send(); 

録音が不足している場合、あなたはまた、データのURLの使用を検討することができますブロブの代わりに

あなたが聞きたいのであれば、Web Audio APIにも切り替えることができます。