HTML Audio DOM Methods 🎯

beginner
23 min

HTML Audio DOM Methods 🎯

Welcome to our comprehensive guide on HTML Audio DOM Methods! In this lesson, we'll delve into the world of audio in HTML, focusing on the various DOM methods that allow us to control and manipulate audio elements in our web projects.

What are DOM Methods? 📝

DOM (Document Object Model) methods are functions that let us interact with the elements in our HTML document programmatically. In the context of audio, we have several useful methods that make it easy to control audio elements like the <audio> tag.

The <audio> Tag 🎧

Before we dive into the methods, let's quickly review the <audio> tag. This HTML tag allows you to embed audio files directly in your web pages, making it easy to create rich media experiences.

html
<audio src="myAudio.mp3" controls></audio>

In the above example, myAudio.mp3 is the audio file we want to play, and controls enables the default HTML controls for playback.

Common Audio DOM Methods 💡

1. play() ▶️

The play() method starts the audio playback from the current position.

javascript
const audio = document.querySelector('audio'); audio.play();

2. pause() ⏸️

The pause() method stops the currently playing audio.

javascript
const audio = document.querySelector('audio'); audio.pause();

3. volume 🔊

The volume property controls the audio's volume level between 0 (silent) and 1 (maximum volume).

javascript
const audio = document.querySelector('audio'); audio.volume = 0.5; // sets the volume to 50%

4. currentTime ⏱️

The currentTime property gets or sets the current playback position in seconds.

javascript
const audio = document.querySelector('audio'); console.log(audio.currentTime); // shows the current playback position audio.currentTime = 10; // sets the playback position to 10 seconds

5. duration 🕒

The duration property returns the total length of the audio file in seconds.

javascript
const audio = document.querySelector('audio'); console.log(audio.duration); // shows the total duration of the audio

6. paused ⏸️

The paused property returns a boolean indicating whether the audio is currently paused (true) or playing (false).

javascript
const audio = document.querySelector('audio'); console.log(audio.paused); // shows whether the audio is paused or not

Quiz 📝

Quick Quiz
Question 1 of 1

Which DOM method do we use to start the audio playback from the current position?

Practical Application 💡

Now that you've learned the basic HTML Audio DOM methods, let's build a simple audio player that allows users to control the playback of a single audio file.

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Audio Player</title> </head> <body> <audio id="myAudio" src="myAudio.mp3"></audio> <br> <button onclick="playAudio()">Play</button> <button onclick="pauseAudio()">Pause</button> <script> const audio = document.getElementById('myAudio'); function playAudio() { audio.play(); } function pauseAudio() { audio.pause(); } </script> </body> </html>

In this example, we have an <audio> tag with an id myAudio, two buttons for controlling playback, and a script that uses the play() and pause() methods to control the audio.

Conclusion ✅

We've covered the essential HTML Audio DOM methods in this tutorial, allowing you to create interactive audio experiences in your web projects. With these methods, you can control the playback, volume, and even the current playback position of audio files using JavaScript. Happy coding! 🚀