 |
| Web Based Music Player |
Host your own web based music player for FREE !
Here, just as an example, I walk you through the usage of already developed Last.fm (The popular music content provider) web based client application and its deployment on one of the cloud platform. In case you are developing a web based music player using Last.fm as a content provider, you can deploy it onto your existing website(s) or you may want to place it onto your personal blog site.
Last.fm
Last.fm is a music website which can serve as an online music database provider which might not provide full free access to the music contents. There are other online music content providers that are largely available for free of charge e.g. vTunner, FreeDB, etc. In order to make your player free, you need to opt for any of such free music content provider.
The idea can be anything like to create the web based music player with rich UI contents (requires some impressing UI designing skills) which can allow us to browse and play the music contents in the below categories.
Music tracks categorized by:
Artist
Album
Track
Playlist
Favorites
Queue
Internet Radio's categorized by:
Genre
Country
Language
Favorites
The original client application
The application gives us the useful information about the Last.fm's top entities e.g. Artists, Album's or Tracks. It allows us to fetch the details about any particular track. Details could be anything like track name, url, duration, artist, album, album art url for different sizes, etc.
Hosting client application in the Cloud
I don't have the required environment setup to build and run this application on my machine. So, I used some trick to build and run this application anyway. In my earlier blog article, Run any code without any Environment Setup, I mentioned about the Cloud9 platform. I used the same platform here to manage the things as required.First of all, you need to create the work-space to host this application in Cloud9. You can also clone it from the GitHub link that I shared earlier for this application. While you create the work-space, you need to choose the correct reconfigured work-space template mentioned there. Once the work-space is created, Colud9 provides us the required environment setup to proceed further.
Setup and Configure the MySQL Database - The Workflow
In order to proceed further, you need to setup and configure the MySql database.- Configure your config.ini file as below:
; if change pls use the following command: git update-index --assume-unchanged config.ini
[mysql]
hostname = "localhost"
database = "test"
username = "root"
password = ""
[lastfm]
api_key = "e85bfd5e26e0e91b53160653d86ba063"
[google]
api_key = "AIzaSyDn-UcwMbrIiX8wgyNAlLyHnmqOvZsaddw"
- Right click the workspace folder and click 'Open Ternminal Here'. This should open the terminal.
- Execute below commands to run the sql script to import the mysql database (import_db.sql).
> mysql-ctl start
> mysql -u root
- Note: Log in without a password, as, the default root password is blank (i.e. empty string) not root.
- This should open the mysql command prompt. Now, run the below commands to create the test database (db name is already configured in config.ini)
mysql> CREATE DATABASE test;
mysql> USE test
Database changed
- Run the contents of import_db.sql here e.g. CREATE TABLE IF NOT EXISTS 'logtracks'... e.g. mysql> <contents of import_db.sql>
- Now the database is created and ready to use.
A PHP class LastfmController handles the call's to the LastFM API. There are some java scripts to help you get the response from the server and parse that JSON response into the tabular form as represented in its GUI. For example, the function getTopTracksTag in lastfm_artists.js file used to get the top tracks from the Last.fm. In response to that call, server gives the result in JSON format. The response is then parsed and filled into the HTML table to show to the user.
The sample JSON that we get is shown as below with the online JSON parser.
The sample JSON that we get is shown as below with the online JSON parser.
Run the client application
Now, you can run the application. On the created work-space there is an option "Run Project" to start running the application. Once you hit the run button, it internally starts the Apache server to host your application on. Once it is ready, the platform provides you the serving link as below using which you can test your application.
Starting Apache httpd, serving https://lastfmclient-jegaonkarsachin.c9users.io/.
Started apache2
When you run the application, it shows its own UI with the options to specify some inputs. Now, put some artist name and then select one of the tag names it has populated depending upon the artist name you put. It shows the top tracks tag result as below.
To play an audio files or radio stations in HTML, use the <audio> element:
Playing the audio on web using the HTML5 <audio> Element
HTML5 provides a standard for playing audio files. Before HTML5, there was no standard for playing audio files on a web page.To play an audio files or radio stations in HTML, use the <audio> element:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
Conclusion
From the things that I just have mentioned, I can say that, using Last.fm or using similar music content providers(but FREE!), one can create the rich web based music player for FREE !
You would have got an idea about generally how to consume music contents that the provider provides and how it can be used to create the intended player application.
You would have got an idea about generally how to consume music contents that the provider provides and how it can be used to create the intended player application.
