📻 WebView Radio Stream Player

SteveJG · May 5, 2023, 2:51pm

WebView Radio Stream Player

This is an experimental, no frills radio stream player. The app uses the Custom Webview control by Sunny vknow360 CustomWebView : An extended form of Web Viewer . No audio player component is needed. The app requires the stream's direct MP3 web address, the URL, to connect to the live streams. In general most of the streams provided with the example are low bandwidth 24 kbps MP3 streams.

Streams with higher bit rates produce better sound than streams with lower rates. This bit rate is measured in kilobits per second (kbps). Higher bit rate streams sound better, they also require higher bandwidth internet connections and might not work well on some mobil data plans.*

The Project is an app in progress. I reached a point where I am unable to improve its stability. I am soliciting the community for some help and ideas. I initially started this Project with the WebViewer. I discovered some of the tools in the Custom WebViewer are needed.*
The objective for this project is to develop a stream player easily controlled by visually impaired users. The stream should load automatically without having to press a button on the link. All the urls in the accompanying list of streams except WNYC, AustraliaBC, VOA, NRK and LA Country fulfill those requirements. The web links for these streams display a web page with a clickable player link; difficult for someone with unstable sight to navigate.
The app has four methods of stream selection meant to be easy for the visually challenged to navigate. All four announce the selected link using TextToSpeech.

One method uses a ListViewer (useful for those users who have some ability to navigate the app's screen).

A second method is a Button that selects a link randomly using a large button.

A third method is a Button that traverses the list of links one at a time with each Button touch. No image posted, this is just another Button that is not currently cluttering the app screen.

A fourth method uses the SpeechRecognizer to select a stream number (say zero and then the stream number). The item in the csv corresponding to the url appears to the right of the SR Request by number Button.

A large number of urls that stream is:

CSV Table of some active direct radio streams:

Almost all of the links in the playlist load and start the audio stream automatically. Several urls in the playlist do not load automatically; they require viewing the stream provider's web page and searching for the web player on the Web page. For the most part, these urls are the last eight items in the provided csv of links.

Facts about the example app:

To avoid issues, compile the aia and install the apk. The Companion cannot ensure it uses all the features of the extension.
error control is minimal; looking for suggestions to handle errors and dropped streaming.
plays a large number of direct audio streams
What to do when Webviewer becomes un-responsive or locked. if you lose the feed, here are some possible remedies
1 if the player controls show, you might toggle the play stop icons or grab the progress indicator and drag the indicator towards 0:00 Sometimes switching to another stream allows the player to continue (but on another stream)
you might lose the feed if you have a network issue.
2 if the error is not recoverable, close the compiled app, then restart the app and make your stream selection again. This usually happens when you listen to a stream for a long time then decide to change streams and the app locks up. You have to restart the app until I or you provide a way to continue gracefully.
I notice some streams play continuously for as much as on hour; others might have network issues within a few or dozen minutes of playing. Some radio streams are more stable than others. Usually these streams are those that stream in lower audio quality.

The Future

a File control could be used to provide a csv listing of stream links from an external source to update the links in the app. No code is provided.

How to use the app:
There are four ways to select an audio stream. One option is disabled in Screen1.Initialize. Three selection methods are enabled. The app you build only needs one.

The enabled selection methods: one uses a ListPicker, another is a routine to provide a random link using a Button touch (Each time it is touched, a new link is selected. No effort was made to eliminate previously selected links.) and another uses the SpeechRecognizer. Select Button8, say the stream number preceded by a zero, for example 05. The zero said first helps the recognizer to determine the USER is saying a number when the number is less than two digits in length. Currently 43 streams are provided. The recognizer understands English.

The disabled method uses a Button to cycle through the streamLinkList, one item at a time. You can enable it (Button7) by setting Button7.Visible to true in Screen1.Initialize.

Load the apk, select the app, then use one of the mention methods to select a radio stream. Be patient, it may take a few seconds to load the stream an begin playing.

Tools to handle and debug issues are primitive
There are a few hidden testing tools. Enable Button5.Visible and Button6.Visible by setting them to true in the Screen1.Initialize event handler.

References
Screen Readers for the visually impaired. How some Android users are able to navigate an Android app. Two are Jieshuo and TalkBack. TalkBack is accessible in the Android device system settings.

Community discussions about visual impairment: Search results for 'blind' - MIT App Inventor Community

Testing
Does this app help anyone with a visual impairment. Sorry, I don't know how useful it is at present. It was started when a totally blind person asked a question regarding his ability to code such an app. I am aware of several individuals who do successfully code app inventor Projects who have various degrees of visual impairment. Until now I never met one who has to entirely rely on screen readers. I found this app a challenge getting a stable player to work despite being able to use the graphic interface.

I did some early testing using TalkBack. It works but working with it was extremely frustrating.

I did not test with the help of any visually impaired individual. Whether this app is actually useful is not known.

Challenges
Develop user friendly user interface for the visually impaired that can use screen readers. It means using meaningful Labels, Text and the TextToSpeech component. I tried the TalkBack Android screen reader. It confuses me and is awkward to turn off the feature on a device.

How can we handle the following Errors
=======================
net::ERR_FAILED
net::ERR_NAME_NOT_RESOLVED
net::ERR_CONNECTION_ABORTED
ERR-CONNECTION-TIMED-OUT
errorCode -1 (ERR_FAILED) is usually self correcting.
========================
I attempted some code but it does not allow having to restart the app to recover from the errors. Perhaps someone has some ideas?

Keep the number of options simple . Cluttered screens are to be avoided. Since this is a demo, the screen is getting crowded unfortunately. The final app should limit the selection option.

Battery level. Streaming constantly depletes your battery. Should you monitor battery state and provide a battery level warning?

Using the SpeechRecognizer to control the audio stream selection makes the app accessible to those with other handicaps and perhaps easier to use for the visually impaired.

The app was designed and tested on an Android 13, Samsung A13 cell. Performance in part depends on whether you are wifi or data connected to the Web and the speed of your connection and the stability of the streaming url.

The Font used in the ListViewer: Mynerve Project Authors (GitHub - carolinashort/MyNerve: A handwritten font for notes and comments) is licensed under the SIL Open Font License, Version 1.1 available with a FAQ at: SIL Open Font License (OFL) Caution: this pretty font causes the app to crash on an Android 9 and possibly lower. If you have issues, change the ListViewer font to the default font in it's Properties.

I hope this app contains some code and ideas that can make App Inventor apps more user friendly to handicapped users.

Can you improve error control or performance? Please post some Blocks. I suspect the app is not taking advantage of all the techniques in the CustomWebView to make the work again if Android locks the ability to restart the viewer.

Radio Streaming aia
RadioStreamVI_SR.aia (225.0 KB)
Running using the Companion works but you get better performance by building and loading the apk.

Radio Streaming aia with Stay Awake
RadioStreamVI_SR_SA.aia (224.9 KB)

Version of app that uses default font in the ListViewer. It uses a Stay Awake routine. Stay Awake prevents the app from going to sleep extending stream play to avoid 'doze'. Default font is required on Android 9 and perhaps lower versions since ttf fonts not supported. See post #5 📻 WebView Radio Stream Player - #5 by SteveJG .

Radio Streaming aia with Keep Alive Service (KAS)

RadioStreamVI_SR2KAS.aia (287.3 KB)

RadioStreamVI_SR2KAS.aia uses Ullis' Keep Alive Service to play radio streams in excess of 60 minutes in the foreground while allowing you to use other apps concurrently.
Be aware, like a Stay Awake routine, KAS eats battery energy. You must test this after compiling and installing the apk. The KAS version won't run using Companion.

This is a beta version. Hope to eventually fix the bug that freezes the player after many changes of channel switching. No issues have been noticed if you stay on a single channel or only switch among a few. If the player freezes; turn off the service (Stop KAS first). Android 9 and lower developers probably need to reset the pretty ttf font to default to get this version of to play.

KAS running

Enjoy this simple streaming app.

Regards,
Steve

vknow360 · May 5, 2023, 3:10pm

App is amazing

Usually these errors can be fixed by simply reloading the page. Please check.

SteveJG · May 5, 2023, 3:21pm

Thanks Sunny. I tried several way to reload the page. See grayed out Blocks. None of them worked for me. How do I 'simply reload the page'? I tried

or maybe this?

this I don't remember if I tried that. I will test later today. Thanks.

Anke · May 5, 2023, 4:58pm

The music stops after 3-6 minutes as soon as the device is in idle mode (on my test device, Samsung Galaxy Note8, Android 9 - identical to the Galaxy S8). This is a long known issue related to Doze mode. To avoid it, a Foreground service must be used.

I have pointed out this problem many times and years ago (e.g. also in the old AI2 forum, Niotron, Kodular forum).

SteveJG · May 5, 2023, 8:12pm

Thanks for your observations Anke. Yes, that is an issue but not the only solution.

A Stay Awake routine can also prevent the screen from closing.
Either

use a Stay Awake block routine using a Notifier

-How to keep the screen on

or you use Taifun’s Tools Extension: https://puravidaapps.com/tools.php

Be aware using either an extension or a block routine drains your device battery rapidly . These work around methods are not running the app in the Background, they force the app screen to stay open.

A user can also use his/her finger to keep the screen active
A user can also set his system to allow the screen to stay awake for an extended period of time (up to 30 minutes on my A13).
To avoid it, a Foreground service must be used as you mentioned.

So far, my experience has been similar to yours. My screen time out is set by the Android settings for a longer period than yours (5 minutes) so I experience:

Using installed apk:using ListViewer select on an Android 13, Samsung A(13) cell phone and used Wifi
Started Classic FM 02:16
Screen went to sleep at 02:21
Still playing audio stream at 02:27
Audio paused 02:29
Using ListViewer restarted at 02:29
continued through 02:42 screen went to sleep.
coninued playing through 2:48

that is essentially 22 continuous minutes.

Previously ran continuously for almost an hour by occasionally tapping the screen to stay open.

Patryk_F · May 5, 2023, 11:10pm

Can I equip your app with a stream finder that I use on my ESP32 internet radio? In my case, on android 9, the app crashes in companion. Ok, I see it's because of the custom font :).

SteveJG · May 5, 2023, 11:40pm

I was going to guess the font made the issue. Great detective work. I did not anticipate that. Need to place a caution in the write up letting others know with Android 9 and possibly lower coders need to use the default fonts.

Is this what you are talking about https://www.instructables.com/Internet-Radio-Using-an-ESP32/ .

Sure. The Radio Stream player code is for everyone to experiment. I am trying to produce something that is stable and that a visually impaired individual could actually use.

Anke · May 6, 2023, 9:21am

I'm aware of all the ways to keep the screen alive. Having published numerous apps in the Play Store (Android) and App Store (iOS) for more than 10 years, I know very well how users react to such KeepScreenOn variants.

It shouldn't be a coincidence that almost everything has been done on both Android and iOS in recent years to reduce battery consumption (on Android, e.g. since API 23 through the introduction of the Doze mode). In this respect, the only option left is to use a Foreground service (at least with Android on devices with API 23+).

Patryk_F · May 6, 2023, 11:06am

Yes, the battery is still a problem in new devices. The development of the battery does not keep up with the development of technology. In the past, an 800mAh battery lasted several days in phones, now 5Ah is not enough ... and we know that a larger battery is a bigger, thicker and heavier device... That's why they come up with newer and newer optimizations for apps...

Patryk_F · May 7, 2023, 9:49am

Similar design but by a different author. I found on github.

Here is your radio with search and favorites list.

RadioStreamVI_SR.aia (230.0 KB)

SteveJG · May 7, 2023, 3:40pm

Yes, in some instances this code works
unrecoverable

except when the WebView displays this rotating icon .

When that spinning icon appears the only solution is to close the app and restart.

Any ideas? I will continue to experiment and try to trap the error message associated with the failure.

TIMAI2 · May 7, 2023, 4:48pm

Perhaps this for errors?

Also, this seems to work well using the native webviewer, what is the need for CustomWebview? (although nothing wrong with using it )

SteveJG · May 7, 2023, 5:13pm

Nice idea but using it refused to identify any errors I was getting. I tried the CustomWebView and it works to find errors.

Later today I will try your method of restart. Thanks

Patryk_F · May 7, 2023, 5:45pm

The only problem is that at this point when playback stops, CustomWebView doesn't return any error. He just freezes. I haven't noticed any dependencies either. I tried different streams mp3, aac, with different bitrates and the error occurs randomly.

Maybe it will be more stable just with some player. where you will also get metadata with the title of the song being played. I don't know if it makes sense to break down doors that are open.

Anke · May 7, 2023, 6:14pm

It doesn't matter what audio format is used. The stream breaks off after a few minutes (~3-6 min randomly) in idle mode. I tested it (years ago) intensively and extensively on all AI2 distros. Doze mode shuts down all possible functions after a while to save battery power.

Again, the only way to avoid the problem is to use a Foreground service (at least if the app is going to be published on the Play Store; otherwise, there is a workaround).

Patryk_F · May 7, 2023, 6:19pm

It's not about idleness. We're talking about another bug, when switching streams sometimes some streams stop the player and then no other stream can be played. it's like webview is hanging... Then you have to turn the app off and on again. But later on the same link works that previously failed...

For that matter, I'm already experimenting with the Itoo extension, and your ActivityLifecycle. Is there any extension you recommend for the Foreground service?
I also made an extension that fetches Metadata from the url link, useful when using a WebView instead of a player.

Anke · May 7, 2023, 6:37pm

It may be because it takes some time to buffer.

Taifun · May 7, 2023, 7:36pm

Taifun

SteveJG · May 7, 2023, 7:41pm

Tried using open another screen screenName Block as you suggested. Unfortunately it does not unlock the Custom Web Viewer. Interesting potential work around but it is not a solution. Thanks

TIMAI2 · May 7, 2023, 10:03pm

Can you make the webview freeze on demand, I have not had it freeze on me yet?