Discussion Forums  >  WebViews and HTML for Mobile

Replies: 12    Views: 205

JimmySaver
Aspiring developer
Profile
Posts: 187
Reg: Apr 09, 2012
location unknow...
5,870
10/12/13 01:12 AM (10 years ago)

HTML Docs, Javascript and CSS Stylesheets in Android Self-Hosted Build - A Problem...

Morning all! Im trying to build an Android version of an iOS app I've recently completed. Nothing fancy. Just a menu button screen leading to a series of HTML docs (stored locally). I should start by saying that all of the HTML docs load and operate perfectly in the iOS build. So may problem is this… I have a HTML Doc (includes javascript, image (jpg) and sound (mp3) files) in an Android application (self hosted). The HTML docs works fine when launched in the ADT "browser" - so I think I cab be confident all of the file paths are correct. The HTML file also loads fine in all browsers when launched from finder. However, in both the simulator and when running on a device, the sound elements won't play in the HTML docs and the stylesheet doesn't seem to be processed properly. Worth a mention that the mp3 file is in the same assets folder (BT_Docs) as the HTML file. I tried it in the BT_Sounds folder and it didn't work. I also put in the BT_sounds folder with the BT_Sounds name referenced in the file path and this didm;t work either. As a belt and braces approach, I've also copied the files to a server and call the URL in custom URL plugin. This works fine (the sounds play) so, again, I'm confident that the referencing and code are all solid. Alas, I need this to be available offline and the sound files aren't cached. I've been around the houses (and around the forums!) for a solution and, basically, I'm stuck. I've: Changed the sound file formats. Changed the api target. Copied all of the javascript and css inline. Enabled Javascript to "true" and even enabled local storage in the java files for the relevant screens. All to no avail! The last thing I'm wondering is if, as in Xcode, I have to prevent the javascript from compiling somehow? (Like, in Xcode, when you delete the script from the compile sources and add it to the bundle resources?). Any help would be greatly appreciated, thanks in advance!
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
10/12/13 03:01 AM (10 years ago)
If it is a resource being used by the 'project', it should be placed in the proper 'Android' locations. (BT_Docs, res/drawable, etcetera) If it is a resource being used by an HTML file from within the project, it needs to be placed 'relative to' the path specified by your HTML tag. (although I can say it will/should end up in BT_Docs) So, if your screen is calling an image, the image should reside in your res/drawable directory. If your HTML page is calling an image, the image should reside in a location relative to the html page. Hope this helps. Cheers! -- Smug
 
JimmySaver
Aspiring developer
Profile
Posts: 187
Reg: Apr 09, 2012
location unknow...
5,870
like
10/12/13 06:43 AM (10 years ago)
Hey Smug, Thanks for the response. I'm *almost* certain that all of the file paths are correct and docs in the right location. Just to check though, if my example.html file is in BT_Docs, then the file reference for example.js should be simply "example.js" or "file:///android_asset/BT_Docs/example.js"? As I've tried both options, but thought I'd check anyway ;)
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
10/12/13 06:56 AM (10 years ago)
If your html page is sitting in your BT_docs directory, you'll want this image: <img src="logo.png"> to be in the BT_docs directory as well. Cheers! -- Smug
 
JimmySaver
Aspiring developer
Profile
Posts: 187
Reg: Apr 09, 2012
location unknow...
5,870
like
10/16/13 08:51 AM (10 years ago)
This is the sound of me (nearly) giving up. I've been through all the options I can think of (including about three days on stack overflow) and I think the issue is that there's no "media player" in the html doc plugin. The Logcat errors read: "Background audio LogCat error: 10-16 09:42:51.412: E/MediaPlayer(666): Attempt to call getDuration without a valid mediaplayer" ...when I load the HTML doc. This error is repeated everytime an audio file should play (which makes me think that the files are being recognised, just that the app doesn't know / can't play them. (As I say, the docs all work fine in a browser and on iOS so I'm 99% certain all of the file paths are correct). I think I made some headway with SmugWimp's thread on a background audio player but, being a dumb ass, I just had a load of errors. So, the question is, can I make / create a media player in the BT_screen_htmldoc.java to solve this?
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
10/16/13 02:28 PM (10 years ago)
For Android? Background audio is not currently supported. I found a bit of a fix; bascially you have to put one in yourself. https://www.buzztouch.com/forum/thread.php?tid=0DAA7A1F05FA0EA2DB0F277 Use is a bit limited. I has no loop count or anything fancy; it plays once and stops. What are the errors turning out to be? Which version of BT Android are you working for? Cheers! -- Smug
 
JimmySaver
Aspiring developer
Profile
Posts: 187
Reg: Apr 09, 2012
location unknow...
5,870
like
10/18/13 12:30 AM (10 years ago)
Good morning Smug! Thanks again for your replies! I'm on self hosted and building for Android 2.2 and above. The error that comes out in Logcat is "0-16 09:42:51.412: E/MediaPlayer(666): Attempt to call getDuration without a valid mediaplayer". A bit of searching on Stackoverflow leads me to believe that Android versions pre 2.3 don't have a built in media player (So I built to 2.3 but still no joy). I did have a play with the solution you mentioned but, not being an ace coder, I didn't get it to work. However, even if I did manage it, would the solution simply create a background audio player and I'd still have the problem of all of the other sounds not being played? (As mentioned, the HTML + Javascript is an image slider whereby a small sound is played on each image load). I've seen a few topics on this in the forum and I'm certain that the issue is that the Android level I'm building for doesn't include an incumbent media player. I have also tried building on the hosted version (BT V.3) where I believe a built in media player may come as standard. The issue here is that the new V3 offers the user an option to open the HTML file in a programme of their choosing - not so good for the seamless experience I'm looking for!
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
10/18/13 12:56 AM (10 years ago)
v2.2 (API 8) has a media player available; I use it. In your file imports, put: import android.content.res.AssetFileDescriptor; import android.media.MediaPlayer; In your class file variable declarations, put: private String audioFileName = ""; private String pageTitle = ""; private MediaPlayer myMediaPlayer; In your 'onCreate' method, place this strategically below your JSON assignments code... audioFileName = BT_strings.getJsonPropertyValue(this.screenData.getJsonObject(), "audioFileName", ""); pageTitle = BT_strings.getJsonPropertyValue(this.screenData.getJsonObject(), "localFileName", ""); if (pageTitle.toString().equals("about.html")) { if(BT_fileManager.doesProjectAssetExist("BT_Audio", audioFileName)){ try{ AssetFileDescriptor afd = getAssets().openFd("BT_Audio/" + audioFileName); myMediaPlayer = new MediaPlayer(); myMediaPlayer.setDataSource(afd.getFileDescriptor(),afd.getStartOffset(),afd.getLength()); myMediaPlayer.prepareAsync(); }catch(Exception e){ BT_debugger.showIt(activityName + ":EXCEPTION setting up soundPlayerCorrect. Message: " + e.toString()); } } } And that sets up the media player, and the audio file in which to play. Then, in your onStart/onResume methods, place this code: if(myMediaPlayer != null) { myMediaPlayer.start(); } And in your onStop/onPause/onDestroy and other 'halting' methods, place this code: if(myMediaPlayer != null){ if(myMediaPlayer.isPlaying()) myMediaPlayer.stop(); myMediaPlayer.release(); myMediaPlayer = null; } And that is really all that needs to be there. Check the plugin before and after you modify it, to ensure it works fine before you start. Just keep it one step at a time... Cheers! -- Smug Edit: Naturally you're going to want to edit perhaps both the audioFileName and the pageTitle; those were particular to the issue I was resolving, and aren't (likely to be) necessary for your project.
 
JimmySaver
Aspiring developer
Profile
Posts: 187
Reg: Apr 09, 2012
location unknow...
5,870
like
10/18/13 01:07 AM (10 years ago)
So, if you don't mind me asking, if I wanted to this work universally with the BT_screen_htmldoc plugin (i.e. I didn't want to define an audio file name so the screen would play any audio file referenced in it and this function would be available on every instance of the BT_screen_htmldoc) can I omit the audioFileName and pageTitle references? You'll see that my understanding of the Android environment is somewhat poor...
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
10/18/13 03:06 AM (10 years ago)
If this were to be in your plugin code, it would be available to all screens that use that plugin. The thing is, I only wanted the audio clip to play on one particular page, and no others. So although the media player code 'could' be used in other HTML pages, I didn't go that far. However all you really need to do is remove the 'if' statement for the 'about.html' file and it will play the sound file that you have in your plugin control panel settings, if any. If your audio filename is blank, it won't play anything. But again, I just stole the code for one particular task; it's not full featured by any means. Cheers! -- Smug
 
JimmySaver
Aspiring developer
Profile
Posts: 187
Reg: Apr 09, 2012
location unknow...
5,870
like
10/18/13 03:09 AM (10 years ago)
Great stuff, I've tried the above and have the background audio working. The next question, if you don't mind me pressing you (!) is how to get the "other" audio files to play in the HTML doc...
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
10/18/13 03:56 AM (10 years ago)
This code does not provision for any audio via URL, so the audio must be included in the package when you compile it. Or you can snoop around and steal code to get it to work; not that hard. In any event, in your BT control panel, go to the HTML screen control panel, and put the audio filename in the text box. One audio file per html page. You can 'hard code' a single audio file to play all of them, but it's more flexible (albeit a bit more work) if you specify an audio file for each page. Cheers! -- Smug
 
JimmySaver
Aspiring developer
Profile
Posts: 187
Reg: Apr 09, 2012
location unknow...
5,870
like
10/22/13 03:22 AM (10 years ago)
So.... I think we're getting somewhere now. Instead of the HTML doc calling the javascript I've now made a series of button menus. Each menu has one image as a button and links to the next image in the series. Using Smug's code (above) I've also got the menu screens playing background audio - ace! Just one final stumbling block before I can consider this as the working solution, however... If I return to a menu screen (using the device's back button) the image will load but the sound will not. It's almost as if the screen thinks t's already loaded and won't play the background audio...
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.