Hooks version (React 16.8+):

Minimal version.

Place your music file (mp3) in the public folder.

import React from 'react';

function App() {
  let audio = new Audio("/christmas.mp3")

  const start = () => {
    audio.play()
  }

  return (
    < div >
      <button onClick={start}>Play</button>
    </div >
  );
}

export default App;
Answer from Hunter on Stack Overflow
🌐
Stack Overflow
stackoverflow.com › questions › 54114171 › how-to-play-an-mp3-once-onclick-in-react
How to play an mp3 once onClick in react?
Top answer
1 of 8
72

Hooks version (React 16.8+):

Minimal version.

Place your music file (mp3) in the public folder.

import React from 'react';

function App() {
  let audio = new Audio("/christmas.mp3")

  const start = () => {
    audio.play()
  }

  return (
    < div >
      <button onClick={start}>Play</button>
    </div >
  );
}

export default App;
2 of 8
16

You can import the audio using import statement and create a Audio object and call the play() method using the instantiated object.

import React from "react";
import audio from './../assets/audios/success.mp3';

class AudioTest extends React.Component{

  playAudio = () => {
    new Audio(audio).play();
  }

  render() {
    return (
        <div>
          <button onClick={this.playAudio}>PLAY AUDIO</button>
        </div>
    );
  }
}

export default AudioTest;
🌐
Josh W. Comeau
joshwcomeau.com › react › announcing-use-sound-react-hook
use-sound | a React hook that lets you play sound effects • Josh W. Comeau
A sprite is an audio file with many different sounds. By combining them into a single file, it can be a bit nicer to work with, plus you avoid many parallel HTTP requests. Here we use a sprite to build a drum machine! Test it out by clicking/tapping on the buttons, or using the numbers 1 through 4 on your keyboard.*If the keyboard shortcuts aren’t working for you, try clicking one of the buttons first. This is necessary because the playgrounds on this blog use iframes. ... import React from 'react'; import useSound from 'use-sound'; import styles from './DrumMachineDemo.module.css'; function DrumMachineDemo() { const soundUrl = '/sounds/909-drums.mp3'; const [play] = useSound(soundUrl, { sprite: { kick: [0, 350], hihat: [374, 160], snare: [666, 290], cowbell: [968, 200], } }); // Assign each drum sound to a key.
Discussions
Playing sound with React
Hi all. I’ve been trying to get my code to play a sound in React. Off course I tried with the element in my React render method first, but that didn’t work. I have this now: [https://codepen.io/cynthiab72/pen/BazyvLg?editors=0111] from what I read here on the forums , others were having ... More on forum.freecodecamp.org
🌐 forum.freecodecamp.org
0
0
October 11, 2020
reactjs - Why does my "Audio-Button" don`t play a sound (onClick) - Stack Overflow
I am struggeling on finding out why my button dont play a sound when I click on it. The console.log() test works fine, but the -part dont. I also tried some npm-packets to solve the problem, but it... More on stackoverflow.com
🌐 stackoverflow.com
reactjs - Click a button to play sound on React.js - Stack Overflow
I am having trouble creating a button that plays sound or music using React.js. Can someone help me about this? More on stackoverflow.com
🌐 stackoverflow.com
Play an Audio File WITHOUT User Interaction
I'm not sure how feasible this would be in woocommerce, but I'd suggest changing the flow so that the user loads the page once, you force some time of UX interaction (e.g., a modal with a button), and then you poll for new orders via the API without reloading the page (to avoid requiring new interactions each time). This should also improve performance since a full refresh every 30 seconds seems pretty heavyweight. You might still need to refresh after detecting a new order though, depending on how the woocommerce admin pages work. More on reddit.com
🌐 r/webdev
14
2
August 23, 2023
Videos
06:04
🌐 YouTube
Play sound on button tap - React Native ✅ | Engineer Codewala ...
July 6, 2023
5.42K
🌐 youtube.com
Playing Sounds in Your React App | Tutorial
03:42
🌐 YouTube
Ep47 - Playing Sound in React - YouTube
June 19, 2023
1.91K
02:26
🌐 YouTube
How to Play Sounds in React JS - YouTube
October 23, 2023
4.2K
View all
View all
🌐
Let's Build UI
letsbuildui.dev › articles › working-with-sound-in-react
Working with Sound in React - Let's Build UI
December 9, 2023 - import { useWithSound } from ... here </button> </div> </section> ); } Now use the hook by passing it a mouse click sound and have it run within a handleButtonClick function. import { useWithSound } from './useWithSound'; ...
🌐
Educative
educative.io › answers › how-to-play-sound-in-react
How to play sound in React
Line 5: The useSound hook accepts ... the sound when invoked. Line 9: Assigning playSound to the onClick event handler of the button ensures that clicking the button will play the audio file....
🌐
YouTube
youtube.com › watch
How to Play Audio Clips on the Click of a Button in ReactJS - YouTube
09:10
#arslan #ReactJS #developmentHopefully yall liked this video. Remember just because you completed this tutorial dosen't mean your done add a different featur...
Published   May 24, 2023
🌐
CodeSandbox
codesandbox.io › s › reactplaysound-p47gk
React-play-sound - CodeSandbox
June 5, 2019 - React-play-sound by tian-yi using react, react-dom, react-scripts
Published   Jun 04, 2019
Author   tian-yi
Repository   https://codesandbox.io/s/p47gk
🌐
React.js Examples
reactjsexample.com › a-react-hook-for-playing-sound-effects
A React Hook for playing sound effects
April 15, 2020 - const Arcade = () => { const [play, { sound }] = useSound('/win-theme.mp3'); return ( <button onClick={() => { // You win! Fade in the victory theme sound.fade(0, 1, 1000); }} > Click to win </button> ); }; ... Manage temporary UI elements with react hook allowing you to show or hide an element 19 January 2024
Find elsewhere
🌐
YouTube
youtube.com › watch
How To Play Audio From An External URL On The Click Of A Button In ReactJS - YouTube
06:03
Please don't forget Like, Comment and Subscribe if you're new!Hope y'all enjoyed this tutorial this was a suggestion. We will learn how to play any audio cli...
Published   February 20, 2026
🌐
Edvins Antonovs
edvins.io › integrating-sound-effects-in-react
Integrating sound effects in React | Edvins Antonovs
February 10, 2023 - In this code, we've added a button with an onClick handler that calls the handlePlay function. This function uses the reference to the audio tag to call the .play() method. If you want to add multiple sound effects to your component, you can ...
🌐
OpenReplay
blog.openreplay.com › implementing-audio-in-react-websites
Implementing audio in React Websites
June 6, 2023 - import "./styles.css"; import useSound ... ( <div className="App"> <button>Click Me!</button> </div> ); } Next, we will create a variable called playSound....
🌐
GeeksforGeeks
geeksforgeeks.org › reactjs › how-to-toggle-play-pause-in-reactjs-with-audio
How to toggle play/pause in ReactJS with audio ? - GeeksforGeeks
July 23, 2025 - import React, { Component } from "react"; // Import your audio file import song from "./static/a.mp3"; class App extends Component { // Create state state = { // Get audio file in a variable audio: new Audio(song), // Set initial state of song isPlaying: false, }; // Main function to handle both play and pause operations playPause = () => { // Get state of song let isPlaying = this.state.isPlaying; if (isPlaying) { // Pause the song if it is playing this.state.audio.pause(); } else { // Play the song if it is paused this.state.audio.play(); } // Change the state of song this.setState({ isPlaying: !isPlaying }); }; render() { return ( <div> {/* Show state of song on website */} <p> {this.state.isPlaying ? "Song is Playing" : "Song is Paused"} </p> {/* Button to call our main function */} <button onClick={this.playPause}> Play | Pause </button> </div> ); } } export default App;
🌐
Educative
educative.io › answers › how-to-play-sound-when-hovering-in-react
How to play sound when hovering in React
By attaching the onMouseEnter event handler to an element, you can trigger sound playback during hover actions. For example, hovering over a button can play a sound using the play function from the useSound Hook.
🌐
GitHub
github.com › leoasis › react-sound › issues › 14
Playing the same sound multiple times while it is still playing · Issue #14 · leoasis/react-sound
August 21, 2016 - Regarding what you want to do, you could add a sound description object into your local component state every time you click the button, and render as many Sound components as there are in the list of sounds in the local state.
🌐
Medium
theshubhagrwl.medium.com › you-might-not-need-a-sound-library-for-react-a265870dabda
You might not need a sound library for React | by Shubh Agrawal | Medium
December 8, 2022 - There are several buttons and when the user clicks on the button a certain audio is played. ... JavaScript takes care of the types but with TypeScript you gotta watch your step. Till now I have only worked with images in React so I googled how to use audio files and two libraries shot up. ... The work of libraries is to make the implementation simple and these perfectly do that. I implemented as it says in the docs. import useSound from 'use-sound'; import boopSfx from '../../sounds/boop.mp3'; const BoopButton = () => { const [play] = useSound(boopSfx); return <button onClick={play}>Boop!</button>; };
🌐
freeCodeCamp
forum.freecodecamp.org › javascript
Playing sound with React - JavaScript
October 11, 2020 - Hi all. I’ve been trying to get my code to play a sound in React. Off course I tried with the <audio src="link to file" etc> element in my React render method first, but that didn’t work. I have this now: [https://c…
🌐
Stack Overflow
stackoverflow.com › questions › 55766225 › why-does-my-audio-button-dont-play-a-sound-onclick
reactjs - Why does my "Audio-Button" don`t play a sound (onClick) - Stack Overflow
Top answer
1 of 1
2

The handleClick method in button.js returns an <audio> element, which is redundant, since you would like to play the sound onClick.

Instead I used a Audio constructor to create an instance of the audio clip, using the url provided as props, which I set to state.

Then I use a callback to invoke the play() method on it.

  handleClick = () => {
    const audio = new Audio(this.props.cfg.src);
    this.setState({ audio }, () => {
      this.state.audio.play();
    });
  };

So your button.js becomes something like this:

import React, { Component } from "react";

const buttonStyle = {};

export default class Button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      audio: false
    };
  }

  handleClick = () => {
    console.log(this.props.cfg.src);
    const audio = new Audio(this.props.cfg.src);
    this.setState({ audio }, () => {
      this.state.audio.play();
    });
  };

  render() {
    return (
      <div>
        <button style={buttonStyle} onClick={this.handleClick}>
          <h1>{this.props.cfg.name}</h1>
        </button>
      </div>
    );
  }
}

Your main.js remains as is.

Here is a working codesandbox.

🌐
Stack Overflow
stackoverflow.com › questions › 47492133 › click-a-button-to-play-sound-on-react-js › 51100322
reactjs - Click a button to play sound on React.js - Stack Overflow
Top answer
1 of 1
2
<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <script type="text/javascript">
            function aud_play() {
                var myAudio= document.getElementById('myTune')
                if(document.getElementById('myTune').play == true) {
                    myAudio.pause();
                } else {
                    myAudio.play();
                }
                // Alternatively, you could try the line below
                // This inverts it's value from true to false and vice versa
                // document.getElementById('myTune').pause() = !document.getElementById('myTune').pause()
            }
        </script>
    </head>

    <body>
        <audio id="myTune">
            <source src="laugh.mp3"></source>
        </audio>
     <button type="button" onclick="aud_play()"></button>

</body>
</html>

  1. The <script> tag should be inside the <head> tag.

  2. Try aud_play() instead of aud_play.

  3. You need to put src inside the <source> tag, and the <source> tags inside <audio>.

  4. By the way, this isn't React, it's still just normal html. To do this in React is a different thing as it is preferred to use References over document.getElementById('…').

🌐
The Web Dev
thewebdev.info › home › how to play an mp3 clip on click in react?
How to Play an MP3 Clip on Click in React? - The Web Dev
October 2, 2021 - Then we call audio.play in the ... button. To play an mp3 clip on click in React, we can use the Audio constructor to create an audio element with the MP3 file URL....
🌐
DEV Community
dev.to › shantanu_jana › how-to-play-sound-on-button-click-in-javascript-3m48
How to Play Sound on Button Click in JavaScript - DEV Community
February 6, 2025 - If you want to create JavaScript Play Sound On Click then this tutorial is for you. I have created a...
🌐
LogRocket
blog.logrocket.com › home › building an audio player in react to play sound or music
Building an audio player in React to play sound or music - LogRocket Blog
August 7, 2024 - So, pressing either the Enter or Space key will call the handleClick(track) function, effectively simulating a click action. This is particularly useful for making interactive elements accessible to users who rely on keyboard navigation.
Related queries
react autoplay audio
typescript play sound
react-audio-player url
react-h5-audio-player
html sound on click
react-native-sound
react audio autoplay
html play sound on button click