The code:
x = new Audio("bar.wav")
x.play()
alert("foo")
Why does the alert box show up first and then then sound is played??
That's because the sound file is loaded asynchronously by JavaScript and then the code continues to execute. The alert fires first because it takes a while to load the sound file.
To fix it, you need to add an event listener on load, like so:
x.addEventListener('load', function() {
x.play();
alert("foo");
});
Or you could add the event listener to the onplay event, like so:
x.onplay = function () { alert("foo"); };
x.play();
You should wait for the playing event. Thats when the sound actually starts playing.
But just an advice that alert boxes pause code execution and could really mess up with sound.
x = new Audio("bar.wav")
x.onplaying = function ()
{
alert("foo");
}
x.play();
EDIT: on this post, a onloadeddata event is used, its more intesting than the example below, but i havent tested it: HTML5 Audio events not triggering on Chrome
--
As you can't assign an onload event, you have to do this:
$(function(){
youraudioelement = new Audio("bar.wav")
var audioReady = function(){
if (youraudioelement.attr('readyState')) {
alert("foo");
} else {
setTimeout(audioReady, 250);
}
}
audioReady();
}
HTML5 Audio onLoad
Just use :
x.onended = function () { alert("foo"); };
x.play();
Related
I am trying to set a delay on the mousedown (click) which focuses the newWin.focus in code below:
So in short, the code below works fine. If the popup window is open, it re-focuses on it (bringing it back front) when the user clicks anywhere on the page.
I would like to have a 2 second delay when the user clicks on the page, THEN have it refocus on the new window.
I have spent hours trying to figure this out to no avail using various settimeout's here and there. So, I thought I would show what I have that works and hope someone might explain how my need can be accomplished.
PS: I am still learning my way around javascript and in NO WAY consider myself knowledgeable in the subject.
Thanks in advance!!
<script type="text/javascript">
var newWin;
function openPopup()
{
newWin=window.open('https://www.somesite/url.php','window','width=400,height=600,scrollbars=0,resizable=1,top=300,left=300');
document.onmousedown=focusPopup;
document.onkeyup=focusPopup;
document.onmousemove=focusPopup;
}
function focusPopup(){
if(!newWin.closed){
newWin.focus();
}
}
</script>
You can add a setTimeout to your mousedown handler:
document.onmousedown = () => setTimeout(focusPopup, 2000);
<script type="text/javascript">
var newWin;
function openPopup()
{
newWin=window.open('https://www.somesite/url.php','window','width=400,height=600,scrollbars=0,resizable=1,top=300,left=300');
document.onmousedown=()=>{
setTimeout(focusPopup,2000)
};
document.onkeyup=focusPopup;
document.onmousemove=focusPopup;
}
function focusPopup(){
if(!newWin.closed){
newWin.focus();
}
}
</script>
Just use setTimeout to add the delay.
The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires.
var newWin;
function openPopup() {
newWin = window.open('https://www.somesite/url.php', 'window', 'width=400,height=600,scrollbars=0,resizable=1,top=300,left=300');
document.onmousedown = function() {
setTimeout(focusPopup, 2000);
};
document.onkeyup = focusPopup;
document.onmousemove = focusPopup;
}
function focusPopup() {
if (!newWin.closed) {
newWin.focus();
}
}
I'm trying to write a script that simulates a click on a certain button on page. I tried using window.onload but it doesn't work. It seems to me that the problem is that when my script starts executing, the element I want to interact with doesn't exist yet. How can I do that?
Here is what I tried:
window.onload = function() {
document.getElementsByTagName('story')[0].onload = function() {
document.getElementsByTagName('story')[0].click();
};
};
Set click() in a recursive function that uses setTimeout()
window.onload = function() {
function findButton(){
setTimeout(function(){
let btn = document.getElementsByTagName('story')[0]
if(!btn){
findButton()
}else{
btn.click()
}
}, 300)
}
findButton()
}
I have following method which execute a video clip and on progress of the video clip it does one alert, after that alert it was suppose to close the listener but it is not ending the event listener as a result the alert keep showing forever like infinite.
Is this a BUG? or there is something missing in my following code?
function video_present(input) {
$('#mediaplayer').prop('loop', false);
$('#mediaplayer').attr('src', filename).show();
mediaplay_video= document.getElementById('mediaplayer');
mediaplay_video.play();
// STOP repeating??
mediaplay_video.addEventListener('timeupdate', function() {
var sss = parseInt(mediaplay_video.currentTime % 60);
show_second();
}, false);
}
// kill Event after 1 time execute of this
function show_second() {
alert('I was executed - stop me now if you can??');
mediaplay_video.removeEventListener('timeupdate', function() {
alert('I am killed, but why am i again getting called???');
});
}
video_present('Terminator_10.webm');
The second argument to removeEventListener is the listener function itself. If you do not pass the same argument as with addEventListener, it will not be removed. Use a named function or a function variable to ensure the same function object is used in both places:
function handleTimeUpdate() {
var sss = parseInt(mediaplay_video.currentTime % 60);
show_second();
}
mediaplay_video.addEventListener('timeupdate', handleTimeUpdate, false);
...
mediaplay_video.removeEventListener('timeupdate', handleTimeUpdate);
Problem: I have a asp.net button and on click of that I am displaying another window using window.open() at the client side using <script></script>
"I actually, need a popup (alert message) to be displayed on my parent page where my button is located once the user closes the child window."
Couple of things I tried are as follows:
I tried using setTimeOut() to have a time out for some milliseconds. This does not work as the control is not waiting until the time out is complete. It just proceeds to execute next set of code.
I tried using setInterval() but for some reason it is not working for me. Below is the code snippet of that:
$(document).ready(function () {
$('#<%=btnClick.ClientID%>').bind('click', function () {
var newWindow = window.open("http://www.google.com/", "google", 'resizable=1,width=900,height=800,scrollbars=1', '_blank');
newWindow.moveTo(0, 0);
var test = setInterval(function (e) {
if (newWindow.closed) {
alert("HEYY");
clearInterval(test);
__doPostBack("<%= btnClick.UniqueID %>", "");
}
else {
e.preventDefault();
}
}, 5000);
});
});
.
I also tried making an ajax call to open the new window and make it async : false, it again did not help me.
Bring your window and timer variable out of scope of the event handler. You need to do a polling i.e. periodically keep on checking if the windows has been closed. Using setInterval to do a polling will do the job.
var newWin, pollTimer;
$('#btnId').bind('click', function () {
newWin = window.open("...", "...", "");
pollTimer = window.setInterval(function() {
if (newWin.closed) {
window.clearInterval(pollTimer);
callCodeWhenPopupCloses();
}
}, 5000);
});
function callCodeWhenPopupCloses() {
alert("Popup closed.");
...
}
My javascript:
function onYouTubePlayerReady()
{
playerObj = document.getElementById("player_embed");
playerObj.addEventListener("onStateChange", test);
// Make sure the document is loaded before any DOM-manipulation
$(document).ready(function() {
// Update player information every 500ms
setInterval(updatePlayerInfo, 500);
});
}
function test(newState)
{
alert(newState);
}
My videos are loaded correctly and I can control fine them through my javascript. However the onStateChange event never seems to trigger. It never comes up with an alert when I'm playing/stopping/pausing videos etc. Anyone with a solution/similar problem?
You must pass the function name as a string to addEventListener.
playerObj.addEventListener("onStateChange", "test");
This format is for JQuery but the logic is same, create a function inside onYouTubePlayerReady to pass the playerId
$(document).ready(function() {
onYouTubePlayerReady = function(playerId) {
eventHandler=function(state){onStateChangeID(state,playerId);}
playerObj = document.getElementById("player_embed");
playerObj.addEventListener('onStateChange','eventHandler',false);
}
onStateChangeID=function(newState,playerId) {
console.log("onStateChange: ("+playerId+") " + newState);
}
});