How to Play Audio After Few Seconds or Delay in JavaScript
By Saruque Ahamed MollickIn this tutorial, I will show you how easily you can play audio after few seconds or some time delay easily using JavaScript.
Here we gonna create an HTML file with an audio tag and an audio src file. Then we will load it in our browser. Thereafter, We will create a JavaScript function to play that audio with some delay so that it plays after a certain period of time.
To see the video tutorial play this video
Play audio after few seconds in JavaScript
In this previous post How to Play Audio After The Page Loads in HTML With JavaScript I have described fully.
You can click on the above link to learn how to play audio after page load using JavaScript.
<script type="text/javascript">
setTimeout(function(){
document.getElementById("id_here").play();
}, 8000)
</script>You can see, here I have used setTimeout function to achieve the delay.
setTimeout(function(){
document.getElementById("id_here").play();
}, 8000)odsThis is the main function to play audio after 8 seconds.
setTimeout(function(){
// your code goes here
}, enter delay time in miliseconds)You may also interested in,
Alert Before Leaving A Web Page Using JavaScript jQuery
Bottom Sticky Music Player Source Code in JavaScript and CSS
To check if your function is working or not you can use console log.
console.log('your audio is started just now');This line will add a console message when the audio starts playing.
You can test the below code
<!DOCTYPE html>
<html>
<head>
<title>My Audio</title>
</head>
<body>
<audio src="mysong.mp3" id="my_audio" loop="loop"></audio>
<script type="text/javascript">
setTimeout(function(){
document.getElementById("my_audio").play();
console.log('your audio is started just now');
}, 8000)
</script>
</body>
</html>Just put your audio path in the src attribute.
loop will play the audio file repeatedly.
You may also read,
How to set audio playing time to starting position in JavaScript
How to delay mp3 stream, in seconds? Not pause, but delay.
In fact this is ok code, but how to get output from this new delayed file?
What i need is a link to delayed mp3, not to original.
Here we are doing nothing with the actual MP3 file. We are just adding a JavaScript function to play the Mp3 with some delay.
But as per your comment, you want to deal with the actual mp3 file. Do you want a Mp3 file where there will be no sound in the first few seconds and then the sound will be started after few seconds?
Ahh, sorry for the mess, i will try to reformat in this post again:
What i need is to get the link of delayed mp3. So i can stream. Is it possible. Let me explain, in my code sample:
My Audio
setTimeout(function(){
document.getElementById(“my_audio”).play();
console.log(‘your audio is started just now’);
}, 6000)
xxxx://……/PROGRAM2.mp3 is not good for me, because it started earlier than I need (about 6 sec earlier).
Your code to delay audio is great (exactly what i need), but i need somehow to stream this new delayed mp3.
Is this somehow possible?
I hope you understand me, because English is not my native language.
Okay I got your point. In that case, you must have to use a server-side programming language. Are you using JS for back-end too? Like node.js? Because you are going to deal with a file and it’s not possible with only front-end programming.
(My native language is not English either so don’t worry, we are here just to discuss about coding so chill)