Play audio after page load in JavaScript

How to Play Audio Automatically After Page Load in JavaScript

In this post, we’ll learn how to autoplay audio on a webpage when the page loads using JavaScript. Due to modern browser restrictions on autoplay, we need to be creative to ensure audio plays smoothly.

Why Can’t We Autoplay Easily?

Most browsers prevent autoplay with sound because it can be annoying or intrusive. However, there are ways to improve the chances of autoplaying audio without requiring user interaction. Here’s a simple approach that combines different techniques.

Solution Overview

We will:

Attempt to autoplay audio when the page loads.
Mute the audio initially (since many browsers allow muted autoplay).
Try playing the audio again when the browser window gains focus.

As a fallback, listen for a user click to trigger the audio if autoplay is blocked.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Play Audio After Page Load</title>
</head>
<body>
    <h1>Audio Autoplay After Page Load</h1>
    <p>This page attempts to play audio automatically without user interaction.</p>
    <p id="status">Waiting for audio to play...</p>
    <p>If audio does not play, just click anywhere!</p>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const audio = new Audio();
            const statusElement = document.getElementById('status');
            
            audio.src = 'audio.mp3'; // Ensure this path is valid
            audio.loop = true; // Optional: Loop the audio
            audio.muted = true; // Start muted

            function attemptPlay() {
                audio.play().then(() => {
                    console.log('Audio started successfully');
                    statusElement.textContent = 'Audio is playing automatically!';
                    audio.muted = false; // Unmute after starting
                }).catch((error) => {
                    console.log('Autoplay was prevented:', error);
                    statusElement.textContent = 'Autoplay was prevented. Please check your browser settings.';
                });
            }

            attemptPlay();

            window.addEventListener('focus', attemptPlay); // Play when window gains focus

            document.addEventListener('click', function onFirstClick() { // Play on user interaction
                attemptPlay();
                document.removeEventListener('click', onFirstClick);
            }, { once: true });
        });
    </script>
</body>
</html>

How This Code Works:

Loading the Audio: We create an audio element, specify the source, and set the audio to be muted initially. This increases the chances of autoplay working since many browsers allow muted autoplay.
Attempt to Play: The attemptPlay() function tries to play the audio using the .play() method and unmutes it once it successfully starts. If autoplay is blocked, an error message will be logged, and the user is informed.
Focus Event: If autoplay fails, we try again when the user refocuses on the browser window by listening for the focus event.
Fallback on Click: If all else fails, we use a click listener as a backup to play the audio when the user clicks anywhere on the page. This ensures the audio can still be played even if autoplay is blocked.

Things to Consider:

Autoplay Policies: Different browsers may block autoplay with sound, so autoplay is not guaranteed in all cases. Users may need to interact with the page before audio can play.
Muting Audio: Starting the audio muted increases the chances of autoplay working, but be sure to unmute it afterward to give users the full experience.

Conclusion

This solution combines different strategies to maximize the chances of audio playing automatically when the page loads. Keep in mind browser policies around autoplay may change over time, but this method is a solid starting point.

OUTPUT

Take the reference of this Javascript.