Play sound from web client?

Classic Servoy
1

Hello all!

Web entry needs an error sound, and application.playSound() only plays the message on the Server. (this is 7.4.8 btw)

Certainly, someone has embedded and audio file in the HTML.

Set a function in HTML_AREA and then execute that script, ie playSound().
Called from an onEvent…
plugins.WebClientUtils.executeClientSideJS(‘playSound();’);

plugins.WebClientUtils.executeClientSideJS('playSoundX();');

var viewport = new XML(<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=4.0; user-scalable=1;"/>
<audio id="playError" src="media:///error.wav"></audio>
<script type="text/javascript">
 <![CDATA[
 function playSoundX() {
	document.getElementById("playError").play();
 }
 ]]>
 </script> 
</head>
<body>
</body>
</html>).toXMLString().replace(']]>', '').replace('<![CDATA[', '');

Has anyone had success in playing a sound in the browser?

Thanks!
–Joe.

2

Hi Joe,

I was able to play sounds this way:

create folder named ‘audio’ in: application_server/server/webapps/ROOT/servoy-webclient
place the attached audio.js file in there (unzip first)
place your error.mp3 file in there.

now from code execute this to play:

plugins.WebClientUtils.executeClientSideJS("play('audio/error.mp3')")

or this to pause:

plugins.WebClientUtils.executeClientSideJS("pause()")

Tested this in Chrome, Firefox, Safari where it worked, although Safari can block autoplay of audio.

Hope this helps.

audio.js.zip (712 Bytes)

3

Thanks Marc!

I munged enough to get it working and will visit your solution soon.

Imported error.mp3 and beep.mp3 into media.

executed ‘plugins.WebClientUtils.executeClientSideJS(‘playSoundX();’);’ using the following code (in an editable=false HTML_AREA field) on user input determined to be an error

var viewportSrc = '<html><head><audio id="playX" src="media:///error.mp3" type="audio/mpeg" onload="auto"></audio>\
	<audio id="playBeep" src="media:///beep.mp3" type="audio/mpeg" onload="auto"></audio>\
	<script type="text/javascript">\
	function playSoundX(init){\
		if (!(!init)){\
			document.getElementById("playBeep").play();\
		} else {\
			document.getElementById("playX").play();\
		}\
	}</script></head></html><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=4.0; user-scalable=1;"/>';

IOS Safari won’t play happily with this code.
Android Firefox plays only after a visual error message is closed.
Desktop windows Firefox and Internet Explorer work.
An init executes in form onLoad to get the audio to preload. yeah… not sure if that worked.
The scaling above is to dynamically adjust the fields between Android and IOS differences in scaling for other devices…

Regards!
–Joe.