Android Publishing

Stephen · **Posted:** April 9th, 2019, 3:56 pm

I have 2 audio files (MP3's) referenced in the JavaScript, for an Android project:

Code:

S1 = new Audio('abc.MP3');
S2 = new Audio('def.MP3');

The JS is scripted as follows to play them:

Code:

S1.play();
S2.play();

When I publish to Android, how do you include these 2 MP3's in the final package? I'm guessing that they are not included inside the APK? Not sure where to put them so they can be accessed correctly by the JS and play properly?

Any help appreciated.

mackavi · **Posted:** April 9th, 2019, 4:22 pm

Create a button that you're not going to use and hide it. Then attach all the MP3s you need to that button. They'll all be copied into the assets folder along with the HTML file - which means that you can loaded by just calling their name.

</mack>

Stephen · **Posted:** April 9th, 2019, 4:58 pm

Hi Mack,

Looks like the 2 MP3's were copied into the APK, as you suggested, using a hidden button. (I attached the 2 MP3's by calling each to play as a sound file, using their absolute, not relative path.)

But not playing when called in the JS in the button used for the app.

Code:

S1 = new Audio('abc.MP3');
S2 = new Audio('def.MP3');
S1.load();
S2.load();
S1.play();
S2.play();

Not sure how to get the 2 sound files to play?

mackavi · **Posted:** April 9th, 2019, 5:08 pm

If you publish as HTML5 and preview in Chrome does it work?

</mack>

Stephen · **Posted:** April 9th, 2019, 5:16 pm

Yes, the MP3's play in FF or Chrome in an HTML5 publication (including if viewed in these browsers on the same Android testing device). Except I don't need to use a hidden button to add the MP3's, since I add them to the export folder which is uploaded to the server.

Another exception, I only need in the HTML5 publication's JS.

Code:

S1 = new Audio('abc.MP3');
S2 = new Audio('def.MP3');
S1.play();
S2.play();

No need for "load" function in my HTML5 publication.

Does the Android JS need a better path than 'abc.MP3' since maybe it is in a res folder inside the APK?

mackavi · **Posted:** April 9th, 2019, 5:25 pm

Can you send me the APK?

</mack>

Stephen · **Posted:** April 9th, 2019, 6:10 pm

Yes, latest APK sent to general at your interaktiv address. (approximately 1MB)

Let me know if you don't get it or need me to send it to another address.

mackavi · **Posted:** April 9th, 2019, 7:59 pm

Looking at the files inside the APK, the mp3 do get called and appear to play. But as I don't know what is supposed to actually happen, I'm not sure if it's behaving correctly.

Can you send the publication?

</mack>

Stephen · **Posted:** April 9th, 2019, 8:31 pm

OK, I've zipped it up, put it on my Google drive with an invite to share the zip folder with you, sent to your general at interaktiv email address. Let me know if you don't get the email invite or have difficulty downloading or viewing it. (Also added a note in the email invite about when sound is supposed to play.)

Thank you for your help.

mackavi · **Posted:** April 9th, 2019, 11:58 pm

Both the content extracted from the APK and original published directly to HTML5 work in Chrome.

I'd hazard a guess it a problem with WebView and may be linked to the use of SetTimeout.

You could try adding the play script to a button to see if the MP3 can be launched that way.

</mack>

Stephen · **Posted:** April 10th, 2019, 12:27 am

update

If I use a button with the standard Opus "play sound" action, publish to Android, test on my device, it plays the MP3.

Seems that it only does not play if the MP3 is called using JavaScript.

Not sure how to fix this, since the animation requires using the complex JavaScript scripting in order to scale, set timeouts, play and sync sounds with the animation?

Would preloading the sound files help? (Not sure, if preloading would help, how to preload these sound files?)

mackavi · **Posted:** April 10th, 2019, 9:46 pm

It does seem that there are issues reported with audio on Android Webview - but, I ran a couple of tests:

First I ran it through PhoneGap and the project still did not work.

Second I created a new project, attached an Mp3 to a disabled frame and then use a JS action to load and play it.

Code:

var A1 = new Audio("music.mp3")
A1.play();

Published to Android and it played the sound fine -so JS does work at least in this instance.

The last test I tried was to use the code above inside a setTimeout delay which failed to launch the audio.

</mack>

Stephen · **Posted:** April 10th, 2019, 11:25 pm

Thanks, Mack for these updates.

It looks like trying to launch audio inside of a setTimeout may not yet be possible for current Android Webview.

I'm guessing, given the looping in which the setTimeout and audio are repeatedly called, that preloading the sound (for example, when the window first opens) would probably not help.

And, I can't think of another way to write the JS to achieve the animation and launch/sync its audio. Oh well...

My goal for the Android version was to provide a download-able version for the user to run the exercise on their device (smartphone, tablet, etc.) when they do not have an internet connection to view the HTML5 version.

mackavi · **Posted:** April 13th, 2019, 9:11 am

It seems it's not that simple or broken after all. I recreated the bases of the concept in a different application to see if it was Opus that was causing the problem. The SetTimeout worked with Audio. But the other application requires that you create functions rather than use snippets of code - so I figured I'd check this in Opus.

Opus JS Action keep telling me that my code was wrong, and yet it still worked.

Code:

function loopTheBeep() {
var beep = new Audio("beep.mp3");

function loop() {
window.setTimeout(function(){
   beep.play();
   loop();
   },2000)
}
loop();
}
loopTheBeep();

It's a place to start testing, if you need to have it running on Android. You'll just need to introduce one aspect of the original code at a time and check it still works.

</mack>

Stephen · **Posted:** April 13th, 2019, 1:25 pm

Hi Mack,

Thank you for this.

I tested using the loop script and including an MP3 sound file (added as a resource by attaching it to another button).

The JS so far plays the sound, sometimes (works intermittently), when tested on my Android tablet (while the other button using a standard Opus audio action does play).

Doing more internet research, I found another possible offline option to let the user run the exercise when offline, no internet connection available: the HTML5 offline web app feature which apparently makes use of an HTML5 application cache and uses a cache manifest (see http://apress.jensimmons.com/v5/pro-html5-programming/ch12.html and https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache). A more recent iteration: progressive web apps or PWA's (see https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps and https://github.com/ryanwhocodes/template-progressive-web-app)]. There's also an O'Reilly guide: Building Progressive Web Apps: Bringing the Power of Native to the Browser.

I am guessing that if the user is offline, opens their browser, enters the index.html URL for the app, after a first viewing (in which the files downloaded to the user device cache), they could view the exercise offline?

Steep learning curve for me to get the cache manifest (and any other internal script items, like enabling the app cache, that point to the manifest) correctly scripted. So, a big challenge. But an interesting possibility.

Would be nice to find an HTML5 to Progressive Web App converter, then could take an Opus HTML5 publication and convert it to a PWA, which the user could download for offline use.

Digital Workshop

Android Publishing

Who is online