Being a big music fan, I was really excited to try out the Beats Music API. Not too long ago, Beats introduced a music subscription service and opened up their API to developers. I decided to create a fun sample that allows you to search for an artist by name and then return the list of available audio tracks for that particular artist.
This example requires an SSL encrypted connection to access the API. For Windows and iOS, this means you will need to install/include the SSL libraries. For Android, that is not necessary. More info on that topic can be found here.
This application consists of a tab control that is aligned to the client, containing two tab items and a toolbar with the title of the application parented to each of the 2 tab items. Tab1 contains several graphics for the design of the application and a top aligned toolbar with the name of the application.
Tab2 includes a client aligned ListView that displays all the audio tracks that are returned based on the query.
The search bar is just a bitmap (since I was going for a specific look) with a parented TEdit. The Search button is part of the bitmap, so I just used a TRectangle with no fill or stroke color to create a clickable masked area over the Search button part of the graphic. For TEdit, I right-clicked on the component at design time and selected ‘Add Item -> TClearEditButton’. This added the ‘x’ for clearing the input field. Alternately, you could have also used the TClearingEdit component instead of the TEdit component.
You will need the following Appmethod components to access the Beats Audio REST API and use it in your application:
You will also need to sign up for a developer account to get the required developer key (https://developer.beatsmusic.com/member/register).
I defined the following parameters:
For the display of the list on the second tab, I selected the ListItemRightDetail option. This provides me with 2 bindable members (Item.Text and Item.Detail) in the LiveBindings Designer.
I created the following bindings via the LiveBindings Designer (View->LiveBindings Designer).
This app only required a couple lines of code. When we first create the form, we want to execute the REST request:
procedure TForm1.FormCreate(Sender: TObject);
When the user clicks the Rectangle (the mask over the ‘Search’ bitmap), we need to change the tab (navigate to the second tab), and then also execute the REST request:
procedure TForm1.Rectangle1Click(Sender: TObject);
TabControl1.ActiveTab := TabItem2;
We also want the user to be able to leverage the back button on Android to navigate from the second tab back to the first tab which includes our search bar:
procedure TForm1.FormKeyUp(Sender: TObject; var Key: Word;
var KeyChar: Char; Shift: TShiftState);
if Key = vkHardwareBack then
if TabControl1.ActiveTab = TabItem2 then
TabControl1.ActiveTab := TabItem1;
Key := 0;
Here are some screenshots of the running app: