私は、リモート サーバーから 3 分間のオーディオ クリップ (mp3) を読み込んで再生する Ionic/Cordova アプリに取り組んでいます。
このチュートリアル ( http://www.html5rocks.com/en/tutorials/webaudio/intro/ ) に従いましたが、読み込みと再生は正常に機能します。
ただし、ロードされたmp3をローカルに保存/キャッシュして、ユーザーが一度ダウンロードするだけでアプリがオフラインで動作できるようにします。ファイルは約 750 KB です。以下の例では、ファイルはわずか 74 KB です。
アプリの他の場所では、Mozilla の localForage を ([ngular-localForage 経由で) 使用しています。これは、特に ArrayBuffers を格納するために使用できると述べています - http://mozilla.github.io/localForage/#setitem
ただし、再生できる形式でオーディオを取得できないようです...間違ったものを保存していると思われます-ArrayBufferが何であるかがよくわかりません!
とにかく、これが私の基本的なコードです（現在、ローカルファイルを使用しています）。最初のロードでオーディオが正しく再生され、2 番目のロードでエラーが発生します (以下を参照)。
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
function loadDingSound() {
// attempt to retrieve stored file
$localForage.getItem('ding').then(function (response) {
if (response) {
console.log('playing audio from localForage');
console.log(response);
context.decodeAudioData(response, function(buffer) {
playSound(buffer);
});
} else {
var request = new XMLHttpRequest();
request.open('GET', 'audio/ding.mp3', true); // loading local file for now
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function() {
$localForage.setItem('ding', request.response).then(function () {
context.decodeAudioData(request.response, function(buffer) {
playSound(buffer);
});
});
};
request.send();
}
});
}
function playSound(buffer) {
var source = context.createBufferSource(); // creates a sound source
source.buffer = buffer; // tell the source which sound to play
source.connect(context.destination); // connect the source to the context's destination (the speakers)
source.start(0); // play the source now
}
// init
loadDingSound();
そして、コンソールに表示される応答は次のとおりです。
Object {} // line 13
Error: Failed to execute 'decodeAudioData' on 'AudioContext': invalid ArrayBuffer for audioData. // line 15
現時点では、これを Chrome でのみテストしており、Cordova アプリではテストしていません。
私は何を間違っていますか？または、これを行うためのより良い方法はありますか? おそらく、代わりに MP3 をファイル システムに保存できますか?