Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML5

Creating and Playing Sounds using HTML5

5.00/5 (4 votes)
9 Jun 2020CPOL2 min read 8.4K  
How to create and play sounds in HTML5
In this article, we are going to see how we can create and play sounds using the latest version v3 of musquito.

Introduction

musquito is an audio engine created using Web Audio API for HTML5 games and interactive websites. It provides a simple abstraction to create and play sounds easier. With the latest version v3, creating and playing sounds is much more simple.

Below are some of the core features supported by the library:

  • Built on the powerful Web Audio API
  • Simple API to create and play sounds
  • Supports sound groups
  • Supports variety of codecs
  • Supports audio sprites
  • Supports streaming using HTML5 audio nodes
  • Fading
  • Caching
  • Auto Garbage Management

In the previous two versions (v1 and v2), you needed to always create an audio group to play the sound. From version 3, you can play a sound by a single line of code.

Installation

At this time, musquito is available only in npm and you can install it using the below command:

npm install musquito --save

"Hello World" Example

A simple example of how to create and play a gun fire sound.

JavaScript
import $buzz from 'musquito';

$buzz.play('gun.mp3')

Passing Additional Parameters

The below example shows how you can pass additional parameters like volume, rate and callback.

JavaScript
$buzz.play({
  src: ['greenade.mp3', 'greenade.wav'],
  volume: 0.5,
  rate: 2,
  playEndCallback: () => alert('Playback started')
});

Using Sprites

Audio Sprites are like image sprites which concatenate multiple small sounds in a single file. You can create audio sprite using this tool.

Below is an example of how to use sprites:

JavaScript
$buzz.play({
  src: 'sprite.mp3',
  sprite: {
    "beep": [
      0,
      0.48108843537414964
    ],
    "button": [
      2,
      2.4290249433106577
    ],
    "click": [
      4,
      4.672018140589569
    ]
  },
  sound: 'beep'
});

Pausing and Stopping Sounds

Calling the play method returns the sound id and you can use it to call other methods like pause, stop, change the volume and more properties of the sound.

JavaScript
const soundid = $buzz.play('bg.mp3');

// Pausing sound
$buzz.pause(soundid);

// Stopping sound
$buzz.stop(soundid);

Fading Sounds

You can fade the volume of a playing sound linearly or exponentially as shown below:

JavaScript
const soundid = $buzz.play('bg.mp3');

setTimeout(() => {
  $buzz.fade(soundid, 0, 3);
}, 2000); 

Streaming

Long audio files can be played using HTML5 audio nodes by passing stream option as true.

JavaScript
$buzz.play({
  src: 'bg.mp3',
  stream: true
});  

Advanced Example

The below example shows how we can setup audio engine by passing audio resources with shorthand identifiers initially before playing sounds. The setup method also takes a lot of other arguments to configure the engine, please refer to the API docs.

JavaScript
$buzz.setup({
  src: {
    bg: 'bg.mp3',
    sprite: {
      url: 'sprite.mp3',
      sprite: {
        "beep": [
          0,
          0.48108843537414964
        ],
        "button": [
          2,
          2.4290249433106577
        ],
        "click": [
          4,
          4.672018140589569
        ]
      }
    }
  },

  oninit: () => {
    // Playing sounds with identifiers
    $buzz.play('#bg');
    $buzz.play('#sprite.button');
  }
});  

Creating Audio Groups

Sometimes, it's convenient to create a sound group which is called as "Buzz" that helps to create and manage multiple sounds for a single audio resource. Buzzes also support events. The below example shows how we can create a sound group for a sprite and play multiple sounds easier.

JavaScript
const buzz = $buzz({
  src: 'sprite.mp3',
  sprite:{
    "beep": [
      0,
      0.48108843537414964
    ],

    "button": [
      2,
      2.4290249433106577
    ],

    "click": [
      4,
      4.672018140589569
    ]
  }
});

buzz.play('beep');

buzz.play('button');

buzz.play('click'); 

For more information and the API docs, please check out the official website. Please give a star to the repo.

History

  • 9th June, 2020: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)