我想做这样一个功能:网页播放有规律的节拍声音,用户按照这个节拍敲击键盘;我需要比较“节拍声音播放的时刻”和“用户敲击键盘的时刻”
以下是例子:
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/keymaster/1.6.1/keymaster.min.js"></script>
<script src="https://tonejs.github.io/CDN/latest/Tone.min.js"></script>
<script>
var contextCreatedTime = Date.now();
var context = Tone.context;
// 从第 3 秒开始,每隔 0.5 秒发出声音,共 8 次
for (var i = 0; i < 8; i++) {
var oscillator = context.createOscillator();
oscillator.connect(context.destination);
oscillator.frequency.value = 220;
var soundStartTime = 3 + i * 0.5;
oscillator.start(soundStartTime);
oscillator.stop(soundStartTime + 0.05);
// 将后 4 次发出声音的时刻输出到 console
if (i > 3) {
console.log("sound time: " + (contextCreatedTime + Math.floor(soundStartTime * 1000)));
}
}
// 记录键盘“ k ”键的敲击时刻,输出到 console
key('k', function () {
console.log("keyboard time: " + Date.now());
});
</script>
</body>
</html>
具体操作是这样:
这个网页从载入完成之后的第 3 秒开始,会播放 8 个短促音,它们之间的间隔是 0.5 秒。其中,前 4 个音的作用是提示用户节奏,用户需要踩着后 4 个音的节拍敲击“ k ”键
这后 4 个音的输出时间,以及用户踩着后 4 个音的节拍敲击“ k ”键的时间,都会被输出到 console
但是,通过比较它们之间的时间差,我发现这个时间并不够准确, 比如说,有时候, 4 个节拍音比 4 个按键音的时间要大 40 (毫秒),有时候要大 7 80 ,有时候误差在 10 以内,有时候又会差 100 多……
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.