LinuxMeerkat

I swear! Meerkats can do Linux

Headless mp3 player

10 Comments

I am working on a greasemonkey script where I want to be able and play mp3 files in the background. The <audio> tag would be a good and easy solution but unfortunately Firefox doesn’t support mp3 playback because of license issues.

With headless we mean gui-less. So I was looking for a dummy mp3 player that would just do the playback while all the control would be javascript driven.

I found in the end this simple .swf file here that supports the follow:

  • Play
  • Pause
  • Stop
  • Loop on/off

The problem I faced, as usual, was zero documentation. Although the source code of the mp3 player is available, it was hard for me to decode how to use the player, especially when I am totally unfamiliar with actionscript.

In the end I managed and in fact I made two minimal templates to help out future users.

Steps

  1. Download this package. Alternative links: on 2shared, on speedyshare
  2. Unpack to your server.
  3. Browse to index.html or index2.html

Scenario 1

index.html uses inline javascript inside the html code to control the mp3 player. In particular it makes normal <a> tags that once clicked send a query to the mp3player.swf:

<a href="javascript:mp3player.playSound('song.mp3')">Play</a>
<a href="javascript:mp3player.pauseSound()">Pause</a>
<a href="javascript:mp3player.stopSound()">Stop</a>
<a href="javascript:mp3player.loopOn()">Loop On</a>
<a href="javascript:mp3player.loopOff()">Loop Off</a>

This is the fast dirty way to get things work without using an external javascript file.

Scenario 2

Index.html2 loads an external javascript file which in this case is controlplayer.js. This is much more flexible and lets you add advanced behaviour from inside the javascript file.

As you notice the html code is as simple as this

<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>
<button id="stopButton">Stop</button>
<button id="loopOnButton">Loop On</button>
<button id="loopOffButton">Loop Off</button>

the key elements in this segment are the ids. As long as the ids are not changed you are free to change the tag type as you wish. For example

<h1 id="playButton">Play</h1>
<p id="pauseButton">Pause</p>
<div id="stopButton">Stop</div>
<p id="loopOnButton">Loop On</p>
<a href="javascript:return" id="loopOffButton">Loop Off</a>

does work as good as the previous code without breaking any functionality.

NOTICE: If controlling the playback doesn’t work once you unzipped, make sure that the files are on your website folder. Launching the .html files directly from a local folder(for example “desktop”) will not work. That is due to security reasons when it comes to flash.

10 thoughts on “Headless mp3 player

  1. Would like to find the package files associated with this blog. Please help if possible.

  2. The download link no longer works…

  3. demo does not work anymore

  4. forgot to mention, tested on multiple browsers, two PCs, this one had according to this
    http://helpx.adobe.com/flash-player/kb/find-version-flash-player.html

    flash player 11.5.502.135 on x64 windows

    • It does work for me. What exactly is the problem? Did you try to change permissions for the files so everyone can execute them?

      • Problem is that I am a moron who though I could just ignore step 2 and play it locally and who just cant be bothered to actually read few words of instructions.

    • Tested with 11.2.202.258. I have no windows machine to test.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s