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
- Download this package. Alternative links: on 2shared, on speedyshare
- Unpack to your server.
- 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.