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>
Related
The code below works fine on desktop browsers (plays music). But when I try to open the site on any mobile device it doesn't work.
var music = new Audio("mscs/gamemusic.mp3");
function playmusic() {
music.controls = false;
music.loop = false;
music.autoplay = true;
document.body.appendChild(music)
}
I use it in a function when game starts:
function createnewgame() {
...
playmusic();
...
...
}
Does anyone know what's wrong?
Well, this is clearly a browser support issue. According to caniuse, the <audio> element (and js' Audio object is an interface used for it) has known support issues, including
iOS and Chrome on Android do not support autoplay as advised by the specification
and others. Not sure if this can be overcome by some library but since the limitation of autoplay was introduced by design, I wouldn't count on workarounds...
Instead of adding the var "music" to html body, you can try playing the audio directly from JavaScript.
function playmusic() {
music.play();
}
Some mobile browsers support automatic playback of audio, but ios, chrome and others require interactive actions to trigger the sound playback.You can try working with the mute attribute...enter link description here
jfiddle link
expected behavior (as performed on pc/windows browser): h1 header "gif" disappears and video plays
mobile behavior: gif does not disappear- but video does play (so js is firing)
why doesn't the display toggle work on mobile (android) chrome the way it does in windows chrome?
relivant code:
this.play();
this.removeAttribute("controls"); //works
//h1.style.display="none"; //does not work
this.previousSibling.style.display="none"; //does not work
onclick is not a valid event in touch devices. Try ontouchstart for mobile version. Also touch event object doesn't contain offsetY. Instead, you can use pageY on both mobile and desktop browsers.
Here is the working demo.
I moved the show/hide functions and attached them to the onplay/onpause events of the video element.
I don't know why it didn't work the other way, but this solution works as expected. see code below:
vidx.onplay = function() {
h1.style.display="none";
vidx.removeAttribute("controls");
}
vidx.onpause = function() {
h1.style.display="block";
vidx.setAttribute("controls","true");
}
I have written a mobile web application that uses the JQuery mobile swipeleft and swiperight events but these are not working on a Samsung Galaxy S4 running Android 4.2.2. Running the web application in either the standard web browser or in Chrome has the same issue: the swipe events are not detected.
The following is how I am trying to detect the events which works fine in other devices I have tested it on, even Android devices (but not Android 4.2.2):
$('#showImage').on("swipeleft", function (event) {
if (currentScale != initialScale) return;
if (currentPage < maxPage) {
++currentPage;
img.src = document.getElementById("page" + zeroPad(currentPage, 2) + "url").value;
}
});
$('#showImage').on("swiperight", function (event) {
if (currentScale != initialScale) return;
if (currentPage > 1) {
--currentPage;
img.src = document.getElementById("page" + zeroPad(currentPage, 2) + "url").value;
}
});
Is there anything I can do, code-wise, to capture these events in Android 4.2.2?
You are having two problems here.
First is caused by a bug in JQM that has been resolved but is not yet implemented https://github.com/jquery/jquery-mobile/issues/5534
Basically the min distance measured by the swipe event must take into account the pixel density of the device. So in JQM's case, the following change to touch.js will solve the issue:
horizontalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;
verticalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;
The second is todo with kitkat firing a touchcancel instead of a touchend. The solution is to delegate touchcancel to touchend.
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."
Many people use the following to detect for iPad or iPhone.
<script>
var agent=navigator.userAgent.toLowerCase();
var useHTML5 = (agent.indexOf('iphone')!=-1 || agent.indexOf('ipad')!=-1);
if (useHTML5){
document.write("");
} else{
document.write("");
}
</script>
The Apple official way to detect only for ipad iphone is
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
// iPad-specific code
} else {
// iPhone-specific code
}
But what if I also want to check for other mobile(at least Android devices anyways)?
Should I resort to Modernizr?
Or a script from
http://detectmobilebrowsers.com/ ?
Just want to add that in my particular case am using FancyBox with VideoJS.
MobileESP Project has a solid array of user-agent detecting methods in JavaScript too yet MobileESP API: JavaScript is very limited simply because some devices has no JavaScript support and a server side detection is the right way to do it. DeviceAtlas Products will provide more information about the device capabilities if needed yet has its price tag too...