浏览器发声 Oscillator 无音频文件

最近有一款喝酒神器小程序比较火，觉得很好玩前端代码就简单实现了下，下图二维码就是前端代码实现的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);