I have a sample with HTML5 element. I need dynamically create audio element after ajax request and play it. But it doesn't work on mobile! Android 4.1 and IOS7. It works perfect on desktop!
It doesn't work after page load. But it works after press buttom and after press button play on control. Why?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function play() {
var audio = document.createElement('audio');
audio.autoplay = true;
audio.controls = true;
audio.src='http://s3.amazonaws.com/audiojs/02-juicy-r.mp3';
document.body.appendChild(audio);
audio.play();
}
setTimeout(play, 1000);
</script>
</head>
<body>
<h1>test</h1>
<input type='button' value='Press Me' onclick='play()' />
</body>
</html>
I had the same experience where audio wouldn't play after an AJAX call. I guess it has to do with security settings on mobile. Mobile browsers behave differently. The same happens when trying to call up the keyboard on mobile. It is only possible after a keypress or a click event but not automatically on page load or after an Ajax call.
One solution that I used might be to trigger the sound outside of the Ajax call, in the event that triggered the Ajax call in the first place.
Related
I'm trying to learn the Web Audio API from the MDN tutorial but even the most basic example — no modular synthesis, just playing a simple mp3 file — doesn't seem to work on my end.
I can see the dataset value being switched in the console, the play/pause on the controls change state, and in Firefox and Safari (but not in Chrome) the track locator even advances and the "playing" icon displayed on the browser tab.
(I've added the controls attribute to the audio tag just to have a progress indicator visible).
I can also download the file from the DOM controls and play it using the OS, and I've tried it with three different MP3 files. The computer's speakers are obviously working.
BTW, creating audio with oscillators and the AudioContext object works fine.
I'm out of ideas.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio controls src="song.mp3"></audio>
<button data-playing="false" role="switch" aria-checked="false">
<span>Play/Pause</span>
</button>
<script src="audio.js"></script>
</body>
</html>
JS
'use-strict'
const aCtx = new AudioContext();
const el = document.querySelector('audio');
const track = aCtx.createMediaElementSource(el);
const button = document.querySelector('button');
button.addEventListener('click', function() {
console.log(this);
if (aCtx.state === 'suspended') {
aCtx.resume();
}
if (this.dataset.playing === 'false') {
el.play();
this.dataset.playing = 'true';
} else {
el.pause();
this.dataset.playing = 'false';
}
}, false);
I have a question we must have seen many a time that when we are about to close the window and Just hover mouse over the cross on Browser Tab, a pop up appears asking for us to subscribe or highlighting some coupon. This Functionality is based on which feature of the browser, does it exploits some PHP code or some artificial intelligence.
It is run on client-side as everything that interact with user interface.
The example bellow shows how to do this with pure javascript (not tested with all browsers, but works well with Chrome)
<!DOCTYPE html>
<html>
<head>
<title>Page exit example</title>
<script type="text/javascript">
var showMessage = true;
window.onmouseout = function(){
if(showMessage){
showMessage = false;
document.getElementsByTagName('body')[0].innerHTML = "Dont leave yet!";
}
};
</script>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
I'm having following problem. I have following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Me test site</title>
</head>
<body>
Click Me
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
var handler = function codeclick(event) {
var link_new = $('a').attr('co-target');
if (link_new) {
window.open(link_new, '_blank');
}
}
$('a').bind('click.codeclick', handler);
});
</script>
</body>
</html>
You can see it in action here
The expected behaviour on desktop is that the page in co-target attribute is opened in new tab/window and the one in href attribute is opened in current tab.
On internal mobile facebook browser it should open just the co-target attribute page (intended). But on Google mobile iOS app it opens the page in href attribute (unintended).
Does anyone encountered similar problem before and maybe have some clues what should I do to make it right? There is no need that the page in co-target has to open. I just want it that on both facebook and google app it open one of it, not different one in each.
The aim is that when the page is loaded, an onload call to a function will be made and inside this function will be an input type which will access a devices camera.
How can i call an input type inside a JavaScript function?
<!DOCTYPE HTML>
<html>
<head>
<title>Take Picture</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript">
function getPic()
{
<input type="file" id="takePic" style="display: none;" accept="image/*;capture=camera">
}
</script>
</head>
<body onload="getPic()">
EDIT : The line of code below allows access to the device's camera, which works fine.
<input type="file" id="takePic" accept="image/*;capture=camera">
basically what i want is, when the page loads, it automatically clicks the choose file button from the above piece of code. I assumed the best way to do this was by JS. I may be wrong.
I have very little knowledge of JS so i came here for help after finding little on the net.
If you want to add input in body use document.write
function getPic()
{
document.write('<input type="file" id="takePic" style="display: none;" accept="image/*;capture=camera">');
}
If you want to access that input use getElementById().
document.getElementById('takePic')
If your goal is taking a snapshot from a webcam, you might be better off using the navigator.getUserMedia() API.
See this page for details: http://www.html5rocks.com/en/tutorials/getusermedia/intro/
It's unsupported in IE and Safari, but works in current versions of Firefox, Chrome and Opera: http://caniuse.com/#feat=stream
I was using phonegap and needed to use 'touchstart' to speed up click response, only to realize that none of 'touchstart', 'touchmove', 'touchend' is firing but 'click'.
I even tested a simple page in the built-in browser (7" android 4.0.3 tablet), and found it failed.
I tested on two tablets still the same.
In the following page, button2 shows only 'html_click', button3 shows only 'click':
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
<title>Droid touch event test.</title>
</head>
<body>
<button id="button">touch it</button>
<button id="button2" ontouchstart="d_('html_touchstart')" onclick="d_('html_click')">html</button>
<button id="button3">touch 3</button>
<div id="db"></div>
<script>
function $(d){return document.getElementById(d)}
function d_(m){dbo.innerHTML=dbo.innerHTML+' '+m}
function ts1(e){d_('document touched')}
function ts2(e){d_('button touched')}
function eh(e){
d_(e.type);
}
var ets='touchstart',dbo=$('db');
document.addEventListener(ets,ts1,false);
$('button').addEventListener(ets,ts2,false);
$('button3').addEventListener(ets,eh,false);
$('button3').addEventListener('touchend',eh,false);
$('button3').addEventListener('click',eh,false);
</script>
</body>
</html>
Why 'touchstart isn't firing? Should I do anything to make touch events work?
Or is there any other way around to make click response faster?
I used mousedown event, worked but not notably fast.
(new Date()).getTime() difference (including some innerHTML change) between mousedown and click is only around 15.
Keeping only what was necessary to show you the concept, I wrote this and tested using Phonegap Build (default to Phonegap 2.0, but shouldn't matter) on an ICS device. Should work for you:
<!DOCTYPE html>
<html>
<body>
<button id="button1">1</button>
<button id="button2">2</button>
<script>
document.getElementById("button1").addEventListener('touchstart',button1Pressed);
document.getElementById("button2").addEventListener('touchstart',button2Pressed);
function button1Pressed ()
{
alert('Button 1 Pressed');
}
function button2Pressed ()
{
alert('Button 2 Pressed');
}
</script>
</body>
</html>
I also faced the same problem. On bellow first line i was getting error "Android WebView and NO_FAST_DRAW = false". After change to second line. it worked. the error was at createCustomAlert('wpt'). SO the function which I was called look like a string. This err was coming. So please check at place of function calling place
onclick = 'createCustomAlert('wpt')'
onclick = 'createCustomAlert(3)'
I also faced the same problem and messed it with almost three days. I put click events on my html input tags, (EditText) and tried, but it also didn't work. Finally, to my miracle, I just put a simple alert("Hello") to see with ontouchstart. To my surprise, I successfully got the alert and also softkeyboard, for which I was trying almost a week. You also try with this..
Best of Luck