Adding a two second delay into background music
1
This is the code that I have written to play a music in the background. how can I add a two-second delay into it? this would give time for the images to fully load
<!DOCTYPE html>
<html>
<head>
<title>Animate</title>
<script type="text/javascript">
var isChrome = /Chrome/.test(navigator.userAgent) && /Google
Inc/.test(navigator.vendor);
if(!isChrome){
$('#iframeAudio').remove()
}
else{
$('#playAudio').remove() //just to make sure that it will not have 2x audio
in the background
}
</script>
</head>
<body>
<iframe src="Happy Birthday Song.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
<audio autoplay loop id="playAudio">
<source src="Happy Birthday Song.mp3">
</audio>
</body>
</html>
javascript html
google-chrome appcelerator asked Nov 17 '18 at 10:02
user264498user264498
236
add a comment |
1
This is the code that I have written to play a music in the background. how can I add a two-second delay into it? this would give time for the images to fully load
<!DOCTYPE html>
<html>
<head>
<title>Animate</title>
<script type="text/javascript">
var isChrome = /Chrome/.test(navigator.userAgent) && /Google
Inc/.test(navigator.vendor);
if(!isChrome){
$('#iframeAudio').remove()
}
else{
$('#playAudio').remove() //just to make sure that it will not have 2x audio
in the background
}
</script>
</head>
<body>
<iframe src="Happy Birthday Song.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
<audio autoplay loop id="playAudio">
<source src="Happy Birthday Song.mp3">
</audio>
</body>
</html>
javascript html
google-chrome appcelerator asked Nov 17 '18 at 10:02
user264498user264498
236
2
why not you use onload event. It will fire after all images, scripts and CSS loaded. In onload function fired then you can play music.
– Sameer
Nov 17 '18 at 10:12
please give me an example. I do not know javascript. got this all from the internet.
– user264498
Nov 17 '18 at 10:39
add a comment |
1
1
1
This is the code that I have written to play a music in the background. how can I add a two-second delay into it? this would give time for the images to fully load
<!DOCTYPE html>
<html>
<head>
<title>Animate</title>
<script type="text/javascript">
var isChrome = /Chrome/.test(navigator.userAgent) && /Google
Inc/.test(navigator.vendor);
if(!isChrome){
$('#iframeAudio').remove()
}
else{
$('#playAudio').remove() //just to make sure that it will not have 2x audio
in the background
}
</script>
</head>
<body>
<iframe src="Happy Birthday Song.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
<audio autoplay loop id="playAudio">
<source src="Happy Birthday Song.mp3">
</audio>
</body>
</html>
javascript html
google-chrome appcelerator asked Nov 17 '18 at 10:02
user264498user264498
236
This is the code that I have written to play a music in the background. how can I add a two-second delay into it? this would give time for the images to fully load
<!DOCTYPE html>
<html>
<head>
<title>Animate</title>
<script type="text/javascript">
var isChrome = /Chrome/.test(navigator.userAgent) && /Google
Inc/.test(navigator.vendor);
if(!isChrome){
$('#iframeAudio').remove()
}
else{
$('#playAudio').remove() //just to make sure that it will not have 2x audio
in the background
}
</script>
</head>
<body>
<iframe src="Happy Birthday Song.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
<audio autoplay loop id="playAudio">
<source src="Happy Birthday Song.mp3">
</audio>
</body>
</html>
javascript html
google-chrome appcelerator javascript html
google-chrome appcelerator asked Nov 17 '18 at 10:02
user264498user264498
236
asked Nov 17 '18 at 10:02
user264498user264498
236
asked Nov 17 '18 at 10:02
user264498user264498
236
asked Nov 17 '18 at 10:02
user264498user264498
236
asked Nov 17 '18 at 10:02
user264498user264498
236
236
2
why not you use onload event. It will fire after all images, scripts and CSS loaded. In onload function fired then you can play music.
– Sameer
Nov 17 '18 at 10:12
please give me an example. I do not know javascript. got this all from the internet.
– user264498
Nov 17 '18 at 10:39
add a comment |
2
why not you use onload event. It will fire after all images, scripts and CSS loaded. In onload function fired then you can play music.
– Sameer
Nov 17 '18 at 10:12
please give me an example. I do not know javascript. got this all from the internet.
– user264498
Nov 17 '18 at 10:39
2
2
why not you use onload event. It will fire after all images, scripts and CSS loaded. In onload function fired then you can play music.
– Sameer
Nov 17 '18 at 10:12
why not you use onload event. It will fire after all images, scripts and CSS loaded. In onload function fired then you can play music.
– Sameer
Nov 17 '18 at 10:12
please give me an example. I do not know javascript. got this all from the internet.
– user264498
Nov 17 '18 at 10:39
please give me an example. I do not know javascript. got this all from the internet.
– user264498
Nov 17 '18 at 10:39
add a comment |
2 Answers
2
active
oldest
votes
1
hi here is what I suggest you should do. First and foremost remove the autoplay attribute on the audio tag.
then you can use javascript or jquery to control when the audio plays. In your case you wants the audio to play when all assets are loaded..so here is an example..
//javascript
window.onload = function() {
document.getElementbyId("playAudio").play();
}
//jquery
$(document).ready(function() {
$("#my_audio").get(0).play();
});
if for any reason you still want some more delay let say 2seconds.. you can extend this further...
var myAudio = document.getElementById("playAudio");
//javascript
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 2000);
}
//jquery
$(document).ready(function() {
setTimeout(function(){
$("#my_audio").get(0).play();
}, 2000);
});
PS. Use any of the two. I remember you said you're not familiar when JS. Best of luck pal
answered Nov 17 '18 at 11:11
Samso IyandaSamso Iyanda
817
it worked. thank you. but I would like to add another 2-second delay.
– user264498
Nov 17 '18 at 11:28
then you can use setTimeout. You can change it to something like this.. var audio = document.getElementById("playAudio"); window.onload = function() { setTimeout(function(){ audio.play(); }, 2000); }
– Samso Iyanda
Nov 17 '18 at 11:40
@user264498 check for the update.. I edited the answer for your taste..
– Samso Iyanda
Nov 17 '18 at 11:49
Sorry to say but the delay is not working. I was creating a webpage for my girl. its almost midnight now. if you reply within 45 minutes i might get it working otherwise this is where it ends.
– user264498
Nov 17 '18 at 17:40
audio tag doesn't seem to be working in google chrome. have to sue iframe.
– user264498
Nov 17 '18 at 17:52
|
show 2 more comments
1
This is what I came up with. The following script adds a 3-second
<script type="text/javascript">
window.setTimeout(function () {
var iframe = document.getElementById('my_audio');
iframe.setAttribute('src', 'Happy Birthday Song.mp3');
}, 3000);
</script>
'my_audio' is the iframe id.
<iframe style="display:none" id="my_audio">
</iframe>
for your own music
iframe.setAttribute('src', 'your music here');
answered Nov 22 '18 at 11:48
user264498user264498
236
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53350158%2fadding-a-two-second-delay-into-background-music%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
hi here is what I suggest you should do. First and foremost remove the autoplay attribute on the audio tag.
then you can use javascript or jquery to control when the audio plays. In your case you wants the audio to play when all assets are loaded..so here is an example..
//javascript
window.onload = function() {
document.getElementbyId("playAudio").play();
}
//jquery
$(document).ready(function() {
$("#my_audio").get(0).play();
});
if for any reason you still want some more delay let say 2seconds.. you can extend this further...
var myAudio = document.getElementById("playAudio");
//javascript
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 2000);
}
//jquery
$(document).ready(function() {
setTimeout(function(){
$("#my_audio").get(0).play();
}, 2000);
});
PS. Use any of the two. I remember you said you're not familiar when JS. Best of luck pal
answered Nov 17 '18 at 11:11
Samso IyandaSamso Iyanda
817
it worked. thank you. but I would like to add another 2-second delay.
– user264498
Nov 17 '18 at 11:28
then you can use setTimeout. You can change it to something like this.. var audio = document.getElementById("playAudio"); window.onload = function() { setTimeout(function(){ audio.play(); }, 2000); }
– Samso Iyanda
Nov 17 '18 at 11:40
@user264498 check for the update.. I edited the answer for your taste..
– Samso Iyanda
Nov 17 '18 at 11:49
Sorry to say but the delay is not working. I was creating a webpage for my girl. its almost midnight now. if you reply within 45 minutes i might get it working otherwise this is where it ends.
– user264498
Nov 17 '18 at 17:40
audio tag doesn't seem to be working in google chrome. have to sue iframe.
– user264498
Nov 17 '18 at 17:52
|
show 2 more comments
1
hi here is what I suggest you should do. First and foremost remove the autoplay attribute on the audio tag.
then you can use javascript or jquery to control when the audio plays. In your case you wants the audio to play when all assets are loaded..so here is an example..
//javascript
window.onload = function() {
document.getElementbyId("playAudio").play();
}
//jquery
$(document).ready(function() {
$("#my_audio").get(0).play();
});
if for any reason you still want some more delay let say 2seconds.. you can extend this further...
var myAudio = document.getElementById("playAudio");
//javascript
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 2000);
}
//jquery
$(document).ready(function() {
setTimeout(function(){
$("#my_audio").get(0).play();
}, 2000);
});
PS. Use any of the two. I remember you said you're not familiar when JS. Best of luck pal
answered Nov 17 '18 at 11:11
Samso IyandaSamso Iyanda
817
it worked. thank you. but I would like to add another 2-second delay.
– user264498
Nov 17 '18 at 11:28
then you can use setTimeout. You can change it to something like this.. var audio = document.getElementById("playAudio"); window.onload = function() { setTimeout(function(){ audio.play(); }, 2000); }
– Samso Iyanda
Nov 17 '18 at 11:40
@user264498 check for the update.. I edited the answer for your taste..
– Samso Iyanda
Nov 17 '18 at 11:49
Sorry to say but the delay is not working. I was creating a webpage for my girl. its almost midnight now. if you reply within 45 minutes i might get it working otherwise this is where it ends.
– user264498
Nov 17 '18 at 17:40
audio tag doesn't seem to be working in google chrome. have to sue iframe.
– user264498
Nov 17 '18 at 17:52
|
show 2 more comments
1
1
1
hi here is what I suggest you should do. First and foremost remove the autoplay attribute on the audio tag.
then you can use javascript or jquery to control when the audio plays. In your case you wants the audio to play when all assets are loaded..so here is an example..
//javascript
window.onload = function() {
document.getElementbyId("playAudio").play();
}
//jquery
$(document).ready(function() {
$("#my_audio").get(0).play();
});
if for any reason you still want some more delay let say 2seconds.. you can extend this further...
var myAudio = document.getElementById("playAudio");
//javascript
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 2000);
}
//jquery
$(document).ready(function() {
setTimeout(function(){
$("#my_audio").get(0).play();
}, 2000);
});
PS. Use any of the two. I remember you said you're not familiar when JS. Best of luck pal
answered Nov 17 '18 at 11:11
Samso IyandaSamso Iyanda
817
hi here is what I suggest you should do. First and foremost remove the autoplay attribute on the audio tag.
then you can use javascript or jquery to control when the audio plays. In your case you wants the audio to play when all assets are loaded..so here is an example..
//javascript
window.onload = function() {
document.getElementbyId("playAudio").play();
}
//jquery
$(document).ready(function() {
$("#my_audio").get(0).play();
});
if for any reason you still want some more delay let say 2seconds.. you can extend this further...
var myAudio = document.getElementById("playAudio");
//javascript
window.onload = function() {
setTimeout(function(){
myAudio.play();
}, 2000);
}
//jquery
$(document).ready(function() {
setTimeout(function(){
$("#my_audio").get(0).play();
}, 2000);
});
PS. Use any of the two. I remember you said you're not familiar when JS. Best of luck pal
answered Nov 17 '18 at 11:11
Samso IyandaSamso Iyanda
817
edited Nov 17 '18 at 11:48
answered Nov 17 '18 at 11:11
Samso IyandaSamso Iyanda
817
answered Nov 17 '18 at 11:11
Samso IyandaSamso Iyanda
817
answered Nov 17 '18 at 11:11
Samso IyandaSamso Iyanda
817
817
it worked. thank you. but I would like to add another 2-second delay.
– user264498
Nov 17 '18 at 11:28
then you can use setTimeout. You can change it to something like this.. var audio = document.getElementById("playAudio"); window.onload = function() { setTimeout(function(){ audio.play(); }, 2000); }
– Samso Iyanda
Nov 17 '18 at 11:40
@user264498 check for the update.. I edited the answer for your taste..
– Samso Iyanda
Nov 17 '18 at 11:49
Sorry to say but the delay is not working. I was creating a webpage for my girl. its almost midnight now. if you reply within 45 minutes i might get it working otherwise this is where it ends.
– user264498
Nov 17 '18 at 17:40
audio tag doesn't seem to be working in google chrome. have to sue iframe.
– user264498
Nov 17 '18 at 17:52
|
show 2 more comments
it worked. thank you. but I would like to add another 2-second delay.
– user264498
Nov 17 '18 at 11:28
then you can use setTimeout. You can change it to something like this.. var audio = document.getElementById("playAudio"); window.onload = function() { setTimeout(function(){ audio.play(); }, 2000); }
– Samso Iyanda
Nov 17 '18 at 11:40
@user264498 check for the update.. I edited the answer for your taste..
– Samso Iyanda
Nov 17 '18 at 11:49
Sorry to say but the delay is not working. I was creating a webpage for my girl. its almost midnight now. if you reply within 45 minutes i might get it working otherwise this is where it ends.
– user264498
Nov 17 '18 at 17:40
audio tag doesn't seem to be working in google chrome. have to sue iframe.
– user264498
Nov 17 '18 at 17:52
it worked. thank you. but I would like to add another 2-second delay.
– user264498
Nov 17 '18 at 11:28
it worked. thank you. but I would like to add another 2-second delay.
– user264498
Nov 17 '18 at 11:28
then you can use setTimeout. You can change it to something like this.. var audio = document.getElementById("playAudio"); window.onload = function() { setTimeout(function(){ audio.play(); }, 2000); }
– Samso Iyanda
Nov 17 '18 at 11:40
then you can use setTimeout. You can change it to something like this.. var audio = document.getElementById("playAudio"); window.onload = function() { setTimeout(function(){ audio.play(); }, 2000); }
– Samso Iyanda
Nov 17 '18 at 11:40
@user264498 check for the update.. I edited the answer for your taste..
– Samso Iyanda
Nov 17 '18 at 11:49
@user264498 check for the update.. I edited the answer for your taste..
– Samso Iyanda
Nov 17 '18 at 11:49
Sorry to say but the delay is not working. I was creating a webpage for my girl. its almost midnight now. if you reply within 45 minutes i might get it working otherwise this is where it ends.
– user264498
Nov 17 '18 at 17:40
Sorry to say but the delay is not working. I was creating a webpage for my girl. its almost midnight now. if you reply within 45 minutes i might get it working otherwise this is where it ends.
– user264498
Nov 17 '18 at 17:40
audio tag doesn't seem to be working in google chrome. have to sue iframe.
– user264498
Nov 17 '18 at 17:52
audio tag doesn't seem to be working in google chrome. have to sue iframe.
– user264498
Nov 17 '18 at 17:52
|
show 2 more comments
1
This is what I came up with. The following script adds a 3-second
<script type="text/javascript">
window.setTimeout(function () {
var iframe = document.getElementById('my_audio');
iframe.setAttribute('src', 'Happy Birthday Song.mp3');
}, 3000);
</script>
'my_audio' is the iframe id.
<iframe style="display:none" id="my_audio">
</iframe>
for your own music
iframe.setAttribute('src', 'your music here');
answered Nov 22 '18 at 11:48
user264498user264498
236
add a comment |
1
This is what I came up with. The following script adds a 3-second
<script type="text/javascript">
window.setTimeout(function () {
var iframe = document.getElementById('my_audio');
iframe.setAttribute('src', 'Happy Birthday Song.mp3');
}, 3000);
</script>
'my_audio' is the iframe id.
<iframe style="display:none" id="my_audio">
</iframe>
for your own music
iframe.setAttribute('src', 'your music here');
answered Nov 22 '18 at 11:48
user264498user264498
236
add a comment |
1
1
1
This is what I came up with. The following script adds a 3-second
<script type="text/javascript">
window.setTimeout(function () {
var iframe = document.getElementById('my_audio');
iframe.setAttribute('src', 'Happy Birthday Song.mp3');
}, 3000);
</script>
'my_audio' is the iframe id.
<iframe style="display:none" id="my_audio">
</iframe>
for your own music
iframe.setAttribute('src', 'your music here');
answered Nov 22 '18 at 11:48
user264498user264498
236
This is what I came up with. The following script adds a 3-second
<script type="text/javascript">
window.setTimeout(function () {
var iframe = document.getElementById('my_audio');
iframe.setAttribute('src', 'Happy Birthday Song.mp3');
}, 3000);
</script>
'my_audio' is the iframe id.
<iframe style="display:none" id="my_audio">
</iframe>
for your own music
iframe.setAttribute('src', 'your music here');
answered Nov 22 '18 at 11:48
user264498user264498
236
answered Nov 22 '18 at 11:48
user264498user264498
236
answered Nov 22 '18 at 11:48
user264498user264498
236
answered Nov 22 '18 at 11:48
user264498user264498
236
236
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53350158%2fadding-a-two-second-delay-into-background-music%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
why not you use onload event. It will fire after all images, scripts and CSS loaded. In onload function fired then you can play music.
– Sameer
Nov 17 '18 at 10:12
please give me an example. I do not know javascript. got this all from the internet.
– user264498
Nov 17 '18 at 10:39