Trying to have now playing in my app

[Hottunez_Radio]

A box With play button

You test it

Also does this Metadata/info or "now playing" on exo player url stream - Discuss - Kodular Community

Still work at all? If it does would the stream I use
Work with the purple block?

[Taifun]

you forgot to answer the questions

@Hottunez_Radio

Also does this Metadata/info or "now playing" on exo player url stream - Discuss - Kodular Community

Still work at all?

try it and let us know what you find out
Taifun

[Hottunez_Radio]

Documentation

this is what i get when i put that url in a browser

aia

wildstylez.aia (3.7 MB)

[Taifun]

@Hottunez_Radio

this is what i get when i put that url in a browser

you just found out yourself, that the url does not return metadata, you get this instead

@Hottunez_Radio

error: invalid data

Taifun

[Hottunez_Radio]

yes live365 told me when they put that url in winamp or vlc
they get the metadata

[Taifun]

@Hottunez_Radio

Documentation

the documentation we are looking for are not your blocks... it is a documentation which describes what exactly needs to be done to get the metadata of that stream

@Hottunez_Radio

but i spoke to live365 they told me the stream thats in the now playing box
pulls the meta data from the stream?

Taifun

[Hottunez_Radio]

ok where do i get that from?

[Hottunez_Radio]

there's this

Wildstyleradio - Live365 Licensing Letter (1).pdf (64.3 KB)

[Taifun]

@Hottunez_Radio

there's this

did you read the document? obviously not

I now asked Gemini for you, below is the response
Taifun

---

Getting the current song metadata for a stream playing on Live365.com requires inspecting the web player's network activity, as the platform does not provide a single, public-facing, documented API for all streams.

The most reliable technical method for retrieving this information is by using your web browser's Developer Tools.

Here are the general steps to find the metadata endpoint:

1. Open the Live365 Stream Page: Navigate to the specific station page on Live365 that is playing the stream.
2. Open Developer Tools: Right-click anywhere on the page and select Inspect (or press F12 on Windows/Linux, or Cmd + Option + I on macOS).
3. Go to the Network Tab: In the Developer Tools panel, click on the Network tab.
4. Filter and Start Playback:

• Filter the network requests by XHR or Fetch to see API calls, or by Media to see the actual streaming files.
• If no requests are showing, refresh the browser page (with Developer Tools open) and press Play on the stream player.

5. Identify the Metadata/API Request:

• Look through the list of requests that appear in the Network tab. You are looking for a repeated request that returns a JSON (or similar) response containing the artist and song title.
• The request will often have a name like nowplaying, station, or the stream ID.
• A known pattern for a station's main information is often: https://api.live365.com/station/[station_id], which, when inspected, will contain the streaming URLs and sometimes the current track information.

6. Analyze the Response: Click on the identified request and look at the Response tab to find the current song and artist information. This endpoint can then potentially be called directly from an external script.

---

You can see a video about scraping websites by finding the API endpoint, which is the core technique needed to retrieve the Live365 metadata.

Scrape LIVE scores - No BeautifulSoup or Selenium NEEDED!

---

The task of programmatically getting Live365 stream metadata in an App Inventor app is essentially a three-step process: Connecting, Retrieving, and Parsing the data from the identified API endpoint.

This assumes you have successfully identified the specific API URL (the "metadata endpoint") that Live365 uses to send the current song information, as described in the previous response.

1. App Inventor Components

You'll need to use the following built-in components in the Designer:

• Web component: To make the HTTP request to the Live365 API URL.
• Clock component: To periodically check the API for new metadata (e.g., every 5 to 10 seconds).
• Label components: To display the extracted Artist and Title on the screen.

---

2. Blocks Programming

Step 1: Request Data Periodically (Web.Get)

Use the Clock component to call the API on a regular interval.

1. Set the Clock.TimerInterval property (e.g., to 5000 milliseconds for a 5-second refresh).
2. In the Clock.Timer block, set the Web1.Url to the specific metadata endpoint URL you found (e.g., https://api.live365.com/station/[station_id]/nowplaying).
3. Call the Web1.Get block. This sends the request to the server.

Step 2: Receive and Decode the Response (Web.GotText)

When the server responds, the Web1.GotText event is triggered. This block will contain the JSON data.

1. Check the responseCode parameter to ensure the request was successful (it should be 200).
2. Use the Web.JsonTextDecodeWithDictionaries block on the responseContent parameter. This converts the raw JSON text into an App Inventor dictionary or list of dictionaries.

Step 3: Extract and Display Metadata

Once the JSON is decoded into a dictionary, you can extract the Artist and Title.

1. Use the lookup in dictionary or get value at key path block to navigate the dictionary structure.
2. The key names (Artist, Title, etc.) must exactly match the key names in the JSON response you observed.
3. Set the text of your Label components with the extracted values.

Example Blocks Logic (Conceptual):

WHEN Clock1.Timer DO

→ SET Web1.Url TO "YOUR_LIVE365_API_URL"

→ CALL Web1.Get

WHEN Web1.GotText responseCode responseContent DO

→ IF responseCode = 200 THEN

→ SET json_data TO CALL Web1.JsonTextDecodeWithDictionaries responseContent

→ SET Label_Artist.Text TO CALL lookup in dictionary key "artist" dictionary json_data

→ SET Label_Title.Text TO CALL lookup in dictionary key "title" dictionary json_data

This approach leverages the Web component as the standard method in App Inventor for interacting with a web API that returns JSON data.

You can learn more about how to handle the received JSON data in App Inventor by watching this tutorial on using Web APIs with JSON.
http://googleusercontent.com/youtube_content/1

[Hottunez_Radio]

live365 don't have an api

[Taifun]

read my previous answer again, I added some more information at the beginning to find out the metadata endpoint...
Taifun

[Hottunez_Radio]

Think I've done it rite

Blocks

Designer

[ABG]

Don't stomp all over your input data.

[ABG]

Also,

No point in decoding JSON data if you're not going to use it.

[Hottunez_Radio]

I remove those two in DO

Then we're the arrows are I change them two to
Json_data if I'm understanding you correctly?

[Taifun]

What about first finding out; what was returned in response content before blindly trying to extract some data?

Taifun

[Hottunez_Radio]

'Yeeess' it's working!

[Taifun]

@Hottunez_Radio

it's working

now, as this is a sharing community, what about sharing your working solution, so someone else with the same question in future can learn from your solution?

Taifun

[Hottunez_Radio]

How I got my now playing to work

In this topic I'm helping people get there now playing
Working as I did

So first on the designer

I made a text box for now playing
Then for the cover artist I placed a web viewer In that web viewers HomeUrl I placed the Live365 embedded URL made the height and width to fit

Underneath yet another lable box for Loading Current Track(NOTHING TO DO HERE) but you rename it now playing or whatever you wish to call your lable

If your adding a clock to your project in designer set that to 5000ms

In blocks you add

When clock or whatever you name it .timer DO
Set Web_Nowplaying.url to text box
Now do this whoever your streaming with
May it be radio.co, live365 ect you left click
Inspect element goto the network tab press xhr or media
You'll find the streaming players or now playing API URL there

You then copy that API URL put it in that text box after you set web_nowplaying.url block with a text box

Underneath that you call a purple block web_nowplaying.get

Then you add the blocks in order for this to work for example recently played so you grab the block when recently played.gotText DO add a if then block to that

You go into the math draw grab an equals block the equals that's in the middle

You then make a couple of orange bars rite up the top rename them as seen in the image

you then plug the blue empty = into the if section the first empty box you place ResponseCode after = you place 200

In the Then Section again orange
set global json_data to call the purple block web_nowplaying.jsonTextDecode
JsonText now on the end of that you add orange get response content

Underneath that you add set global artists to dark blue get value for key in dictionary or if not found block

You add in the key part text block and put artist

In dictionary you add set global json_data in the if not found you add another text block and add unknown

Underneath all that you a dark green block
Set Label_NowPlaying.text To

Again remember I meantioned about dictionary block yes you got your adding that again to this but this time

In key your adding a blank text box and typing title
In dictionary your adding the same orange block
Get global json_data

Or if not found = another text box again your typing unknown

Images to help as well