Javascript 使用LocalFound存储和检索音频（mp3）
我正在开发一个Ionic/Cordova应用程序，其中包括从远程服务器加载三分钟的音频片段（mp3）并播放它们 我遵循了本教程，加载和播放效果很好 但是，我想在本地存储/缓存加载的mp3，这样用户只需下载一次，应用程序就可以脱机工作。文件大小约为750KB。在下面的示例中，该文件只有74 KB 在应用程序的其他地方，我使用的是Mozilla的LocalFower（通过[ngular LocalFower]），其中特别指出它可以用于存储ArrayBuffers- 然而，我似乎无法以我可以播放的格式检索音频…我怀疑我存储了错误的东西-我真的不明白什么是ArrayBuffer 无论如何，这是我的基本代码（目前我正在使用一个本地文件）。 第一次加载音频播放正确，第二次加载时出现错误（见下文）： 我在控制台中得到的响应如下：Javascript 使用LocalFound存储和检索音频（mp3）,javascript,cordova,audio,html5-audio,localforage,Javascript,Cordova,Audio,Html5 Audio,Localforage,我正在开发一个Ionic/Cordova应用程序，其中包括从远程服务器加载三分钟的音频片段（mp3）并播放它们 我遵循了本教程，加载和播放效果很好 但是，我想在本地存储/缓存加载的mp3，这样用户只需下载一次，应用程序就可以脱机工作。文件大小约为750KB。在下面的示例中，该文件只有74 KB 在应用程序的其他地方，我使用的是Mozilla的LocalFower（通过[ngular LocalFower]），其中特别指出它可以用于存储ArrayBuffers- 然而，我似乎无法以我可以播放的格式
Object {} // line 13
Error: Failed to execute 'decodeAudioData' on 'AudioContext': invalid ArrayBuffer for audioData. // line 15
我做错了什么？或者有更好的方法吗？也许我可以将MP3保存到文件系统中…？无需执行两次从MP3压缩二进制文件到PCM原始浮点型数组的转换，因此避免两次调用来解码音频数据。另外，让我们问一个更简单的问题，现在忽略LocalFound-只需重新驻车即可将原始音频缓冲区引用到其自己的var中，以便稍后重播：
<html>
<head>
<title>Test</title>
</head>
<body>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audio_context = new AudioContext();
var stored_buffer = null;
function loadDingSound() {
if (stored_buffer) { // attempt to retrieve stored file
console.log('playing audio from localForage');
playSound(stored_buffer);
} else {
var request = new XMLHttpRequest();
var audio_url = "audio/ding.mp3"; // relative path to reach mp3 file
request.open('GET', audio_url, true); // loading local file for now
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function() {
audio_context.decodeAudioData(request.response, function(buffer) {
stored_buffer = buffer; // store buffer for replay later
playSound(buffer);
});
};
request.send();
}
}
function playSound(buffer) {
var source = audio_context.createBufferSource(); // creates a sound source
source.buffer = buffer; // tell the source which sound to play
source.connect(audio_context.destination); // connect source to speakers
source.start(0); // play the source now
}
// init
loadDingSound();
</script>
<body onkeypress="loadDingSound()">
<button onclick="loadDingSound()">play_again</button>
</body>
</html>
试验
window.AudioContext=window.AudioContext | | window.webkitadiocontext；
var audio_context=新的AudioContext（）；
存储的var_buffer=null；
函数loadingsound（）{
如果（存储的缓冲区）{//尝试检索存储的文件
log（'playingaudiofromlogroup'）；
播放声音（存储的缓冲区）；
}否则{
var request=new XMLHttpRequest（）；
var audio_url=“audio/ding.mp3”；//到达mp3文件的相对路径
request.open（'GET'，audio_url，true）；//现在正在加载本地文件
request.responseType='arraybuffer'；
//异步解码
request.onload=函数（）{
音频上下文解码音频数据（请求、响应、函数（缓冲区）{
存储的\u buffer=buffer；//存储缓冲区以便以后重播
播放声音（缓冲）；
});
};
request.send（）；
}
}
功能播放声音（缓冲区）{
var source=audio_context.createBufferSource（）；//创建一个声音源
source.buffer=buffer；//告诉源要播放的声音
source.connect（audio_context.destination）；//将源连接到扬声器
source.start（0）；//立即播放源代码
}
//初始化
加载声音（）；
再玩一次
一旦您对此感到满意，然后将LocalFound-应该是一个快照，这可以正常工作，但一旦我从LocalFound中检索到
存储的\u缓冲区，它就不再工作，并且我收到以下错误：TypeError:未能在“AudioBufferSourceNode”上设置“buffer”属性：提供的值不是“AudioBuffer”类型颂歌>
<html>
<head>
<title>Test</title>
</head>
<body>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audio_context = new AudioContext();
var stored_buffer = null;
function loadDingSound() {
if (stored_buffer) { // attempt to retrieve stored file
console.log('playing audio from localForage');
playSound(stored_buffer);
} else {
var request = new XMLHttpRequest();
var audio_url = "audio/ding.mp3"; // relative path to reach mp3 file
request.open('GET', audio_url, true); // loading local file for now
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function() {
audio_context.decodeAudioData(request.response, function(buffer) {
stored_buffer = buffer; // store buffer for replay later
playSound(buffer);
});
};
request.send();
}
}
function playSound(buffer) {
var source = audio_context.createBufferSource(); // creates a sound source
source.buffer = buffer; // tell the source which sound to play
source.connect(audio_context.destination); // connect source to speakers
source.start(0); // play the source now
}
// init
loadDingSound();
</script>
<body onkeypress="loadDingSound()">
<button onclick="loadDingSound()">play_again</button>
</body>
</html>