We Keep Coding

navigator.vibrate not working in mobile devices even?

I want to vibrate mobile device which supports vibration. using this nothing happens in three mobile devices I tested:
const vibrate = document.getElementById('vibrate')
vibrate.addEventListener('click', event => {
navigator.vibrate(200);
});
<button id="vibrate">vibrate</button>
What's wrong here? how can I fix this?

It's different on some devices. For the events that have isTrusted set to true, you can use Navigator Vibration. In some devices, click event is not trusted so we can use an alternate event which is pointerDown. I tested out this event on redmi note 10 and worked correctly. Read moreNote that it might still don't work on some devices.
const vibrate = document.getElementById('vibrate')
vibrate.addEventListener('pointerdown', event => {
navigator.vibrate(200);
});
<button id="vibrate">vibrate</button>

Why forcing desktop site in Mobile device recognizes the mobile as a desktop in userAgent.match?

My code looks okay and works fine. But when I force desktop site on chrome Android, it gets the function and executes the function supposed to work on only desktop or not mobile/tablet devices. Why the navigator.userAgent.match is working like desktop in mobile? Please help me.
JAVASCRIPT
function upme()
{
var isdesk = !(navigator.userAgent.match(/iphone|ipod|android|blackberry|opera|mini|windows phone|palm|smartphone|mobile|phone|iemobile|ipad|webos|xoom|sch-i800|playbook|tablet|kindle/i));
// event listeners
window.addEventListener('resize', relod, false);
function relod()
{
if(isdesk)
{
location.reload();
}
}
window.addEventListener('scroll', doso, false);
window.addEventListener('resize', doso, false);
function doso()
{
if(window.matchMedia("(min-width: 765px)").matches && isdesk)
{
document.getElementById("last-dab").style.visibility = "visible";
}
}
}
So the function should be working on desktop devices for the isdesk condition check. But when forcing desktop site option on chrome breaks everything by doing jittery behavior and the function gets done/executed in mobile, which should not happen. What is wrong?
Can I detect if the force desktop site is enabled or not using javascript. If so please provide a JavaScript solution.

Audio is still playing while minimize iPad browser safari

I have developed game is html5,Jquery, Javascript where I need to preload several audios. These audios are playing one by one but, when I minimize iPad then audio is still paying.
Can any body help to pause an audio while browser is going to minimize. And audio should play when browser comes to foreground.

I'm about halfway there to getting you a full solution. Here's what I have so far:
var audio = document.getElementsByTagName('audio')[0];
window.onpageshow = function() {
audio.play();
}
window.onpagehide = function() {
audio.pause();
}
So, as long as your on the app tab when you close Safari, it will pause the audio. And play it when you start back up. It doesn't stop when you change tabs.
If your app is apple-mobile-web-app-capable, this will trigger onpageshow when you open the app using the homescreen button, and will pause it when you close it. It doesn't pause exactly, since opening it back up forces it to start from the beginning. You'd have to capture where you were in the track using localStorage or something and then set the currentTime to that when you open it back up.
Looks like you'll be able to use the Visibility API in iOS 7 according to caniuse.com
Just for history's sake, I'm going to at least state some other things I tried.
window.onblur
using requestAnimationFrame with a setTimeout (this worked on desktops, but not iOS)
var t;
requestAnimationFrame(function checkWindow() {
if ( audio.paused ) {
audio.play();
}
clearTimeout(t);
t = setTimeout(function() {
audio.pause();
}, 32);
});

I recommend you use the page visibility API, which gives you an event that tells you when a page's visibility changes.
function handleVisibilityChange() {
if (document.hidden){
stopAllSounds();
}else{
playAllSounds();
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
stopAllSounds and playAllSounds will be defined as you see fit, but this event will fire when Safari is minimized and maximized. It works on Android devices and all modern platforms

Hopefully I am not late to answer it. I found the following solution which works in desktop and ios devices (haven't checked in android yet)
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
// do work
your_audio.pause();
break;
case "focus":
// do work
your_audio.play();
break;
}
}
$(this).data("prevType", e.type);
})
PS: your_audio is a variable, you have to define it.
I found this solution here

AppMobi, html5 sound working on simulator and android but not in iphone

Today I get started in appmobi. I was developing a small example to deal with sounds.
I just needed to create a handler to play and stop many sounds.
var audioOn = new Audio('sounds/11.mp3');
audioOn.play();
This code is working in the xdk simulator, also on android devices, but not in my Iphone 5.
The thing is, if I use tag it works on iphone, but I want to use javascript native api to deal with sounds and more.
I have been trying to deal with it with appmobi player library but it comes without controls to stop, resume etc, thats way I want to use native.
Here is part of javascript code :
<script type="text/javascript">
/* This function runs once the page is loaded, but appMobi is not yet active */
var init = function(){
var alarmButton = document.getElementById("alarmButton");
var on = false;
//var audioOn = new Audio('http://rpg.hamsterrepublic.com/wiki-images/3/3e/Heal8-Bit.ogg');
var audioOn = new Audio('sounds/11.mp3');
audioOn.addEventListener('ended', function() {
this.play();
}, false);
var but = function(){
alert("but");
alert(on);
alert(audioOn);
if(!on){
on = true;
audioOn.currentTime = 0;
audioOn.play();
}
else{
on = false;
audioOn.pause();
}
}
//alarmButton.addEventListener("click",but,false);
alarmButton.addEventListener("touchstart",but,false);
alarmButton.addEventListener("tap",but,false);
};
window.addEventListener("load",init,false);
/* This code prevents users from dragging the page */
var preventDefaultScroll = function(event) {
event.preventDefault();
window.scroll(0,0);
return false;
};
document.addEventListener('touchmove', preventDefaultScroll, false);
/* This code is used to run as soon as appMobi activates */
var onDeviceReady=function(){
//Size the display to 768px by 1024px
AppMobi.display.useViewport(768,1024);
//hide splash screen
AppMobi.device.hideSplashScreen();
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
function echo(){
alert("clicked");
}
</script>
Thanks a lot

It seems like its not appmobi issue.
I think appmobi lab app for iphone uses safari mobile to run the html5 tests.
So its a safari mobile affair.
It seems play() work when launched by an onclick event. See http://groups.google.com/group/iphonewebdev/browse_thread/thread/91e31ba7ae25e6d4?hl=en
Need to perform some tests...

I have to try this:
http://www.schillmania.com/projects/soundmanager2/
Supporting HTML5 audio can be tedious in modern browsers, let alone
legacy ones. With real-world visitors using browsers ranging from
mobile Safari to IE 6 across a wide range of devices, there can be
many support cases to consider.
SoundManager 2 gives you a single, powerful API that supports both new
and old, using HTML5 audio where supported and optional Flash-based
fallback where needed. Ideally when using SoundManager 2, audio "just
works."

How do I capture keyboard events while watching an HTML5 video in fullscreen mode?

I need to know when the user presses the escape key when watching an HTML5 video in fullscreen mode. Unfortunately any configured listeners on the document don't apply since when the user is watching an HTML5 video in fullscreen mode the system focus is on the native video player rather than the browser.
An alternative is listening for when focus reverts back from the native video player to the browser, but I'm unsure as to how I would capture this.
document.addEventListener('keydown', function (e) { console.log(e.keyCode); }, false);
The above successfully logs to the console when I press keys so long as I'm in the browser. As soon as an HTML5 video enters fullscreen mode, the browser obviously can no longer log key codes to the console.
What I'm trying to do is transition from one UI to another after exiting fullscreen mode.
EDIT
Potench's answer was useful as a starting point which is why I accepted it as that answer despite the following caveats:
It only works in Webkit browsers. :-)
As originally defined it does not work since video.webkitDisplayingFullscreen is true whenever the resize event fires.
I got this to work - only on Webkit browsers - by tapping into animation frames to constantly watch for the change in value:
var onFrame, isVideoFullscreen;
onFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (fn) {
setTimeout(fn, 1000 / 60);
};
isVideoFullscreen = false;
function frame() {
if (!isVideoFullscreen && video.webkitDisplayingFullscreen) {
// entered fullscreen mode
isVideoFullscreen = true;
} else if (isVideoFullscreen && !video.webkitDisplayingFullscreen) {
// exited fullscreen mode
isVideoFullscreen = false;
}
onFrame(frame);
}
onFrame(frame);

Ok I think I have a solution for you... I'm just going to assume you use jQuery for ease of writing this code.
I don't believe you'll be able to capture keyboard events while in Fullscreen mode... but you could do this to get notified when you enter or exit fullscreen mode.
var isVideoFullscreen = video.webkitDisplayingFullscreen;
$(window).bind("resize", function (e) {
// check to see if your browser has exited fullscreen
if (isVideoFullscreen != video.webkitDisplayingFullscreen) { // video fullscreen mode has changed
isVideoFullscreen = video.webkitDisplayingFullscreen;
if (isVideoFullscreen) {
// you have just ENTERED full screen video
} else {
// you have just EXITED full screen video
}
}
});
Hope this helps or points you in the right direction