How to autoplay audio in react js?

Hi Friends πŸ‘‹,

Welcome To aHoisting!

To autoplay audio in react js, you can use audioRef and then use it in useEffect to autoplay on load. It will autoplay audio in react js.

Today, I am going to show you, how to autoplay audio in react js.

Table of contents

  • Install and create a new React app.
  • Import react component.
  • Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React, { useEffect, useRef } from 'react';

Step 3: Create a Component.

You can use <audio ref={audioRef} controls> to autoplay audio in react js.

<audio ref={audioRef} controls >
  <source src="music-1.mp3" type="audio/mp3" />
    Your browser does not support the audio element.
</audio>

Autoplay audio example.

The below code is an example of a React. You have to import react and use <audio ref={audioRef} controls > to autoplay audio in react js.

App.js

import React, { useEffect, useRef } from 'react';

function App() {
  const audioRef = useRef(null);

  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.play();
    }
  }, []);

  return (
    <div>
      <h1>aHoisting</h1>
      <audio ref={audioRef} controls >
        <source src="music-1.mp3" type="audio/mp3" />
        Your browser does not support the audio element.
      </audio>
    </div>
  );
}

export default App;

In the above code example, I have used the ref={audioRef} to autoplay audio in react js.

Check the output of the above code.

React, autoplay, audio

All the best πŸ‘