Building an H5 Voice‑Controlled Game Demo with WebAudio

The article introduces a web‑based recreation of the popular Chinese game "Don't Stop! 8‑Note Sauce". The original PC game uses sound to control walking and jumping; this demo implements the same mechanic in HTML5 using JavaScript and the WebAudio API.

Gameplay : After granting microphone permission, the player speaks loudly; the louder the voice, the character (a doge block) walks, and when the volume exceeds a jump threshold the character jumps over pits. Falling into a pit ends the game.

Game Modeling : The game is a simple collision model with three concepts: the target object (the doge block), collision objects (pits), and win/lose conditions (overlap of volumes).

Design Overview : The visible road is a container that moves to give the illusion of the character moving. Obstacles (pits) are generated dynamically and removed when they pass out of view.

Implementation Details :

Configuration parameters (e.g., barrier width, difficulty level, volume thresholds) are defined in a config object.

Initialization creates the road and populates it with barrier elements based on container width.

Barriers are created as DOM elements; the code for creating and retrieving barriers is shown below: createBarrier:function (num) {//创建障碍物，num个数 ...//其他代码 $bc.append(exports.getBarrier(num,type)); }, getBarrier:function (num,type) {//获取障碍物 var html = ""; for(var i = 0; i < num; i++){ html += '<div class="barrier '+(type === 1 ? "barrier-high" : "barrier-low")+'" data-id="'+new Date().getTime()+'">》</div>' } return html; }

Movement and jumping are triggered by volume thresholds in the letsGo function: letsGo:function (vol) {//达到条件行走或者跳跃 if (vol > exports.config.walkValue ) {//走 exports.moveBarrier(); if (vol > exports.config.jumpValue) {//跳 exports.jumpNotes(); } }else {//停 exports.stopBarrier(); } }

Collision detection updates an array of active barriers and checks the distance between the doge and the nearest pit. If overlap occurs, lost() resets the game.

WebAudio Voice Control :

Microphone access is obtained via navigator.getUserMedia (with vendor prefixes). Compatibility is limited to Android 5.0+ and certain WebView environments.

An AudioContext is created; the microphone stream is connected to a ScriptProcessorNode to capture audio samples and provide a “monitor” (return‑ear) effect.

The audio amplitude (volume) is extracted using an AnalyserNode . In the onaudioprocess callback, analyser.getFloatTimeDomainData fills a Float32Array, which is then weighted to compute a volume value used for walking/jumping.

The article concludes that the demo not only reproduces the PC game in H5 but also serves as a practical example of WebAudio usage, encouraging further exploration of emerging web standards such as WebAssembly, WebAR, and WebGL.