WebAudioTag.js

Use AudioContext just like an <audio> tag.

English | 简体中文

Getting Started

Install WebAudioTag.js

$ npm install webaudiotag.js

Use WebAudioTag.js in your project

import WebAudioTag from "WebAudioTag.js";

const webAudioTag = new WebAudioTag({
  src: "http://example.com/sound.mp3",
});
// or
// webAudioTag.src = "http://example.com/sound.mp3";

webAudioTag.play();

Config

| key | type | default | description | | ------------------ | ---------------------------------------------- | --------- | ------------------------------------------------------------------------------ | | config.src | string | "" | The url of audio | | config.volume | number | 1 | The volume of audio, must fall between 0 and 1 | | config.loop | boolean | false | If the value is true, the audio will loop playback automatically | | config.muted | boolean | false | Indicates whether the audio is muted | | config.extraNode | AudioNode[] | [] | The extra node that you want to connect to AudioContext | | config.fetchBuffer | (src: string) => Promise<ArrayBuffer | null>; | undefined | If you want to customize the request to get resources, you can use this config |

Attributes

| key | type | description | | -------------------- | ----------------------------- | ------------------------------------------------------------ | | instance.currentTime | number | Indicating the current playback time of the audio in seconds | | instance.duration | number | Readonly, indicating the duration of the audio in seconds | | instance.volume | number | See config.volume | | instance.src | string | See config.src | | instance.loop | boolean | See config.loop | | instance.muted | boolean | See config.muted | | instance.paused | boolean | Readonly, indicates whether the audio is paused | | instance.playState | "paused" | "playing" | Readonly, indicating the state of the audio | | instance.sourceNode | AudioBufferSourceNode | null | Readonly, current audio source node | | instance.ctx | AudioContext | Readonly, current AudioContext |

Methods

play

Begin playback of the audio.

(offset?: number) => Promise<boolean>;

pause

Pause playback of the audio.

() => Promise<boolean>;

on

Binds event-handling function.

(type: string, handler: Function) => void;

off

Unbind event-handler function.

(type: string, handler: Function) => void;

Events

Event handler is bound through on method, and unbinded through off method.

Example:

import WebAudioTag from "WebAudioTag.js";

const webAudioTag = new WebAudioTag();

const handler = (evt) => {};

webAudioTag.on("playStateChange", handler);

webAudioTag.off("playStateChange", handler);

See the following for the types of evt.

playStateChange

Event emmited after playState changed.

{
  type: "playStateChange";
  state: "paused" | "playing";
}

timeUpdate

Event emitted after currentTime changed.

{
  type: "timeUpdate";
  currentTime: number;
}

volumeChange

Event emitted after volume changed.

{
  type: "volumeChange";
  volume: number;
}

ended

Event emitted when the end of audio is reached.

{
  type: "ended";
}

progress

Event emitted when the audio data is downloading.

{
  type: "progress";
  src: string;
  percentage: number;
  chunked: number;
}

loaded

Event emitted when the audio data is loaded.

{
  type: "loaded";
}

error

Event emitted when an error occurred.

{
  type: "error";
  message: string;
  error: Error | null;
}