HTML5 audio cross browser comtability - ajax

I work for a company and am trying to make a new demo page. I would love to dumb down the page to exactly what is not working, but unfortunately it is tied to a variety of scripts on my server, as well as AJAX requests that have to go to the same domain name. I will describe the going ons as well as possible however.
Essentially, my session code is working almost as expected. This is not where the problems lie. The problem is that the audio played after doing a "Say It" button click works as expected in Chrome,but firefox plays only the first audio request, even after subsequent ones with different text, and nothing is played in internet explorer. The relevant code is all in the head section where a group of three functions control all of what is going on. formSubmit() is called when "Say It" button is hit, onAudioLoad() is called once the audio has been loaded, and limitText() does, well, it limits the amount of text people can put in.
So formSumbmit() sends an AJAX request to my server script which returns one of two things:
1) HTML5 audio tag with the source elements with correct src attributes
or
2) A p element saying that your session has expired.
I am simply trying to get the audio to play without the horrible echo (which may or may not be caused by the actual mp3/ogg conversion software) and to have it work as expected on all browsers.
onAudioLoad sends a request to delete the audio, to avoid people stealing our product too easily :D
Expected behavior:
Whatever text is present in the demo text area will be sent server-side to be synthesized, and then the audio will be played through the client's speakers.
If you have any further questions I will be checking back here periodically.
Here is the URL of the demo:
http://www.cepstral.com/demos/temp/cepstral_tts_demo.php
Thank you for any and all help.
Ultimate Question:
Why does this work as expected in Chrome but not in Firefox 11 and IE9?
In firefox it will play only the first audio request.
In IE9 no audio is played.
I am aware that the audio is never going to be safe. We are just trying to make it more difficult for common users.

After trying to find out what was going on and having contact in chat (transcript) I've come to the following conclusion: it's an caching issue.
When trying to change text in FF and requesting a new soundfile it still plays the old sound. By checking the requests and responses it looks like you are always responding with the same filename (for the audiofile) although the sound itself is different.
When downloading that soundfile or opening it in a new tab and refresh it without cache it plays the correct sound (with the new text), so I'm pretty sure about the caching.
You should find out a way to return unique filenames for different texts to prevent browser playing the cached versions.
The same applies when testing it on IE on my machine.
EDIT by OP
Wanted to add that the reason it was not working on my IE appears to be that I am using Windows 7 N. Noted in the release notes for IE9 is the fact that Windows 7 N requires special updates to play HTML5 video. They do not mention HTML5 audio, but it is my assumption that this is the problem.

Related

I randomly see a screaming seagull in the place of images in my browser

This started about a month ago, that random images in my browser have been replaced by crazy things, usually a seagull picture. It is very distracting.
I've tried everything. Chrome, Firefox, Safari. I've cleared all my internet history.
If you are SPECIFICALLY talking about a screaming seagull image, this is a well known virus. There is an image floating around the internet that appears like a benign animated GIF, but it contains meta code that is able to infect PCs via an instant messaging tool named Slack. It is most likely to happen with users that frequently use that emoji.
If you reinstall Slack it should clear out that cache and therefore the virus.
Confirmed I reinstalled Slack and my issue is resolved.

Why does youtube video work fast on Chrome than firefox?

As a java UI & Backend developer for past 10 years, What surprises me is the following browser behavior :
Firefox : I click on a related video (youtube website) and it takes some time to figure out the video and then buffering starts for the video.
Chrome : I click on a related video (youtube website) and it starts as if it was already buffering or buffer ready. This is surprising as there is no delay.
(note: If you have a very fast connection, you may not notice it. Slow it down by some parallel network related activity and then experiment)
My Concern is : Is Chrome browser programmed to preload some data related to youtube related videos to give a faster experience?
Google owns youtube and it makes sense for doing so.
But doing so,seems weird. Its like unusual customization for a particular website from a sea of websites.
Anyone knows a thing or two about it?
I noticed that when you install firefox you have to install flash manually, while chrome does not require that, i think it comes with it, or does not use flash at all. It might have something to do with that..

How to detect if Safari power saver mode is enabled?

I'm experiencing issues with the YouTube player failing to load when the power save mode is enabled in Safari 6.1 and 7 on OSX. The issue doesn't happen if the youtube user is using the experimental HTML5 player, but it's still in beta and most people are still using the Flash player. The "disable plugins to save power" option is on by default in most new versions of Safari and this causes the YouTube iFrame API to enter an endless loop as it tries to initialize the player.
Is there any attribute on the window or navigator objects that would possibly indicate that the power save mode is enabled so that I can warn users?
This issue is semi-intentional. The Power Saver mode in Safari deliberately stops flash content. You can read more about it in this article.
If the flash content is 'front and centre' (within a 3000 x 3000 pixel boundary starting at the top left corner of the document) it should still play. So it may help, if the youtube video is off to the side of the page, to try and centre it. Apple says content will not play if it is in the margins (see this page under the Safari Power Saver heading).
Well i do not think there is any readable JS property to know that,
if so Apple would have a flawed design, and the Safari Users would get nagged to disable that mode, in order to have the web site working "properly" ...
What you could do of course is to try to make a server call on your web site via flash, and then try to read the changed session variable via JavaScript, then you would know ...

How would I keep a ChromeCast Chrome tab alive?

I have a status page (a la Google Analytics) that I want to stream to my screen via ChromeCast. The problem I'm running into is that after 10 or 15 minutes, my ChromeCast cuts off the connection and goes back to the ChromeCast screen rather than continue casting from my status board. I already tried having the page refresh automatically, but apparently that's not good enough.
Ideally I just want to do this via a Chrome tab without having to create an entire application, but I'm willing to do so if necessary. I don't see anything in the docs to suggest that this is possible, though.
Ideas?
Is the screen you are casting a static one in which no UI change happens or there are elements that change on the UI?
I'm not sure what the cause is; but I think casting a tab here might be overkill, and not using it might fix your issue.
Casting a tab basically encodes what's visible into a video stream and streams it over your network to the Chromecast. This uses significant resources encoding the video on your PC, network transfer of a video stream, decoding on the Chromecast.
If the app is already web-based, it would be much better to get the Chromecast to just render it natively (this avoids encoding anything to a video stream, and removes the need for your PC to be on completely).
I'm still waiting for my Chromecast to be whitelisted so I can't test it; but I suspect it would be trivial to be able to get the Chromecast to display a "status page" natively with just a little HTML and JS on your PC to "launch" it, and a tiny wrapper for the receiver.

Preventing Mobile Safari Cache Overflow

I've got a simple little web app that's aggregating a couple views from some ethernet enabled cameras around my house. This is basically a little dashboard, so that I can easily tell what's going on around the house. I've got it refreshing the images every so often by appending new Date().getTime() to the base URI.
Everything works happy days, except for one little issue. If I leave the dashboard up on my iPad for awhile, it runs out of memory and crashes back to the home screen. I know that its because Mobile Safari is caching each of these images in RAM and it eventually ends up with far too many of them.
Since these images are being hosted on embedded devices; I really have no ability to modify the caching headers directly. I would like to stay away from making a wrapper on my server side as well.
My question is; can anyone think of a way to prevent Mobile Safari from caching these images so aggressively that it crashes?
You might try to reuse your img tags and/or set the src attribute to an empty string before removing an image. It's probably not an aggressive cache that's crashing mobile safari, but how the browser doesn't deal well with releasing image references when image tags get deleted.
You might find more useful information here:
http://www.vargatron.com/2010/08/ipad-html5-js-memory-management/

Resources