By Sabir Valappil Thattath

 

The ITSmobile system from SAP plays various sound files to notify a user whether a server transaction was a failure or success. This is implemented by presenting the <bgsound> HTML tag to the browser. Though the <bgsound> element was once used for playing a sound in background, the tag is now obsolete and treated as a non-standard element; it is presently supported only by IE engines.

 

This creates a problem for SAP users when running existing SAP applications on standard HTML5 browsers. A recent customer interaction involved the need to run an application on a Windows Mobile/CE device with the webkit engine. As expected, the <bgsound> tag would not function on that HTML5 webkit engine, so we solved the problem by developing a workaround.

 

On devices running Android, there's a way to solve this problem without a special workaround and without modifying the SAP application. The answer come with DOM Injection and some JavaScript. Our solution parses the HTML document to replace the <bgsound> tag file with an HTML5-compatible audio tag. We put HTML element-replacing logic to a JavaScript file and included that JavaScript file in the CustomDOMElements list. For complete details, please refer the DOM Injection docs.

 

Below is the script that will be injected and executed once the DOM is ready on the webview:

 

function playBgSound()

{

//get list of bg sound tag, ideally any page will hold one sound file only :-)

  var bgs = document.getElementsByTagName('bgsound');

 

   for (var bgElementIndex=0; bgElementIndex<bgs.length; bgElementIndex++)

   {   

    

      //get the url of the sound file

        var bgSrc = bgs[bgElementIndex].getAttribute("src");    

      //create a audio HTML element supported by webview

       var audioTag = document.createElement("AUDIO");

      audioTag.setAttribute("src",bgSrc);//set sound file url

      audioTag.setAttribute("autoplay","true");//set autoplay to true  

      document.body.appendChild(audioTag);//insert to document body

   }

 

}

playBgSound();

 

Any custom JavaScript files to be injected to DOM have to be referenced inside the CustomDOMElements file (in our case, the file name is mytags.txt) as shown below:

 

<script type='text/javascript' src='http://10.17.121.52:9999/xampp/ebtest/bgsound/playBgSound.js' pages='*'/>

 

The above tag ensures that the script will executed on all pages of the application.

 

In addition, the CustomDOMElements file name also must be referenced in the app's config.xml as shown below:

 

<CustomDOMElements value="file://%INSTALLDIR%/mytags.txt"/>

 

The attached file ("bgsound.rar") contains a sample application that tests the solution described here.

 

Here's how to use it:

1. Extact the rar file and host the test app "test.html" on a server.

2. Place the "decode.wav" and "playBgSound.js" files in the same location as test.html.

3. Open the mytags.txt file and update the 'src' field so that the path to "playBgSound.js" is correct with respect to your server IP.

4. Open the Config.xml and update the 'startpage' attribute so that the path to test.html is correct with respect to your server IP.

5. Copy the mytags.txt and Config.xml files to the /com.symbol.enterprisebrowser folder in your android device.

 

Your Enterprise Browser is ready to play the sound.

 

Before that, let's examine the contents of test.html:

 

<!DOCTYPE html>

<html>

<head>

<title>HTML bgsound Tag Support on EB Android</title>

</head>

 

 

<body>

<bgsound src=".\decode.wav" />

 

 

 

 

<p>This doesn't create any result on the screen but it plays sound file in the background.</p>

 

 

</body>

</html>

 

This is a plain HTML page that has a <bgsound> tag. We are going to play the sound in background while loading the HTML page test.html (your start page in config.hml).

 

Launch EB to play the sound!!

 

Underneath, our script replaces the <bgsound> tag with an audiotag, but it doesn't matter because your SAP app is not aware of it. :-)

 

Sabir Valippil Thattath is a senior software engineer with Zebra Technologies.