HTML5 audio cross browser comtability - 【StackMirror】|ajax|html5|audio|cross-browser

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.

2012-04-04 19:01
by thatidiotguy

"I am simply trying to get the audio to play without the horrible echo" Have you tested the files outside of the browser - PeeHaa 2012-04-04 19:04

"onAudioLoad sends a request to delete the audio, to avoid people stealing our product too easily" You know that everything you send to the client is already out of you hands right - PeeHaa 2012-04-04 19:05

I added a more clear question about what is going on. I thought it was clear from the get go, but of course, one always understands their own writing easiest - thatidiotguy 2012-04-04 19:10

Tested in all three browsers and it just works here - PeeHaa 2012-04-04 19:12

Hmmm, what could be causing this discrepancy on my machine. All my browsers are fully updated - thatidiotguy 2012-04-04 19:13

Idunno. Hard to test if it just works here :) BTW I wouldn't put too much effort in trying to protect from download. Because it could easily be downloaded by simply going to the create url with your own text. If it is meant as a demo rather render the sound with some demo text it in at random points of the real text - PeeHaa 2012-04-04 19:17

So it works for you, even if you try to change the audio after your first say it? So first example. Page loads, you hit say it. The audio plays fine. Change the text, hit say it again. On all my browsers except chrome, it keeps playing the original text. Adding some demo audio in is not a bad idea by the way... Thanks for your help - thatidiotguy 2012-04-04 19:19

let us continue this discussion in chatthatidiotguy 2012-04-04 19:20

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.

2012-04-04 20:03
by PeeHaa