I want to be able to play sound on HTML page using JavaScript when some event happens.
Basically I want to get data from server using AJAX and then if it is something specific, then play sound.
It works great on PC browsers, but I have issues making it work on Safari (iOS) and Chrome (Android). I read that to play sound on Chrome (I guess Safari also), this needs to be triggered by some user event (gesture, click, etc.). So here is my SIMPLIFIED code:
<!DOCTYPE HTML>
<head>
<meta http-equiv="refresh" content="7" />
</head>
<body>
<button onclick="playSound()" id="button">Click me</button>
<script>
window.setInterval(function(){
parent.document.getElementById('button').click();
}, 5000);
function playSound() {
var audio = new Audio('http://www.soundjay.com/button/beep-01a.wav');
audio.play();
}
</script>
</body>
</html>
I thought this workaround will work (trigger click event using JS), but still no sound.
One additional thing is that I want to AJAX code every few seconds and even when phone is BLOCKED. I found this solution (and applied my changes from previous try):
background.html:
<!DOCTYPE HTML>
<head>
<meta http-equiv="refresh" content="3" />
</head>
<body>
<script>
parent.run_function_from_core_page();
</script>
</body>
</html>
In index.html:
<iframe src="background.html" style="display:none;"></iframe>
But again, works great on PC, but no sound on either Chrome mobile and Safari mobile.
Any suggestions? Is that even possible?
Related
For the simple html and js code snippet, the action differ from firefox and chrome.
The simple html and js code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<head>
<title>test welcome</title>
<script>
document.write("welcome1")
alert("welcome2")
</script>
<body>
<h3>welcome3</h3>
</body>
</head>
</body>
</html>
1.Open it with firefox.
To click the ok in alert.
The executing order is : welcome1 ,welcome2,welcome3.
2.Open it with chrome.
To click the ok in alert.
The executing order is : welcome2 ,welcome1,welcome3.
Why chrome parse the simple html and js code that way?
How to make chrome behave such the same way as firefox do?
All browsers will stop execution when an alert is encountered, however, Firefox will not halt rendering for alerts. This is primarily due to the vagueness of the standard, ECMA, who writes the ECMAscript standard (upon which Javascript is built) does not mention window.alert(), as it is specific to Javascript, meaning browsers are free to implement it however they like, and they do.
You can force the popup to occur after page load with something like this <body onload="window.alert('Hello World')">, or using the defer attribute.
I am trying to use Skype for business URIs to open on an IPad from safari browser. But whenever I click on link its not showing popup for opening Skype for business app. It's working fine for chrome and other browsers on IPad, but not for safari. Here is the code for it:
<!DOCTYPE html>
<html>
<head>
<script>
function myfunction() {
window.open("sip:","_self")
}
</script>
</head>
<body>
IM for desktop
</body>
</html>
I am completely stumped and I'm sure this was working before.
I have a simple web page with the word "hello" in a div which does two things onload:
1) alert "2"
2) change the text of the div to "bye"
All vanilla Javascript, no libraries.
This works fine on the Chrome, IE, FF, Safari (as you'd expect). If I hit a link in the iOS Twitter app (latest version) to this web page neither of those two things happen. It seems to me that the Javascript is not being executed at all but how can this be? Has anyone else experienced this?
UPDATE
In fact vanilla Javascript will work. The alert test was misleading - I believe thats been disabled which is why it won't work. JQuery will not work however - possibly to do with the $ reference conflicting.
UPDATE 2
The problem has moved on now - my initial assumptions were not entirely correct.
The following code for a web page works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
The following code does not work. The path to my script is sound and works on normal browsers, but when in the iOS Twitter in-app browser it seems the local script will not load:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="~/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
I have tested the issue on accessing the webpage via Facebook which also works fine either way. The problem is with the Twitter browser only on iOS.
I have tried using an absolute path to my script which also does not work.
UPDATE
This issue is not on iPad. It is iPhone only. As it was working before fine I'd say this is a bug from the latest release of the iPhone Twitter app. Will wait for a fix from Twitter.
Turned out to be that I was re-writing all requests from Twitter to a pre-rendered html instance (brombone). So when it was looking for that file it was actually looking at the brombone server not mine. I took out the rewrite and its fine now.
Completely unrelated to what I was going on about but I solved it nonetheless and may be a reminder to those with similar problems to look outside of the box and check server setups etc...
I'm working on a website in HTML5 CSS3 but I can't make my processing sketch work on other browsers than firefox.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<script type="javascript" src="processing.js"></script>
</head>
<body>
<canvas data-processing-sources="accueil.pde"></canvas>
</body>
</html>
Just answering if someone have the same error than me:
Processing sketchs work only in firefox browser if you're in localhost.
If you want to try it on other browser you need to host your website.
guys!
We are developing a realy simple web page.
But, touch events can't work in iOS8's Safari if we use iframe and web clip.
We don't know why.
Hear is our code.
And, we use web clip.
Even if we touch the div(id="hoge"), the alert doesn't appear.
Please help us...
・index.html
<!DOCTYPE html>
<html>
<body>
<div id="hoge">ABC</div>
<script>
document.getElementById("hoge").addEventListener('touchstart', function() { alert('Touch');});
</script>
</body>
</html>
・frame.html
<!DOCTYPE html>
<html>
<body>
<iframe src="./index.html"/>
</body>
</html>