最近有一款喝酒神器小程序比较火,觉得很好玩前端代码就简单实现了下,下图二维码就是前端代码实现的demo,各位亲可以体验下。
做完之后有两处值得注意的地方:
1、touches 多触摸点坐标记录情况
2、浏览器 通过 AudioContext Oscillator 无音频发声
多触碰点代码实现
cs.addEventListener('touchstart', function (e) {
touches = Array.from(e.touches)
play();
e.preventDefault();
}, false);
cs.addEventListener('touchmove', function (e) {
e.preventDefault();
});
cs.addEventListener('touchend', function (e) {
for(let i =0; i<e.changedTouches.length; i++) {
touches = touches.filter(function (item) {
return item.identifier != e.changedTouches[i]['identifier']
})
}
if (!touches.length) {
activeIndex = -1
_begin = 0;
}
})
无音频发声实现
var Ctx = window.AudioContext ? AudioContext : webkitAudioContext ;
var atx = new Ctx();
var oscillator = atx.createOscillator();
oscillator.frequency.value = 449.23;
oscillator.type = 'square' // 方形波square、三角波triangle、正弦波sine、锯齿波sawtooth、自定义custom
oscillator.start(atx.currentTime);
oscillator.connect(compressor);