Page 1 of 1

Play sound from web client?

PostPosted: Wed May 01, 2019 12:24 am
by joe26
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();');



Code: Select all
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.

Re: Play sound from web client?

PostPosted: Wed May 01, 2019 1:11 pm
by mboegem
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:
Code: Select all
plugins.WebClientUtils.executeClientSideJS("play('audio/error.mp3')")


or this to pause:
Code: Select all
plugins.WebClientUtils.executeClientSideJS("pause()")


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

Hope this helps.

Re: Play sound from web client?

PostPosted: Wed May 01, 2019 3:58 pm
by joe26
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

Code: Select all
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.