在Javascript中使用Web Audio API的本地文件

Question

我正在尝试使用Web Audio API在我的iPhone游戏上运行声音.问题是这个应用程序完全是客户端.我想将我的mp3存储在本地文件夹中(并且没有用户输入驱动),所以我不能使用XMLHttpRequest来读取数据.我正在研究使用FileSystem,但Safari不支持它.

还有其他选择吗？

编辑:感谢以下回复.不幸的是,Audio API的游戏速度非常慢.我有这个工作,延迟只是让用户体验不可接受.为了澄清,我需要的是像 -

var request = new XMLHttpRequest();
request.open('GET', 'file:///./../sounds/beep-1.mp3', true);
request.responseType = 'arraybuffer';
request.onload = function() {
    context.decodeAudioData(request.response, function(buffer) {
    dogBarkingBuffer = buffer;
}, onError);
}
request.send();

但这给了我错误 -

XMLHttpRequest无法加载file:///sounds/beep-1.mp3.仅支持HTTP的跨源请求.未捕获的错误:NETWORK_ERR:XMLHttpRequest异常101

我理解读取本地文件的安全风险,但在您自己的域中肯定应该没问题？

Answer 1

我有同样的问题,我发现这个非常简单的解决方案.

audio_file.onchange = function(){
  var files = this.files;
  var file = URL.createObjectURL(files[0]); 
              audio_player.src = file; 
  audio_player.play();
};

<input id="audio_file" type="file" accept="audio/*" />
<audio id="audio_player" />

你可以在这里测试:http: //jsfiddle.net/Tv8Cm/

Answer 2

好吧,我花了两天的时间对不同的解决方案进行原型设计,我终于想出了如何在不将资源存储在服务器上的情况下做到这一点.有一些博客详细说明了这一点,但我无法在一个地方找到完整的解决方案,所以我在这里添加它.这可能被经验丰富的程序员认为有些苛刻,但这是我能看到这个工作的唯一方式,所以如果有人有更优雅的解决方案,我很乐意听到它.

解决方案是将我的声音文件存储为Base64编码的字符串.声音文件相对较小(小于30kb)所以我希望性能不会太大问题.请注意,我将'xxx'放在某些超链接前面,因为我的n00b状态意味着我不能发布超过两个链接.

第1步:创建Base 64声音字体

首先,我需要将我的mp3转换为Base64编码的字符串并将其存储为JSON.我在这里找到了一个为我做这个转换的网站 - xxxhttp://www.mobilefish.com/services/base64/base64.php您可能需要使用文本编辑器删除返回字符,但对于需要示例的任何人我发现了一些钢琴音调在这里 - xxxhttps://raw.github.com/mudcube/MIDI.js/master/soundfont/acoustic_grand_piano-mp3.js请注意,为了使用我的示例,您需要删除标题部分数据:audio/MPEG; BASE64,

第2步:将声音字体解码为ArrayBuffer

你可以自己实现这个,但我找到了一个完美的API(为什么重新发明轮子,对吧？) - https://github.com/danguer/blog-examples/blob/master/js/base64-binary. js 资源来自 - 这里

第3步:添加其余代码

非常坦率的

var cNote  = acoustic_grand_piano.C2;
var byteArray = Base64Binary.decodeArrayBuffer(cNote); 
var context = new webkitAudioContext();

context.decodeAudioData(byteArray, function(buffer) {
    var source = context.createBufferSource(); // creates a sound source
    source.buffer = buffer;    
    source.connect(context.destination); // connect the source to the context's destination (the speakers)
    source.noteOn(0); 
}, function(err) { console.log("err(decodeAudioData): "+err); });

就是这样!我通过我的桌面版Chrome浏览器工作,并且还在移动版Safari上运行(当然仅限iOS 6,因为旧版本不支持Web音频).在移动Safari上加载需要花费几秒钟(桌面Chrome上的Vs不到1秒),但这可能是因为它花费时间下载声音字体.也可能是iOS在用户交互事件发生之前阻止任何声音播放.我需要做更多的工作来研究它的表现.

希望这可以拯救别人我经历的悲痛.

Answer 3

使用HTML5 Audio 标签在浏览器中播放音频文件。

Ajax 请求使用 http 协议，因此当您尝试使用 file:// 获取音频文件时，浏览器会将此请求标记为跨域请求。在请求标头中设置以下代码 -

header('Access-Control-Allow-Origin: *');