📻 WebView Radio Stream Player

As I already said, since the introduction of Doze (Android 6, API 23):

Speaking of the freezing issue, what we meant was that when we use the built-in ai2 player to play a stream, the player freezes the entire app while buffering. Because caching is done in the main app thread. This gives a bad impression, especially when buffering takes a long time.

I see that he used a buffering notification in his app. This is some solution.

I researched the matter and tested several ways. It can be concluded that when the page with the Audio component is displayed in CustomWebView in app inventor, it is possible to automatically play the sound without user intervention. It is enough to intervene in the app inventor code, for example, in the "PageLoaded" block with CustomWebView". Just use setWebViewString to call click on the button that starts playing in java script.

This app implements it:

  • click the magnifying glass and search for stations
  • click "Szukaj"
  • playing the first station will start automatically
  • add several stations to favorites by clicking on the star
  • click on the heart to go to favorites
  • you can play your favorites
  • after closing and opening the app, 1 item from the list of favorites will be played

App made in 90% in javascript. App Inventor blocks mainly handle notification, errors, and metadata.


1 Like

Pixel 4XL / Android 13

After I had to search for some time and finally found and clicked this tiny button ("szukaj" = search?), finally the search process started and then this appeared:

Most stations don't play and when the app is exited the sound doesn't stop. You have to uninstall the app or clear Storage/cache in the app settings.

... and unfortunately this trick doesn't work on Android 13 (anymore). So that when you click on the notification, a dummy screen is opened, which is then immediately closed again. This works perfectly on older Android versions (but on Android 13 the screen is not brought back to the foreground from the background).

grafik

How do you close the app? double click back? Are you killing it by removing it from the task list?

I've tried all of them.

This is strange, because when closing, clicking back stops the player, so the sound should not be heard. On kill, however, an onDestroy event would be needed. Your sample app on my android 9 is also still playing after killing the app.

Unfortunately, I do not have android 13. How does it look on android 13? Nothing opens at all? Do you know any solution for this for android 13? I saw you have the LiveCycle extension, is it needed on newer androids? Since on Android 9 I didn't notice the need to use it with the MediaNotification extension.

Yes. You must get the screen manually from the background (via task manager).

Unfortunately not yet, but I haven't tried much either. Although I use this myself in my apps and actually need a solution for it.

But what could a solution look like that does not consist of bringing the current screen back into the foreground. Restarting the app cannot be a solution, because the music may be supposed to continue at a certain point.

You also get a strange view of the search engine. There should be 3 text boxes...I understand the differences between android versions but I think something done in java script should display the same on different androids.

Looks like it didn't come out all the way. But the search interface needs improvement, it's a draft. I think that I will choose a country using a list.

I checked the Radio you showed which showed an error. I got this error. Some streams do not allow access to the stream other than by entering the address in the browser. there is no solution for that here. This is a search engine, so if a stream doesn't work, we look for another one and add it to the favorites list, which is the target playlist. You just need to show the appropriate message.

Access to audio from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource [duplicate]

Glad you like it. Have fun.

You cannot pause a station because it is a stream. You can close a playing link by closing the app or changing the station or add a Button with this code

StopStreamingRadio
In some cases you can use the player icon that appears when you visit some links and possibly pause the stream with the shown controls.
pause

Javascript can be used to pause stream if that button is available.

1 Like

Hi @SteveJG ,
instead of use a CSV table for the radio list, You could use my WebRadio Extension
and save your radio list in a TinyDB.

Ciao Marco

1 Like

Thanks for the idea @Marco_Perrone . @Patryk_F previously posted an aia of a version of the original app he modified to incorporate a stream finder and TinyDB . It is the radio with search and favorites list.. It is really neat. Find the link for his RadioStreamVI_SR.aia on post # 9 or 10 in this thread.

I like the concept and it might be useful for users of the app who have all their sight (originally the Project was to make an app useful for those with vision handicaps) .. Developers will certainly be glad this option is available. They should test Patryk's aia and your interesting extension to create their 'dream' app. :slight_smile:

I'll see if I can modify with your extension. Thanks

--Steve

Hi Sunny. Thanks for the idea. How would you implement the javascript in the tutorial example? I don't have any idea how to do that. :slight_smile:

--Steve

document.getElementById('stop-button-id').click();

Now, the thing is that stop-button-id is not static for all streams. Some sites have this as id while others as class.

Thanks for the code.

Uhoh, that will be an issue. I will try to experiment later in the week to see if this is possible using the example apps and urls.. Would the code to " possibly pause" be similar. I found I can stop the stream just by changing the url to and empty value with Blocks.

It is the best way.
However, if stream link directly plays audio like http://stream.live.vc.bbcmedia.co.uk/bbc_radio_one
then you can run these queries to play and pause player.

document.getElementsByTagName('video')[0].pause();
document.getElementsByTagName('video')[0].play();