Play audio with HTMLAudioElement API in JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2023-07-15 16:10:25

The `HTMLAudioElement` API has access to all the properties and methods of the HTML `<audio>` element. This API allows us to play audio without even creating the `<audio>` elements. The `Audio()` constructor creates and returns a new `HTMLAudioElement` object.

```js
const audio = new Audio('nature.wav');
```

This API inherits properties and methods from the [`HTMLMediaElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) API that are needed to use the media capabilities like play, pause, mute, etc. Let’s discuss some of them.

## Methods

### The play() method
This method is used to play the audio. It returns a [Promise](https://jscurious.com/a-brief-guide-to-promises-in-javascript) which resolves when the audio successfully starts and rejects if any error occurs in starting the audio.

```js
const audio = new Audio('nature.wav');
audio.play();
```

### The pause() method
This method pauses the audio.

```js
audio.pause();
```

### The load() method
This method loads or resets the audio. If we call this method, the audio will start from the beginning when we play it next time.

```js
audio.load();
```

#### Use case 1 – Load:
When we create a new `HTMLAudioElement` object and call the `play()` method for the first time, it takes some time to load and play the audio. So, for a scenario where we instantly want to play the audio on a button click or something, we see a delay.

To fix this delay, we can use the `load()` method to load the audio beforehand and keep it ready, so the next time we call `play()`, it will start playing without any delay.

```js
const audio = new Audio('nature.wav');
audio.load();

// now play the audio whenever you want
audio.play();
```

#### Use case 2 – Reset:
If we want to stop the ongoing audio, and we want it to play from the beginning the next time we play it, then we can use the `load()` method to reset the audio after we pause it.

```js
audio.pause();
audio.load();
```

## Properties

### duration
It returns the total duration of the audio in seconds.

```js
console.log(audio.duration);
```

### loop
It is used to set or get the loop value that indicates whether the audio should play repeatedly.

```js
const audio = new Audio('nature.wav');
console.log(audio.loop); // false
audio.loop = true;
console.log(audio.loop); // true
```

### muted
It is used to set or get the mute value of the audio.

```js
const audio = new Audio('nature.wav');
console.log(audio.muted); // false
audio.muted = true;
console.log(audio.muted); // true
```

### volume
It is used to set or get the volume of the audio. Its value ranges from 0.0 to 1.0. If we set any value higher than 1, it throws an error.

```js
const audio = new Audio('nature.wav');
console.log(audio.volume); // 1
audio.volume = 0.1;
```

---
##You may also like
* [Send push notifications with the Notification API in JavaScript](https://jscurious.com/the-notification-api-in-javascript/)
* [How to add currency symbol and formatting to a number in JavaScript](https://jscurious.com/currency-formatting-in-javascript/)
* [The URLSearchParams API in JavaScript](https://jscurious.com/the-urlsearchparams-api/)
* [JavaScript Fetch API to make HTTP requests](https://jscurious.com/javascript-fetch-api-to-make-http-requests/)
* [Map in JavaScript and when it's a better choice than Object](https://jscurious.com/map-in-javascript-and-how-it-is-better-than-object/)
* [JavaScript Set object to store unique values](https://jscurious.com/javascript-set-object-to-store-unique-values/)
* [Generator functions in JavaScript](https://jscurious.com/generator-functions-in-javascript/)
* [A brief guide to Object.defineProperty() method](https://jscurious.com/object-defineproperty-method-in-javascript/)
* [A brief guide to Promises in JavaScript](https://jscurious.com/a-brief-guide-to-promises-in-javascript/)
* [20+ JavaScript shorthand coding tricks](https://jscurious.com/20-javascript-shorthand-techniques-that-will-save-your-time/)

___

**Thanks for your time ❤️**
Find more of my writings on web development at [jscurious.com](https://jscurious.com)