How to simultaneously play a sound and display an alert message using JavaScript

My JavaScript code attempts to play a sound and then display an alert, but the alert always shows up first. When I click 'ok', the sound plays. How can I make it so that the sound plays before the alert appears?


<script>
function play() {
var audio = document.getElementById("audio");
audio.play();
alert('Extraction is finished');
}
</script>

I'm invoking this function using the oncomplete command button. Is there a way to ensure that the sound plays before the alert pops up, or ideally have both happen simultaneously?

javascriptaudioalertsimultaneous-calls

Answer №1

To add a delay before an alert is triggered, you can modify the milliseconds (e.g. 2000)

function startTimer() {
            var alarm = document.getElementById("alarm");
            alarm.play();
            setTimeout(function(){alert("Time's up!");},2000);
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in Javascript: Null Object

I have created an upload page with a PHP script for AJAX, but I'm encountering errors in Firebug. Also, the upload percentage is not being returned properly. Currently, I can only do one upload in Firefox and the script doesn't work in Chrome. H ...

phpjavascripthtmlajaxupload

Utilizing ScrollView Component in React Native

I have developed a simple app that displays a collection of images with titles, resembling a film gallery where all available films can be viewed. However, I encountered an issue when trying to implement the ScrollView element as it does not allow for scro ...

javascriptreactjsreact-nativescrollview

Currently, my focus is on creating a robust slash command handler for discord.js version 13

I've been attempting to update my command handler to support slash commands, but I keep encountering an Invalid Form Body error when trying to activate the bot. I'm hesitant to switch handlers since I use this one for all my bots, but I can&apos ...

javascriptnode.jsdiscorddiscord.js

Unexpected behavior from Bootstrap within React

I recently started working on a React project that I initiated with the create-react-app command. To incorporate Bootstrap into my project, I added the necessary CDNs to the public/index.html file after generating the project. <link rel="stylesheet" hr ...

javascriptreactjsnpmtwitter-bootstrap-3create-react-app

Uncover the secrets of HTML with JavaScript

I'm facing an issue with extracting data from a link's data attribute and trying to decode the HTML within it, but unfortunately, it's not functioning as expected. Check out my code on JSFiddle: http://jsfiddle.net/Kd25m/1/ Here's the ...

javascriptjquery

The input field automatically populates with the username that has been stored in the browser's form

Issue: I have created an input field with the type text, but upon page load, it gets automatically filled with a username saved in the browser's form data for this website's login page. I want it to show up clean when the page loads. <input t ...

javascriptjqueryhtmlangularjs

Tracing a path with a snapping motion using my thumb

Before we begin, let's take a look at the example below. The functionality of this component should mimic that of an input type range. However, I am facing some challenges in calculating the step value and snapping the thumb onto the trail based on t ...

javascripthtmlreactjsvue.jsdom-events

Emulating user interaction using Prototype library - Simulate.js

I have set up a Prototype code to act as an observer, but I am facing issues triggering the observer after manually setting the value of the select element... select.observe('change', this.onChange.bindAsEventListener(this)); Initially, I tried ...

javascriptjqueryajaxprototypejs

What is the process for combining and compressing an Angular 2 application?

I am currently trying to concatenate and minify an angular2 application. My approach so far involved concatenating all my *.js files (boot.js, application.js then all components) into one file and injecting it into my index.html. I also removed the <s ...

javascripttypescriptgulpangular

Programmatically setting properties for elements

I have a question about how to programmatically add a prop to a component in my React project. Here is the scenario: In the render() method, I have the following code snippet: <TextField name="password" va ...

javascriptreactjsmaterial-ui

What is the best way to transfer an integer from my main application to a separate JavaScript file?

Currently, I am developing a complex code using React Bootstrap and focusing on creating a Dropdown list that fetches data from the backend database. <Dropdown> <Dropdown.Toggle variant="success" id="dropdown-basic"></D ...

javascriptarraysreactjsundefinedreact-bootstrap

Unable to Transmit Authorization Header in Cross-Domain Access Situation

My Node.js server has cross-origin communication enabled, allowing my Vue application to access its API from a different origin where static assets are served. This is achieved by setting the following code in Node.js: res.setHeader('Access-Control-Al ...

javascriptnode.jsauthenticationcorspreflight

A comprehensive guide on associating a JavaScript function with an element attribute

I am looking for a way to assign a JavaScript function to an HTML attribute. For example: <li data-ng-repeat="job in jobList" class= dynamicClass(str) data-filter = "dynamicFilter(str)"> The reason I want to do this is because the class name and ...

javascriptjqueryhtmlcss

What is the process for deleting an event in Vue?

My Vue instance currently includes the following code: async mounted () { document.addEventListener('paste', this.onPasteEvent) }, beforeDestroy () { document.removeEventListener('paste', this.onPasteEvent) }, methods: { onPasteEv ...

javascriptvue.js

`Javascript framework suggests ajax navigation as the preferred method`

What is the best way to handle ajax navigation using jQuery? I have recently experimented with a simple jQuery ajax code to implement ajax-based navigation for all the links on a webpage. $('a').click(function(e){ e.preventDefault(); ...

javascriptjqueryhtmlajax

Tips for displaying an image using the image tag in jQuery

I am looking to dynamically append a share button image after every image tag that meets certain criteria. For the code snippet and demonstration, you can visit this fiddler link here. $(document).ready(function() { $("img").each(function() ...

javascriptjqueryhtmlcss

Leveraging JSON data in a client-side JavaScript script

Recently, I started exploring node.js and express. One issue that I am currently facing is how to correctly retrieve json data in a client-side javascript file. I keep receiving a 404 error indicating that the .json file cannot be found. In my project&apo ...

javascriptjqueryjsonnode.jsexpress

Extracting Parameters using JQuery's load Method

On a webpage, I am attempting to load a jsp page (another.jsp) within a div element while passing parameters. $("#div").load('another.jsp?a=1&b=2'); Despite trying various methods multiple times, I have not been able to get the desired outc ...

javascriptjqueryjsp

Error message stating: "Node.js 'readline' - Mark-compacts near heap limit are not effective. Allocation failed."

Here's the process I'm following in the code: Primarily, I am engaging in web scraping tasks. I start by reading a text file containing approximately 3500 links. Next, I iterate through each link, filter out the ones I need, and make a request ...

javascriptnode.jsexpresshttprequestv8

I keep receiving a 400 (Bad Request) error when trying to delete with my REST API

I've successfully created an API and have managed to make POST and GET requests work flawlessly. However, I'm facing some trouble with the DELETE request. Every time I try to execute it, I encounter a 'DELETE http://localhost:3000/api 400 (B ...

javascriptrestexpresshttp-deletenedb