Radio


Introduction

RADIO plays streaming Audio. It features few radio station with logo and links to audio stream stored in an EachScape Cloud Collection.

 



Install RADIO 

Click here to install Radio in your Workspace



Customize RADIO

You don't need to understand how RADIO works to customize it.
Everything you need is in the Cloud Collection used by RADIO named 'Radio Streams List'

 Simply update the Station name, the matching Stream and the Image and the app will use the one you entered.


Note:
 When you install RADIO a copy of the Cloud Collection is installed in your Workspace, feel free to edit it as you like.


How does RADIO work?

Radio uses a Scrolling Pattern to list the Radio Stations.

You don't need to use a Scrolling Pattern for this app, you can use a simple list.

The List Block is simpler to use and is what we showcase in our First App.

We use Scrolling Pattern in RADIO to showcase its usage.

Scrolling Pattern is used to scroll pretty much any sort of Pattern you define: learn more about scrolling Pattern.


Radio also use a Cloud Collection.

Cloud Collection is illustrated in our First App, and in a dedicated Cloud Collection Tutorial.


Play Audio

The very core of RADIO is playing streaming Audio feeds.

It can be Live Radio or an audio file stored in your CMS or in EachScape Cloud Collection.


The key action for any app playing stream is 'Play Audio'

In the RADIO app, this action is associated to the Canvas: Sel. List in the Pattern on the main view of the app called '1.Radio Selection'

 

This screenshot shows the list item of the Pattern (Canvas : Sel. List) and the event associated to a Tap Event on that Canvas.



When a user Tap on the list of Radio stations (The content of that list comes from the Cloud Collection: Radio Streams List' the Play Streaming Audio action is triggered. It take the stream URL as parameter


 
 
PLAY / PAUSE

The Play / Pause button is implemented using a Selector.
We keep track of the status (Playing a stream or Pause) using a variable named PlayPause.
Each time the use select Play the status (using the variable) is set to 'Play' and vice versa.

Because when a stream is playing the button displayed need to be the reverse (Pause) we just look for the status in the Selector and display the reverse button.

This is the Selector configuration for Play / Pause:

Learn More
- Play Audio
- Selector