Play wave files

[magosk]

We need to be able to play .wav files in our web application, preferably without requiring any special plug-in, at least not for Windows / IE which is used by the majority of our customers (e.g. today in our IntraWeb-powered application it works without any plug-in if you have Windows Media Player, although for other browsers e.g. QuickTime is required). What are the options for uniGUI? And how does the code look like for playing a file in response to e.g. a button click?

[Farshad Mohajeri]

This may help:

 

http://forums.unigui.com/index.php?/topic/959-play-mp3/page__view__findpost__p__2585

[magosk]

This may help:

 

http://forums.unigui.com/index.php?/topic/959-play-mp3/page__view__findpost__p__2585

Thanks,

 

but due to my limited experience with uniGUI (and JavaScript for that matter...) I have trouble getting this working. According to the post, I tried putting the code

 

<script>  
 var audio2 = document.createElement('audio');
 audio2.setAttribute('src', 'files/Test.wav');  
 audio2.play();
</script>

 

in ClientEvents.ExtEvents.OnClick of a TuniButton but then the main form will not even load in web mode. I also tried with a TuniHTMLFrame but with no success.

 

A simple demo for playing an audio file would be much appreciated (not solving this issue would be a complete showstopper for us)! Note: in our real world case, we would need to first copy the file (or in some cases generate a new wave file using Text-to-speech) into the "session temporary file directory" (what is the uniGUI correct terminology for that?) on the server side as a response to the button click, and after this has completed play it on the client side, so if this aspect was part of the demo or example it would be great.

[magosk]

Thanks,

 

but due to my limited experience with uniGUI (and JavaScript for that matter...) I have trouble getting this working. According to the post, I tried putting the code

 

<script>  
 var audio2 = document.createElement('audio');
 audio2.setAttribute('src', 'files/Test.wav');  
 audio2.play();
</script>

 

in ClientEvents.ExtEvents.OnClick of a TuniButton but then the main form will not even load in web mode. I also tried with a TuniHTMLFrame but with no success.

 

A simple demo for playing an audio file would be much appreciated (not solving this issue would be a complete showstopper for us)! Note: in our real world case, we would need to first copy the file (or in some cases generate a new wave file using Text-to-speech) into the "session temporary file directory" (what is the uniGUI correct terminology for that?) on the server side as a response to the button click, and after this has completed play it on the client side, so if this aspect was part of the demo or example it would be great.

 

I could add that with IntraWeb the guy who made our playback function used a TIWText control and put the following code in it when we clicked a "play" button:

 

<EMBED src="Files/Test.wav" hidden="true" loop="false" autostart="true" 
width="0" height="0">

 

and made the control visible. In an "AfterRender" event we made the IWText control invisible again so the wave file would not play again the next time the page was updated in some way.

 

I tried putting the same code in a TuniHTMLFrame and the file plays once as soon as I enter the page. But I don't know how to trigger it on a button click instead (so I can play it multiple times from the button if desired, but if I do something else on the form it should not play the file). Any assistance on this would be much appreciated.

[Harry Rogers]

This works for me ! (chrome 17 & 18 & IE8 & FF6.0.2 & FF11.0)

 

function OnClick(sender, e)
{ var audio1 = document.createElement('audio');
 audio1.setAttribute('src', 'files/NewMsg.wav');  
 audio1.play();
}

 

(You don't need to enter '<script>' '</script>' in the event editor)

[zilav]

Playing sound in all browsers is not so simple.

Watch this

There is a js library to play audio across browsers, something like jquery for selectors.

[magosk]

This works for me ! (chrome 17 & 18 & IE8 & FF6.0.2 & FF11.0)

 

function OnClick(sender, e)
{ var audio1 = document.createElement('audio');
 audio1.setAttribute('src', 'files/NewMsg.wav');  
 audio1.play();
}

 

(You don't need to enter '<script>' '</script>' in the event editor)

Thanks, I tried to put your code, including the function declaration, into the ClientEvents.ExtEvents property editor for OnClick, and now the web page does not hang, but I still cannot get any sound played when i click the button. I am probably missing something (yes, I did change the filename to Test.wav...) about how to do it in uniGUI, so a working demo would be great. Also, as mentioned, in the real world case I need to produce the wave file on the server first, so how would I trigger the client-side audio plaing code from the server-side OnClick event handler once I have the wave file in the correct place?

[Farshad Mohajeri]

Thanks, I tried to put your code, including the function declaration, into the ClientEvents.ExtEvents property editor for OnClick, and now the web page does not hang, but I still cannot get any sound played when i click the button. I am probably missing something (yes, I did change the filename to Test.wav...) about how to do it in uniGUI, so a working demo would be great.

 

Are you testing in Chrome? Chrome doesn't support WAV files.

 

Also, as mentioned, in the real world case I need to produce the wave file on the server first, so how would I trigger the client-side audio plaing code from the server-side OnClick event handler once I have the wave file in the correct place?

 

You can only play sound in an event triggered from client side.

[Farshad Mohajeri]

A simple demo attached.

HTML5 Audio.rar

[magosk]

A simple demo attached.

Thank you, much appreciated, especially the part on how to trigger the client-side playing code from the server side. I tested the demo in an environment with all the latest browsers installed plus QuickTime, and I got the following results:

 

No. (Format) IE9 Chrome FF Safari

------------ --- ------ -- ------

1 (Wave)____ N__ Y_____ Y_ Y

2 (Ogg)_____ N__ Y_____ Y_ N

3 (Mp3)_____ N__ Y_____ N_ Y (with glitch)

 

As much as I regret to say it, supporting IE (with backwards compability) is a must for us (I also tested on a machine without QuickTime installed so that it uses Windows Media Player but that didn't work either). What kind of code would work on IE (and on the others with a possible requirement of QuickTime or similar)? As mentioned, wave is the important format in our case.

[Farshad Mohajeri]

Among IEs only IE9 supports HTML5 audio, but apparently it doesn't work as expected. If you need complete cross browser compatibility you must use a flash plugin instead.

[zilav]

Use some audio javascript library with automatic flash fallback. There are several of those, for example audio.js