Use AudioContext just like an <audio>
tag.
English | 简体中文
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();
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 |
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 |
Begin playback of the audio.
(offset?: number) => Promise<boolean>;
Pause playback of the audio.
() => Promise<boolean>;
Binds event-handling function.
(type: string, handler: Function) => void;
Unbind event-handler function.
(type: string, handler: Function) => void;
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
.
Event emmited after playState changed.
{
type: "playStateChange";
state: "paused" | "playing";
}
Event emitted after currentTime changed.
{
type: "timeUpdate";
currentTime: number;
}
Event emitted after volume changed.
{
type: "volumeChange";
volume: number;
}
Event emitted when the end of audio is reached.
{
type: "ended";
}
Event emitted when the audio data is downloading.
{
type: "progress";
src: string;
percentage: number;
chunked: number;
}
Event emitted when the audio data is loaded.
{
type: "loaded";
}
Event emitted when an error occurred.
{
type: "error";
message: string;
error: Error | null;
}