Play sound from web client?

Using Servoy to administrate the content of your website? Discuss all webrelated Servoy topics on this forum!

Play sound from web client?

Postby joe26 » Wed May 01, 2019 12:24 am

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.
Last edited by joe26 on Wed May 01, 2019 3:58 pm, edited 1 time in total.
joe26
 
Posts: 102
Joined: Wed Jun 19, 2013 10:30 pm

Re: Play sound from web client?

Postby mboegem » Wed May 01, 2019 1:11 pm

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.
Attachments
audio.js.zip
(712 Bytes) Downloaded 7 times
_____________________
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance SAN Developer

Image
User avatar
mboegem
 
Posts: 1499
Joined: Sun Oct 14, 2007 1:34 pm
Location: Hoofddorp, The Netherlands

Re: Play sound from web client?

Postby joe26 » Wed May 01, 2019 3:58 pm

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.
joe26
 
Posts: 102
Joined: Wed Jun 19, 2013 10:30 pm


Return to Web Development

Who is online

Users browsing this forum: No registered users and 2 guests