我对HTML5音频api很陌生:我已经阅读了HTML5 Rocks上的一些相关文章,但是有时在Javascript和Dart之间切换可能会有些棘手。
无论如何,我一直在Dart中尝试HTML5 Audio。为了产生简单游戏的音效,我创建了一个如下类。我创建了一个AudioContext,将声音数据加载到SoundBuffers中,当需要播放声音时,创建了一个AudioBufferSourceNode,通过它可以播放存储在缓冲区中的数据:
class Sfx {
AudioContext audioContext;
List<Map> soundList;
int soundFiles;
Sfx() {
audioContext = new AudioContext();
soundList = new List<Map>();
var soundsToLoad = [
{"name": "MISSILE", "url": "SFX/missile.wav"},
{"name": "EXPLOSION", "url": "SFX/explosion.wav"}
];
soundFiles = soundsToLoad.length;
for (Map sound in soundsToLoad) {
initSound(sound);
}
}
bool allSoundsLoaded() => (soundFiles == 0);
void initSound(Map soundMap) {
HttpRequest req = new HttpRequest();
req.open('GET', soundMap["url"], true);
req.responseType = 'arraybuffer';
req.on.load.add((Event e) {
audioContext.decodeAudioData(
req.response,
(var buffer) {
// successful decode
print("...${soundMap["name"]} loaded...");
soundList.add({"name": soundMap["name"], "buffer": buffer});
soundFiles--;
},
(var error) {
print("error loading ${soundMap["name"]}");
}
);
});
req.send();
}
void sfx(AudioBuffer buffer) {
AudioBufferSourceNode source = audioContext.createBufferSource();
source.connect(audioContext.destination, 0, 0);
source.buffer = buffer;
source.start(0);
}
void playSound(String sound) {
for (Map m in soundList) {
print(m);
if (m["name"] == sound) {
sfx(m["buffer"]);
break;
}
}
}
}
(声音效果位于文件夹“SFX”中。现在,我看一下代码,可能有数百万种更好的方法来组织数据,但现在还不行。)我可以通过创建声音效果Sfx的实例,并调用方法playSound。
例如
#import('dart:html');
#source('sfx.dart');
Sfx sfx;
void main() {
sfx = new Sfx();
window.on.keyUp.add((KeyboardEvent keX) {
sfx.playSound("MISSILE");
});
}
(编辑:添加了用于在按键时播放声音的代码。)
问题是:尽管使用dart2js Javascript,声音效果在Safari中会按预期方式播放,但是当它们在Dartium中或(在dart2js Javascript中)在Chrome中播放时,它们会失真。 (在Firefox中,甚至存在更严重的问题!)
是否有我明显忽略的事情或需要考虑的事情?否则,是否有任何引用或教程(最好在Dart上下文中)可能会有所帮助?
最佳答案
感谢您尝试Dart!
首先,Firefox不支持Web Audio API(还可以吗?)Chrome和Safari支持Web Audio API。您可以在此处跟踪Web Audio API的采用情况:http://caniuse.com/#feat=audio-api
其次,请在Dartium中尝试此Web Audio API示例:https://github.com/dart-lang/dart-html5-samples/tree/master/web/webaudio/intro您将需要首先克隆存储库并在本地运行。此样本在本地为我工作。
这听起来更像是一个错误报告。如果dart-html5-samples中的示例对您有用,但是您的上述代码仍然失真,请在http://dartbug.com/new中打开错误,以便我们看看。
要考虑的一件事是等待特定的MISSLE声音加载之后再挂起keyUp处理程序。
关于html - Dart中的Dartium和Web Audio API导致声音失真,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12931437/