How to open web cam in JavaScript ?

JavaScript- Play a .mp3 File in JS

Last Updated : 19 Dec, 2024

To play a .mp3 file in JavaScript, you can use the HTML <audio> element along with JavaScript to control playback. These are the following ways to do that:

1. Basic HTML and JavaScript Approach (Mostly Used)

The <audio> tag is used to embed sound files, and its src attribute points to the .mp3 file you want to play. The JS the audio player and play button using getElementById. When the button is clicked, the audioPlayer.play() method is called, which starts playing the audio.

HTML

<!DOCTYPE html>
<html lang="en">
<body>
 <button id="playButton">Play Audio</button>
 <audio id="audioPlayer" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240912183739/chatbot-response.mp3"></audio>

 <script>
  const audioPlayer = document.getElementById('audioPlayer');
  const playButton = document.getElementById('playButton');
  playButton.addEventListener('click', () => {
   audioPlayer.play();
  });
 </script>
</body>
</html>

2. With Play/Pause Toggle

The button text changes dynamically to reflect whether the audio is playing or paused. audioPlayer.paused checks whether the audio is currently paused. If it is, the audio is played, and if it's playing, the audio is paused.

HTML

<!DOCTYPE html>
<html lang="en">
<body>
 <button id="playPauseButton">Play Audio</button>
 <audio id="audioPlayer" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240912183739/chatbot-response.mp3"></audio>
 <script>
  const audioPlayer = document.getElementById('audioPlayer');
  const playPauseButton = document.getElementById('playPauseButton');

  playPauseButton.addEventListener('click', () => {
   if (audioPlayer.paused) {
    audioPlayer.play();  
    playPauseButton.textContent = 'Pause Audio';  
   } else {
    audioPlayer.pause();  
    playPauseButton.textContent = 'Play Audio';  
   }
  });
 </script>
</body>
</html>

How to open web cam in JavaScript ?

M

meetahaloyx4

Improve

Article Tags :

Similar Reads

Create a Music Player using JavaScript

As streaming is increasingly being adopted by users, online media players have become essential for consuming media on the internet. Music players allow one to enjoy music in any browser and supports a lot of the features of an offline music player.We will be creating a music player with a clean use

How to record and play audio in JavaScript ?

JavaScript is a very flexible language and it provides many API support to do many useful things. Here one important thing is that record audio or video in web pages is also done using JavaScript. In this case, it will ask the user for microphone access to the browser and record the audio through th

How to Convert Base64 to File in JavaScript?

In web development, Base64 encoding is often used to represent binary data, such as images or files, with a string of ASCII characters, sometimes you may be required to change this Base64 string back into a file for instance for file uploads, downloads, or processing in the browser, this article aim

How to open web cam in JavaScript ?

In this article, we will see how to open a webcam and show a live video using JavaScript. For this, we are going to use Navigator Media Devices.Navigator Media DevicesIt is a read-only property that returns a Media Devices object, which helps us to access the connected media input devices like the c

How to download File Using JavaScript/jQuery ?

The ability to download files directly from a website is an essential feature for many web applications. Whether you're providing documents, images, or other data, enabling users to download files seamlessly enhances their experience and ensures they can access the content offline. This article prov

How to Make a Beep Sound in JavaScript?

To make a beep sound in JavaScript, you can use the Audio object to play a sound file.Approach: Using Audio FunctionUse the Audio function in Javascript to load the audio file. This HTML document creates a simple web page with a heading and a button. When the button is clicked, the play() function i

JavaScript Program to read text File

Given a text file, write a JavaScript program to extract the contents of that file. There is a built-in Module or in-built library in NodeJs that handles all the reading operations called fs (File-System). It is basically a JavaScript program (fs.js) where a function for reading operations is writte

p5.js | play() Function

The play() function is an inbuilt function in p5.js library. This function is used to play the loaded audio on the web. The play function should call after the loadSound() function. If you call before that it has nothing to play so it will show loading nothing else will happen ever. Syntax: play( st

How to Pause and Play a Loop in JavaScript using Event Listeners ?

Given below is a JavaScript program for DOM manipulation which is basically about How to Pause and Play a loop in JavaScript using event listeners (not to be confused with delay). In this article, we are using JavaScript with HTML so we need a web browser i.e., Chrome (recommended) or Electron Appli

How to read a local text file using JavaScript?

Reading a local text file involves accessing the contents of a file stored on a user's device. Using JavaScript, this can be achieved with the HTML5 File API and the FileReader object, which reads files selected through an <input> element or drag-and-drop, asynchronously. Getting Started with