Straight from the first line of the HTML5 Rocks tutorial on web sockets it is not working.
var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);
connection.onopen = function () { alert("open"); };
connection.onerror = function () { alert("error"); };
It works in chrome, opera, ie. It doesn't work in Safari. Am I doing something wrong?
http://jsfiddle.net/xSNpM/2/
apple stopped updating safari on windows. this works on an up to date version of safari.
Related
I've already searched and found a couple of questions about speech synthesis issues on iOS.
Like this one:
JS Speech Synthesis Issue on iOS
I have implemented all the work-arounds I could find and I don't have any error in the console. Still I get no sound while it works fine on Android and desktop. Even the codepen shared in the question above doesn't work but the author claims it should.
So, this question is more about the device / OS itself: is there anything in an iOS device such as the iPhone, that could prevent text to speech to work? (yes, I checked the volume)
My iOS version is 13.4.1
For completeness sake, my code looks like this:
let hasEnabledVoice = false
/**
* Bug in some browser that dont load voices
*/
if (window.speechSynthesis) {
// Preload voices
speechSynthesis.getVoices()
/**
* iOS hack
* https://stackoverflow.com/questions/32193704/js-speech-synthesis-issue-on-ios/62587365#62587365
*/
document.addEventListener('click', () => {
if (hasEnabledVoice) {
return
}
const fakeUtterance = new SpeechSynthesisUtterance('Hello')
fakeUtterance.volume = 0
speechSynthesis.speak(fakeUtterance)
hasEnabledVoice = true
})
}
function speak(sentence) {
if (window.speechSynthesis) {
const utterance = new SpeechSynthesisUtterance(sentence)
utterance.voice = speechSynthesis.getVoices()[0]
utterance.volume = 1
utterance.rate = 0.9
speechSynthesis.speak(utterance)
}
}
I am currently testing a polymer element and need to wait for a variable to be set in my element. After searching how to instruct Javascript to wait for the variable to be set, I came up with the following code:
var behavior;
setup(function(){
behavior = fixture("behavior");
});
test('Behavior loads resources', function(done) {
var waitForI18n = function() {
if(behavior.isI18nLoaded){
clearInterval(interval);
expect(behavior.getKey("test")).to.be.equal("test" + behavior.language.toUpperCase());
done();
}
};
var interval = setInterval(waitForI18n, 50);
});
This works in Chrome but other browsers just freeze and eventually crash: IE11, Edge, Firefox.
I was able to get a "Too much recursion" error in firefox, but not much else.
Am I doing anything wrong? Any ideas?
I've tried with a recursive setTimeout, but the behavior was the same: Chrome works, but not other browsers.
Firefox 23 supports the Web Audio API in theory; however, the following snippet that works in Chrome Canary fails in Firefox Aurora:
var theAudioContext = new AudioContext;
navigator.getUserMedia({"audio": true}, function(stream) {
var input = theAudioContext.createMediaStreamSource(stream);
// theAudioContext.createMediaStreamSource is not a function
},
function(){ /* err */ });
Is support for this API planned as part of Firefox in the future, or is there an alternate way to work with MediaStreams today?
We're working on support for MediaStreamAudioSourceNode, it will land in Nightly and Aurora soon. Please follow this bug if you're interested: https://bugzilla.mozilla.org/show_bug.cgi?id=856361
i had a question
on some devices like iPad and Android Tables you cannt change Volume of Video Tags becuase Volume API dont supported on this devices. have yo a idea how i can detect if this isnt support?
The best I could come up with is this:
function volumeChangeSupported () {
var ua = navigator.userAgent.toLowerCase();
// got information from jplayer:
var noVolume = /ipad|iphone|ipod|android|blackberry|windows ce|windows phone|webos|playbook/.exec(ua);
if (noVolume) {
if (noVolume[0] === 'android' && /gecko/.test(ua)) {
// Firefox on android DOES support changing the volume:
return true;
}
else {
return false;
}
}
return true;
}
This doesn't really "detect" support for changing the volume. I got this information partly from jPlayer and partly from my own experience testing Firefox 19 on an old Android 3 tablet. Who knows if Firefox on an Android phone or a different Android version behaves differently.
But before this I tried to detect volume change support like this:
function volumeChangeSupported () {
var audio = new Audio();
audio.volume = 0.5;
return audio.volume === 0.5;
}
This yielded the correct result for iPhone Safari and Android Firefox, but not for other Android Browsers (the "Android Browser" and "Dolphin", which can't change the volume but had audio.volume === 0.5 to be true).
I have the latest versions of Firefox and IE, but the example in html5rocks.com is not working in these two browsers. I tested with Chrome and it works fine.
I have noted that these browsers does not fire any event ('onsuccess' or 'onerror') on attempting to open the indexedDB as follows.
var request = indexedDB.open("todos");
Please share any ideas/solution for this issue.
to make html5rocks demo work on Firefox you need to attach onupgradeneeded event on database open instead of setversion method for creating the database.
here is the code sample that works both on Firefox and Chrome:
myStorage.indexedDB.open = function() {
var v = 1;
var request = indexedDB.open("todos", v);
//Firefox code for db init
request.onupgradeneeded = function (e) {
myStorage.indexedDB.db = e.target.result;
var db = myStorage.indexedDB.db;
// We can only create Object stores in a setVersion transaction;
if(db.objectStoreNames.contains("todo")) {
var storeReq = db.deleteObjectStore("todo");
}
var store = db.createObjectStore("todo",
{keyPath: "timeStamp"});
}
request.onsuccess = function(e) {
myStorage.indexedDB.db = e.target.result;
var db = myStorage.indexedDB.db;
//Chrome code for db init
if (v!= db.version && db.setVersion) {
var setVrequest = db.setVersion(v);
// onsuccess is the only place we can create Object Stores
setVrequest.onerror = myStorage.indexedDB.onerror;
setVrequest.onsuccess = function(e) {
if(db.objectStoreNames.contains("todo")) {
db.deleteObjectStore("todo");
}
var store = db.createObjectStore("todo",
{keyPath: "timeStamp"});
myStorage.indexedDB.getAllTodoItems();
};
}
else
myStorage.indexedDB.getAllTodoItems();
};
request.onerror = myStorage.indexedDB.onerror;
}
Edit: Here is a link to working version of the html5roks ToDo demo, which I maintain on github, expanded with two new features for viewing details data and updating values.
Chrome is behind on the IndexedDB standard.
There was a new revision introduced in December and Firefox and IE have upgraded. Chrome has not yet.
I believe it's mostly folks from the Chrome crew who run HTML5Rocks.com so it makes sense why these examples would be behind.
The big change between the pre and post-December 2010 API are the change in setVersion requests and the new onupgradeneeded callback.
Todo list example is outdated IndexedDB specification implemented on chrome. Now you got to use onupgardedneeded method, and well setVersion too for now.
IndexedDB is not supported on IE. Visit html5test.com for verification
Edit 2015: IndexedDB API is available in IE as of version 10