Play Music Remotely – Audio Remote – Weekend Project

For a couple of months i was thinking to use our 28 Years old National Panasonic Boom Box as it was sleeping for a long time unused.  It’s a stereo player, tape recorder with Radio AM and FM Stations. The Audi Tape mechanical system are no more functioning. The FM radio antenna are not able to get the signal inside the home. So, the only way to use this effectively is to connect a MP3 Player as an Audio Input and use the Hifi Amplification system inside to blow up the room with the 2 BOOM Speakers attached to them.

Usually, i connect my iPhone as an Audio Input to play the songs. Since the Set is placed in a separate room on top of a Almarhi, i felt it was uncomfortable for me to go and select/change the song i want to listen everytime.

Eureka!. This created an idea to create a wireless remote programmatically using the simple Wifi network which is available in my Home.

How Audio Remote works?

This Audio Remote is created with a simple HTML5 based page which keeps requesting the server which song to play. Here the server is simply  a Apache Web Server running in my Laptop. A Simple Web Application is hosted in the Apache Server.

It has 2 files

1.Index.html : Client Side Page which sends ajax request to server for the song to play
2.Remote.html : User can use this to control the song to be played on the client side.

The communication between the server and client happens for data is accomplished using JSON.

Accordingly, when the Index.html is accessed from client, in my Scenario the iPhone, it gets a (playnow.json) JSON from server to know which song need to be played.  The playnow.json can be modified by user remotely and can choose the active song to be played.

The index.html uses the HTML5 Audio element for playing the music. The user can also control the volume of the client side while playing..

Now i can able to play any song which i wanted to be play through this iPhone and the BOOM box. Hurrah!. No more hassles of storing my huge collection on the device. I can play them when i working in my Laptop.

iOS Restrictions from Apple : (I used iPhone)

– Apple doesn’t allow you to autoplay any audio or video files in iOS Safari. This is just to prevent the data charges incurred through carrier plans. For the first time you should initiate the call by clicking the Play button.

– In iOS Safari, there is no way to programmatically control the volume of the playing music in the <audio> element

-The Index.html will stop listening the server for any new song request when the iOS device in sleep/idle mode.  Please use Chrome Browser in iOS so this will not be a problem even if your device is in idle state.

Code Flow :

Index.html

[sourcecode lang=”js”]

function checkMusicRequest(){

var musicIndex=-1;

$.getJSON( playNowUrl, function(data) {

currentVolume=data.volume;

musicIndex=data.playindex;

audioElement2.volume = currentVolume;

if(currentPlayMusicId!=musicIndex){ currentPlayMusicId=musicIndex; playAudio(); }

});

}

[/sourcecode]

remote.html

– Modifies the JSON datafile in the server with requested item so that client can read this file

Click here to download the source code.

AuthorNirmal

Technical Geek - Gadget Enthusiast - Loves Programming C#,PHP & IOS - Blogger About