Saturday, March 17, 2012

Headless mp3 player

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:

[sourcecode language="html"]
<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>
[/sourcecode]

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

[sourcecode language="html"]
<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>
[/sourcecode]

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

[sourcecode language="html"]
<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>
[/sourcecode]

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 comments:

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

    ReplyDelete
  2. Not sure what you mean.. Would gladly help if you clarified what you want :)

    ReplyDelete
  3. The download link no longer works...

    ReplyDelete
  4. gettingcaughtpartofyourplanDecember 25, 2012 at 2:03 PM

    demo does not work anymore

    ReplyDelete
  5. gettingcaughtpartofyourplanDecember 25, 2012 at 2:06 PM

    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

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

    ReplyDelete
  7. Tested with 11.2.202.258. I have no windows machine to test.

    ReplyDelete
  8. gettingcaughtpartofyourplanDecember 26, 2012 at 2:55 AM

    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.

    ReplyDelete