Audio MP4 Player

Click any button, or touch a song title, to play the audio track...


play buttonSail Away play buttonRule Of The Road play buttonBack Of My Mind play buttonChasing Dreams play buttonCountry Woman play buttonDream Come True play buttonLet Me In play buttonMidnight Train play buttonNo Place To Hide play buttonOn My Own Wings

All Songs © Roddy McKay

Getting this player to work on both the iOS devices and on PCs was like reinventing the wheel. After trying a lot of alternatives which produced good results on one device and not the other, the final solution was to use Flowplayer in a rather unorthodox way.

This is a combination of the audio player javascript with the video player HTML. The Tunes icon is equivalent to the splash image. The player is set to autoplay and controls/autohide is set to false. Autoplay is set to true since the player is launched when the image is clicked or, the case of iOS devices, poked with a fingertip. The image has been given a size of 40px square to make it a large enough target.

iOS devices open the player in a new window with varying results depending on which one is used. PCs launch the flowplayer controls to let you know which track is playing. One player will turn off when another is selected.

The div enclosing the audio players and song titles has been given a class so that the container can be styled and the contents adjusted in relation to each other using the rules set in this section of the stylesheet.

Each player needs to be given an ID number in the code. The player assets are in the media folder which also contains an audio folder where the mp4 song files are stored.

To be able to test the player locally using relative links to the assets, its necessary to adjust the security settings of the Adobe Flash Player plugin if installed.

This can be done on a Mac from System Preferences/Other/Flash Player/Storage. Click the “Local Storage Settings by Site...” button. Then click the + button and, in the popup window, enter “local” in the “Website Domain” box. Select “Allow” in the “Storage Access” dropdown and its done.

flash storage settings

The alternative is to go to Adobe Website and use the Adobe Flash Player Settings Manager to achieve the same result. Although the settings are being entered into the online application, they are actually stored on your computer.

Hopefully, someday Flash will disappear down a black hole on the dark side of the universe along with Internet Explorer and life will be a lot simpler. In this perfect world, Firefox will be updated to play MP4 using the HTML5 audio tag as well as getting a speed boost and a new name - Firefast. Until then, use Google Chrome and encourage all your friends to do the same!

Click HERE to get Google Chrome and send the link to all those unfortunates who are stuck with Microsoft's retarded operating system. The windows version of Chrome is really slick.