Can someone tell me the "best" way to detect Safari and then its version number?
Look, I don't want to do it but I can't find a way to pin down a WORKING version of speechSynthesis on Safari
See below for an example that works on iOS 7.1.2 IF you don't add the onEnd listener. Apart from that everything is peachy.
In my real world full blown example it talks but still won't deliver the at end event.
On iOS 8 there is no issue.
Please offer a best-of-breed agent/version sniffer or a better working-feature-detector.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fini()
{
alert("end");
}
function talk()
{
if (!('speechSynthesis' in window)) {
alert("Unsupported browser");
return;
}
alert("Getting ready.");
var utterance = "Hello World";
var chat = new SpeechSynthesisUtterance(utterance);
chat.addEventListener('end', fini, false);
speechSynthesis.speak(chat);
}
</script>
</head>
<body>
<p>On Safari this example won't fire any known events<br />
onend, onerror, even onended: -</p>
<input type="button" value="Talk" onclick="talk()" />
<br /><br />
No probs on Chrome or Opera. Spewin!
</body>
</html>
For the record, the addEventListener was throwing an exception on 7.2.1 that could be trapped to signify unsupported speech synthesis.
Opera mobile has laryngitis
Different problem same topic: -
You (and I) may question the correctness of this behaviour in Opera but it appears to be as simple as there are no known/registered/available voices for Opera Mobile on my Android phone :-(
"Sing for me Christine! Sing my angel, SING!" Sorry couldn't help it.
So are there any files I have to download?
FYI on Safari, apparently, the speechSynthesis.getVoices method is synchronous which makes life easy. Elsewhere it is asynchronous and will return an array of length 0 on first call.
We need to register an event such as: -
speechSynthesis.onvoiceschanged = function() {
voices = window.speechSynthesis.getVoices();
alert("Voices " + voices.length);
if (!done) theWork();
};
This never fires on Opera Mobile. Curious!
Why don't I get a error from the synthesis specification like "language-unavailable" or "voice-unavailable"?
Because I didn't explicitly specify a language and a voice?
And why does Chrome deliver onvoiceschanged 3 times?
Related
I want to create a site with a 360 video thats streamed from my computers 360 cam (ricoh theta s) and uses the possibilites of a-frame. I did not have any luck with embedding youtube livestreaming within a-frame though. I would have a webserver and the stream would not be really public so maybe there is some solution that involves selfhosting? Does anybody have any experience with achieving sth like this? i cant find anything related so far and this plays a crucial role in my robotproject...
EDIT 1:
I might specify even more after some research:
it would be perfect if a-videosphere and a-video would support sth like hls or mpeg-dash - streams. since that would need some kind of player for chrome and android stuff i think the easiest route would be to support a motionjpg-support because they are very easy to create. flashstreams can be good too but i dont think there is a future for that.
is there anything like that in the planning by someone because i am quite sure that nothing like that exists yet... i took 2-3 days of researching and find nothing about that topic... just a getUserMedia for webcam example showed up but its not good for my purpose.
another approach i could live with would be a routine that just autoreloads pictures in a-sky (if possible without flickering). i tried to integrate javascripts that are supposed to do that within normal divs and so but nothing worked...
or did somewhere someone get a stream of any kind running in a-videosphere and if so how?
EDIT 2:
i got it working... somehow... not really but looks promising...
the stream is provided by "yawcam" which uploads a new picture every second to my ftp. if i now click on the red sphere the script starts via addEventListener 'click' and the content of a-sky gets updated... is there any way to make a loop out of that script so one doesnt have to click anymore and it just update itself every second?
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video — A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
sky.setAttribute( 'src', this.data + "?" + Math.random());
});
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336" radius="8" position="-8 2 -8" set-sky="image1.jpg"></a-sphere>
<a-sky></a-sky>
</a-scene>
</body>
so here is the solution for the proposed "kind-of" solution...
the picture "out" is updated via "yawcam" on my server every second and updated in the a-sky tag - even without flickering... so no sound but at least kind of a live-video-feed in a-sky.
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video � A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init: function() {
this.timeout = setInterval(this.updateSky.bind(this), 100);
this.sky = this.el;
},
remove: function() {
clearInterval(this.timeout);
this.el.removeObject3D(this.object3D);
},
updateSky: function() {
this.sky.setAttribute( 'src', this.data + "?" + Math.random());
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9 " fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336 " radius="2" position="-8 2 -8"></a-sphere>
<a-sky set-sky="out"></a-sky>
</a-scene>
</body>
I am trying to offer a playlist of videos and only play a video once its link was clicked. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WW Video Player</title>
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
</head>
<body>
<video id="video_player" class="video-js vjs-default/skin" width="800" height="600" data-setup='{ "controls": true }'></video>
<script type="text/javascript">
videojs("video_player", {}, function() {});
function SelectVideo(path)
{
var mplayer = videojs("video_player", { "controls": true, "autoplay": false });
mplayer.src({ type:"video/mp4", src: path});
mplayer.play();
mplayer.requestFullScreen();
}
</script>
Play Video
</body>
</html>
In the <video> tag, I have tried adding plain controls and removing data-setup, but I can't get the controls to show up.
Furthermore, mplayer.requestFullScreen(); isn't working, either - here's Firebug's error message:
TypeError: mplayer.requestFullScreen is not a function
I'm running Firefox 22.0 on Windows 7 64bit.
Any ideas? Thanks!
Video.js is good and bad at the same time. I appreciate the work that's gone into it, but I've spent days getting it to work correctly. I wish I'd found your answer earlier, codoplayer looks good.
Videojs goes wrong whenever a javascript error occurs, and subsequently fails to set the correct classes on the control bar etc.
The bad javascript could be in your own code, and there is one in video.js that affects Firefox.
First, make sure your own scripts aren't failing...
The function that must be changed in video.js is: vjs.Player.prototype.techGet()
When an exception occurs, it handles it, then re-throws at the end. Replace the line 'throw e;' with 'return null;'
Why? There are methods within video.js that do not seem to realise that techGet could throw.. here is an example:
vjs.Player.prototype.currentSrc = function(){
return this.techGet('currentSrc') || this.cache_.src || '';
};
It throws an exception on techGet whenever the tech is flash, which is common in Firefox, IE8 etc. It will never reach this.cache_.src || ''. It looks like that wasn't the intention, so it's probably a bug.
If interested in IE8, you will have to do something with all the calls to innerHTML, they may fail and will need replacing with a method that works on the DOM instead.
I am using the blueimp fileupload basic plugin in my project. It all works well in Safari, Firefox, Chrome but there is a problem with Internet Explorer 9 and below:
The start callback gets called and in the network tab of developer tools I see the ajax call being executed. However the file is never being upload (I checked on the server, too) and the call eventually ends up in a 408 request timeout.
Any hints on what could be the reason?
Here are my relevant code parts:
<input class="input-file" id="fileupload" name="files[]" data-url="/app_dev.php/backend/ajax/upload/wish/1850cf918a43d42" type="file">
<script type="text/javascript" src="js/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/uploader/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/uploader/jquery.fileupload.js"></script>
<script type="text/javascript" src="js/uploader/jquery.iframe-transport.js"></script>
<script>
$(document).ready(function() {
$('#fileupload').fileupload({
dataType: 'json',
dropZone: null,
start: function (e, data){
console.log('start'); //fires in all browsers = fine
},
progress: function (e, data){
console.log('progress'); //fires in Safari, FF, Chrome = fine
},
done: function (e, data) {
console.log('done'); //never getting here in IE cause file doesn't get uploaded.
}
});
</script>
Problem fixed!
There were two issues. One had to do with local network settings.
The other was to implement the correct handling of content type negotiation. See https://github.com/blueimp/jQuery-File-Upload/wiki/Setup for more details.
Just my 5 ¢:
I had a very hard time trying to make it work with pretty links! Following dumps were totally empty!
var_dump($_FILES);
var_dump($_POST);
var_dump($_GET);
So:
$('#fileupload').fileupload({
url: 'http://code.dev/products/postUpload' // <--- remove trailing slash!!!
});
I have found a simple example of the web audio API in action here:
http://jsfiddle.net/stuartmemo/xMruN/
When I run it in JsFiddle it works perfect (in Chrome) but when I copy the code locally it doesn't work. Here is the code I've used locally:
<!DOCTYPE html >
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript">
var context = new webkitAudioContext(),
oscillator = context.createOscillator();
oscillator.type = 3;
oscillator.frequency.value = 500;
oscillator.connect(context.destination);
oscillator.noteOn(0);
</script>
I feel like this has a simple solution I'm overlooking but I've been at it for 20 minutes.
BTW I'm running my local example on a web server (even though I doubt I should have to).
Thanks
You should wait for window to load like so:
window.addEventListener('load', function () {
var context, oscillator;
try {
context = new webkitAudioContext();
} catch (e) {
alert("Your browser does not support Web Audio API");
}
oscillator = context.createOscillator();
oscillator.type = 3;
oscillator.frequency.value = 500;
oscillator.connect(context.destination);
oscillator.noteOn(0); // play it immediately
oscillator.noteOff(1); // turn it off after 1 second from now
});
Removed this line and it works.
oscillator.noteOn(0);
Removed this line and it works.
oscillator.noteOn(0);
The noteOn method is deprecated in the Web Audio API. You can change that line to:
oscillator.start(0);
… and it should work as originally intended.
BTW I'm running my local example on a web server (even though
I doubt I should have to).
Actually, some of the Web Audio API stuff won’t work unless you run it from a server. So you are doing the right thing by running a local server.
Oscillator types are no longer specified with integers. Use strings instead, e.g.
oscillator.type = 'sawtooth';
I don't know if that is what's causing your problem here. Perhaps JsFiddle used an older implementation of the web audio api?
I am running the following from inside of Aptana:
<html>
<head>
<title>New Adobe AIR Project</title>
<script type="text/javascript" src="lib/air/AIRAliases.js"></script>
<script>
function init() {
if(air.NativeProcess.isSupported) {
alert("NativeProcess is supported.");
} else {
alert("NativeProcess not supported.");
}
};
</script>
</head>
<body onload="init()">
</body>
</html>
And it says that NativeProcess not supported.
Do I need to compile this in order for it to work?
I thought I would be able to test it from inside of Aptana.
i've never used Aptana, although i assume the solution will be the same, but in Flash CS5 you can test native processes with ADL by selecting only the Extended Desktop profile in the AIR settings.
native process only work for desktop applications packaged as native installers.
Update
you need to have this somewhere in your code or descriptor file
<supportedProfiles>extendedDesktop</supportedProfiles>
read this for more info about device profiles for AIR: Device Profiles