How to develop game music with HTML 5 Audio API

Introduced

Audio is a great way to make the multimedia experience very compelling. If you've ever tried to watch a movie with a sound shutdown, you're likely to have noticed that.

The game is no exception! The memories of my favorite video games include music and harmony. Today, 20 years later, most of the time, when playing my favorite game, I still can't banish the music of Zelda and the Dark soundtrack of Matt's Rikunto from my mind. The same applies to sound effects, such as the response to real-time clicks in the Warcraft unit, and Nintendo's classic example.

The audio of the game presents some interesting challenges. To create fascinating game music, designers need to adjust the potential unpredictable state. In fact, some games can last for an unknown length of time, and sound can interact with the environment and be mixed in complex ways, such as indoor effects and relative sound positioning. Finally, there may be a large number of sound effects once played, which requires a good blending effect and no performance loss during rendering.

Game Audio on the web

Simple game use <audio> tags may suffice. However, many browsers provide a rudimentary implementation that results in audio glitches and high latency. This may only be a temporary problem, as manufacturers are trying to improve their implementation. To understand the <audio> tag support, we can use the excellent test tools provided by areweplayingyet.org.

Once you dive into the <audio> tag specification, you'll know that there are a lot of things that you can't do with it. This is not surprising because it is primarily designed to support multimedia playback. These restrictions include:

Unable to use filter for sound signal

Unable to access raw PCM (Yutie: WAV) data

No source and audience position, direction concept

No finer-grained timings

In the following sections, I'll delve into some of the things that are written using the Webaudio API to write game audio. A brief introduction to this API can be learned in the Getting Started tutorial.

Background music

The game often has a loop playing background music. For example, a background track is as follows:

If your looping music is short and known, it can be quite annoying. When the player is stuck in an area or level, and the same background music is played continuously, we may need to fade out gradually to prevent the player from getting bored. Alternatively, depending on the context in the game, the different sound intensity is mixed with a gradual fade.

If your player is at an epic boss level, you may need to mix several different emotional ranges, from the artistic atmosphere to the psychological cues to the intense atmosphere. Music synthesis software usually allows you to export several mixes (they have the same length) by selecting a set of tracks. There is some kind of internal consistency between the tracks to avoid an dissonant transition from one track to another.

Then, using the Webaudio API, you can use some classes, such as Bufferloader, to import all of these sound samples through XHR (which is described in detail in the article introducing the network audio API). It takes time to load sound effects, so these sound effects used in games should be loaded at the time the page loads, or incrementally when the player is playing, at the beginning of each turn.

Next, you need to create a source for each node and create a gain node for each source, and the connection diagram is as follows: