How to Play Audio After Page Load in JavaScript

Adding audio to your website can enhance user engagement, whether you want to add background music, sound effects, or a welcome message. In this tutorial, we’ll learn how to play audio automatically after the page has loaded using JavaScript.

We’ll cover both basic techniques and best practices to ensure a smooth user experience.

Prerequisites

To follow along, you need:

– Basic knowledge of HTML and JavaScript.
– A web browser to test your code.

Step 1: Prepare Your Audio File

First, you’ll need an audio file. Supported formats include `.mp3`, `.wav`, or `.ogg`. For this tutorial, we’ll use an `.mp3` file named `sample-audio.mp3`.

Place the audio file in your project directory:

project-folder/
|– index.html
|– script.js
|– sample-audio.mp3

Step 2: Create the HTML Structure

Create an `index.html` file with the following structure:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play Audio on Page Load</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Audio will play after the page loads.</p>

<!-- Link to the JavaScript file -->
<script src="script.js"></script>
</body>
</html>

Step 3: Add JavaScript to Play Audio

Create a `script.js` file and add the following code:

javascript
// Create an audio element and set the source file
const audio = new Audio("sample-audio.mp3");

// Play the audio after the page fully loads
window.addEventListener("load", () => {
audio.play().catch(error => {
console.log("Audio playback failed:", error);
});
});

Step 4: Handling Autoplay Restrictions

Modern browsers like Chrome, Firefox, and Safari have strict autoplay policies. Autoplaying audio may be blocked unless the user has interacted with the page.

Solution: Add a Play Button

If autoplay is blocked, you can provide a fallback play button for users to manually start the audio.

Update your `index.html` to include a play button:

<button id="play-button">Play Audio</button>
```

Modify `script.js` to handle button clicks:

```javascript
const audio = new Audio("sample-audio.mp3");

window.addEventListener("load", () => {
audio.play().catch(() => {
console.log("Autoplay blocked. User interaction required.");
});
});

const playButton = document.getElementById("play-button");
playButton.addEventListener("click", () => {
audio.play();
});

Now, if autoplay is blocked, users can click the play button to manually start the audio.

Final Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play Audio on Page Load</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Audio will play after the page loads, or you can click the button below.</p>
<button id="play-button">Play Audio</button>

<script src="script.js"></script>
</body>
</html>

script.js

const audio = new Audio("sample-audio.mp3");

window.addEventListener("load", () => {
audio.play().catch(() => {
console.log("Autoplay blocked. User interaction required.");
});
});

const playButton = document.getElementById("play-button");
playButton.addEventListener("click", () => {
audio.play();
});

Conclusion

You now know how to play audio automatically after the page loads and how to handle autoplay restrictions by providing a fallback play button. This approach helps ensure a smooth user experience while complying with modern browser policies.

Feel free to customize the audio and user interactions to suit your needs!

Happy coding!