I'm trying to learn how to use HTML5 geolocation and am having trouble getting the following script to run properly:
<script src="js/jquery-1.4.2.min.js"></script>
<script>
jQuery(window).ready(function(){
jQuery("#btnInit").click(initiate_geolocation);
});
function initiate_geolocation() {
navigator.geolocation.getCurrentPosition(handle_geolocation_query);
}
function handle_geolocation_query(position){
alert('Lat: ' + position.coords.latitude + ' ' +
'Lon: ' + position.coords.longitude);
}
</script>
My HTML contains a button that references the #btnInit jQuery function; however, the script does not display any alert popup boxes. Moreover, it seems that the script is pausing prior to the line: jQuery(window).ready(function(){
What are my next steps for getting HTML5 geolocation working?
Your code works perfectly for me, see this fiddle. Is your browser supporting geolocation?
Depending on your browser, you should see somewhere a notice to allow the browser to get your location. You must allow this, to get your code working.
html 5 geoloaction is working on ie9 but not in Mozilla higher version and IE lower version so better use location by ip
I've had the same issues, my solution was to run geolocation from a wifi point of reference rather than ethernet. All I can suggest is my modem is firewalling any requests back about me and my location through my private network, but then locates my position through my mac address and SSID reference. See the article: How, exactly does HTML5's GeoLocation work?
Related
I'm using chrome Version 55.0.2883.87 m (64-bit) on Windows 10.
The following simple html file reproduces the problem and is extracted from my more complex app. It is supposed to speak the 3 words on page load. It works on MS Edge and Firefox but does not work on chrome. This code was working for me on Chrome no problem a couple weeks back.
<html>
<head>
<script lang="javascript">
window.speechSynthesis.speak(new SpeechSynthesisUtterance("cat"));
window.speechSynthesis.speak(new SpeechSynthesisUtterance("dog"));
window.speechSynthesis.speak(new SpeechSynthesisUtterance("bark"));
</script>
</head>
<body></body>
</html>
I may never know for sure, because this problem was intermittent, but it seemed to go away after I started to cancel right before speak.
utter = new window.SpeechSynthesisUtterance("cat");
window.speechSynthesis.cancel();
window.speechSynthesis.speak(utter);
I don't think the cancel necessarily has to come between the utterance object creation and use. Just that it come before every speak. I may have had a different problem as I was only creating one utterance object, not a bunch. I did only see it on Chrome 78. Using Windows 7, 64-bit. Never saw the problem on Firefox or Edge.
EDIT 2 weeks later. No recurrences after several dozen tries. It seems .cancel() solved my problem. My symptoms were: calling speechSynthesis.speak() in Chrome would sometimes not start the speech. There were no immediate indications of a problem in the code, speechSynthesis.speaking would be true and .pending would be false. There would be no events from the utterance object. Normally, when speech would work, I'd get a 'start' event about 0.1 seconds after calling .speak().
speechSynthesis.speak() is no longer allowed without user activation in Google's Chrome web browser since 2018. It violates autoplay policy of Google Chrome. Thus Google Chrome has managed to revoke it's autoplay functionality but you can make use of it by adding a button to make a custom call.
You can visit here to check the status provided by chrome itself also below is the image attached which clearly shows that speechSynthesis.speak() call is prohibited without user's permission.
Link to image
Link to article by Google Chrome
To add to this, the issue for me was the playback rate on the instance of SpeechSynthesisUtterance was above 2. I discovered it must be set to 2 or less in chrome (although it works with higher rates in other browsers like safari).
In chrome, if the utterance rate is above 2, it causes the window.speechSynthesis to be stuck, and needs window.speechSynthesis.cancel() before it will play audio again (at a valid rate below 2) via .speak().
Did your text to voice tryout work only once? Here is why.
In chrome you have to cancel the speechSynthesis, otherwise its not compliant to googles autoplay policy. So you should start your script with:
window.speechSynthesis.cancel()
To cancel any speech synthesis that happened before.
resultsDisplay = document.getElementById("rd");
startButton = document.getElementById("startbtn");
stopButton = document.getElementById("stopbtn");
recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 5;
recognition.onresult = function(event) {
resultsDisplay.innerHTML = "You Said:" + event.results[0][0].transcript;
};
function start() {
recognition.start();
startButton.style.display = "none";
stopButton.style.display = "block";
}
function stop() {
recognition.stop();
startButton.style.display = "block";
stopButton.style.display = "none";
}
.resultsDisplay {width: 100%; height: 90%;}
#stopbtn {display: none;}
<div class="resultsDisplay" id="rd"></div>
<br/>
<center>
<button onclick="start()" id="startbtn">Start</button>
<button onclick="stop()" id="stopbtn">Stop</button>
</center>
Try
utterance = new SpeechSynthesisUtterance("cat, dog, bark");
speechSynthesis.speak(utterance);
I made a Weave at LiveWeave.
Instead of specifying the text while calling new, you could try specifying an object with rate, volume, and text separately, and then converting it to voice.
I have a web application based on RichFaces 3.3.3 that uses Google Maps (maps-api v3), that was working fine until recently.
Lately is failing to draw the map's user controls. Map is drawn fine but the controls don't appear, map type or zoom control, for example.
Investigating a little, it seems a compatibility problem with prototype.js.
If you simply add this line to the example in developers.google.com:
<script src="http://prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script>
js console in chrome browser logs this:
Uncaught TypeError: undefined is not a function prototype-1.6.0.3.js:641
And the user controls dissapear...
Somebody knows how to solve this problem??
Now I'm going to try to change prototype.js in richfaces for a more modern version... I'll update when I know more.
Thanks in advance!
--- UPDATE ---
Using production version of Google Maps solves the problem. Now is necessary explicitly put v=3 in src in script tag. Thanks Dr.Molle.
Updating prototypejs to (1.7.2). Works fine with experimental too. Thanks #eepete.
--- UPDATE 2 ---
Using v=3 isn't working anymore with richfaces 3.3.3 (prototype-1.6.0.3.js) if you need to use this old version of prototype, now you need to explicitly use v=3.17 in google maps.
In other words, use this in your page for backguards compatibility with prototype-1.6.0.3.js:
<script src="https://maps.googleapis.com/maps/api/js?v=3.17"></script>
I had the same problem this morning. Got the same error, controls like the zoom control would not render. I upgraded my prototype.js to the latest version (1.7.2) from version (1.7) and things worked again. Am using google maps api V3, the production version. Don't know if it was the newer version prototype.js or if Google changed something and then fixed something, but it's happy now.
Yes!! the solution for me was change the line from:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" />
to
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3" />
Thanks!!
Change to version v3, the conflict with prototype will disappear, I have tried in my site, it works fine.
This function at line number 629ish in prototype.js is causing the exception. Simply add try catch blocks as shown below. It works with any Google Maps API.
collect: function(iterator, context) {
iterator = iterator ? iterator.bind(context) : Prototype.K;
var results = [];
try {
this.each(function(value, index) {
results.push(iterator(value, index));
});
} catch (err) {}
return results;
}
Can somebody help me on how to capture audio from default microphone using HTML5?
There are many samples available, but none of them seem to working.
I have tried Audio capturing with HTML5
As it only works with chrome with flags enabled. but it's getting NavigatorUserMediaError. The video icon on the address bar has a red cross sign and its tooltip says 'this page has been blocked from accessing your camera and microphone'
There's some great articles on HTML5 Rocks. This is just one that I pulled.
http://updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled
// success callback when requesting audio input stream
function successCallback(stream) {
var audioContext = new (window.webkitAudioContext)();
// Create an AudioNode from the stream.
var mediaStreamSource = audioContext.createMediaStreamSource( stream );
// Connect it to the destination to hear yourself (or any other node for processing!)
mediaStreamSource.connect( audioContext.destination );
}
function errorCallback() {
console.log("The following error occurred: " + err);
}
navigator.webkitGetUserMedia( {audio:true}, successCallback, errorCallback );
make sure you start the demo from a webserver - simply copy/paste & start from file system won't work - in chrome you never get access to the mic this way.
Recently (not sure when) Chrome added the requirement that the page be accessed over SSL to enable getUserMedia.
I've earlier successfully used the JavaScriptAudioNode in the Web Audio API to synthesize and mix audio both in Chrome and Safari 6.0. However, the latest version of Safari no longer appears to work, because it does not call onaudioprocess to fill the source buffers.
This is a simplified example which plays only silence and appends text to the document body on each call to onaudioprocess:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var context = new webkitAudioContext();
var mixerNode=context.createJavaScriptNode(2048, 0, 2);
mixerNode.onaudioprocess=function(ape) {
var buffer=ape.outputBuffer;
for(var s=0;s<buffer.length;s++)
{
buffer.getChannelData(0)[s]=0;
buffer.getChannelData(1)[s]=0;
}
$("body").append("buffering<br/>");
};
$("body").html("");
mixerNode.connect(context.destination);
return false;
});
});
</script>
</head>
<body>
start
</body>
</html>
The above example works in Chrome as expected, but not in desktop Safari. The iOS version of Safari does not work either, but it never did work for me in the first place.
Calling context.createJavaScriptNode does return a proper object of type JavaScriptAudioNode and connecting it to the destination node does not throw any exceptions. context.activeSourceCount remains at zero, but this is also the case in Chrome as it apparently only counts active nodes of type AudioBufferSourceNode. context.currentTime also increments as expected.
Am I doing something wrong here or is this an actual bug or a missing feature in Safari? The Apple documentation has no mention of JavaScriptAudioNode (nor the new name, ScriptProcessorNode) but it did work before on the first release of Safari 6. The iOS Safari requirement for user input doesn't seem to help, as the example above should take care of that.
The simple example can be found here and a more complex one is my Protracker module player which exhibits the same behaviour.
There are a couple bugs in Safari's implementation of the Web Audio API that you'll need to look out for. The first is in the createJavaScriptNode constructor... it seems to have problems with the "input channels" param being set to 0. Try changing it to this:
createJavaScriptNode(2048, 1, 2)
The second issue has to do with garbage collection (I think); once your mixerNode variable is out of scope, Safari seems to stop firing the onaudioprocess callback. One solution is to introduce mixerNode at the top-level scope (i.e. declaring var mixerNode; at the top of your script) and then store your JavaScriptNode in that top-level variable. If you plan on dynamically creating multiple mixerNodes, you can achieve the same effect by storing references to them in a top-level array variable.
If you make these two changes (input channel param set to 1, maintaining a reference to the mixerNode) then your script should work in Safari as expected.
I want to execute a chrome script,when the content of webpage is update (E.g like Facebook)
So what method I should use for that?
You can use
$("body").bind("DOMSubtreeModified", function() {
alert("something changed");
});
Note: DOMSubtreeModified is deprecated
You should try it with chrome.* API:
chrome.tabs.onUpdated.addListener(
function(integer tabId, object changeInfo, Tab tab) {
//your code
});
See here for documentation:
http://code.google.com/chrome/extensions/tabs.html#event-onUpdated
It should work for updates like (AJAX) requests etc...
As sachleen said, you can use DOMSubtreeModified listener
document.addEventListener("DOMSubtreeModified", methodToRun);
Note that the Mutation Events are performance hogs which can't really be tamed well (they fire too often and slow down the page a lot). Therefore, they have been deprecated over a year ago and should be used only when really needed. However, they work.
If you want this for a Chrome extension, you could use the new and shiny Mutation Observers from DOM Level 4 (follow the links there, they explain a lot!). Where DOMSubtreeModified fired a thousand times, MutationObserver fires only once with all the modifications contained and accessible.
Works for (as of 2012/06):
Chrome 18+ (prefixed, window.WebKitMutationObserver)
Firefox 14+ (unprefixed)
WebKit nightlies