In this article, we will learn to create a play/pause button for an audio file using ReactJS
Approach: We are going to use the following steps:
- Take the reference of the audio file in ReactJS Using Audio Class
- Set the default state of the song as not playing.
- Make a function to handle the Play/Pause of the song.
- Use the play() and pause() functions of audio class to do these operations.
let song = new Audio(my_song); song.play(); song.pause();
Setting up environment and Execution:
Step 1: Create React App command
npx create-react-app foldername
Step 2: After creating your project folder, i.e., folder name, move to it using the following command:
cd foldername
Step 3: Create a Static folder and add an audio file to it.
Project Structure: It will look like the following.
Example:
Filename: App.js
javascript
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; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, Turn on speakers to listen to audio.
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
