Flash MP3 Player - First version

Introduction

Here I will show you how to write a very basic flash mp3 player, how to compile the source code, and how to write some javacscript code that will implement it on a web page. It is a VERY basic player - all it does is start playing the music. Every thing else has to be done by javascript and html. You can see a demo here - my first flash mp3 player demo.

It works this way; you add place a little image on the web page (a start button), and when the user click the image, a javascript function starts the music and load a new image (a stop button). If the user click another start button while the music is still playing, the javascript first stop the music, before it starts the next song.

The tools

I use GNU/Linux (Ubuntu) on my computers, and the tools I use is free and part of the Ubuntu package repositories.

MTASC is an ActionScript 2 compiler. ActionScript 2 has been replaced by ActionScript 3, but for my use ActionScript 2 is more than suitable. There is an excelent documentation here.

swfmill is a "command line XML to SWF to XML processor". At the moment I am not really sure what it does and why I need it, but... Well, I will update this ection when I know more... :-)

The last thing you'll need, is an editor. I use gedit, but you may have a specialized program for writing web pages, and of course you can use that.

The code

Create these three files and save them in the folder.

myFlashMp3Player.as:

class myFlashMp3Player extends MovieClip {
  var song:Sound = new Sound(); 
  var song_url:String;
  
  function myFlashMp3Player() {
  }
  
  function onLoad() {
    song.loadSound(_root.song_url,true);
  }
}

myFlashMp3Player.xml:

<?xml version="1.0" encoding="utf-8" ?>
<movie width="1" height="1" framerate="1">
  <clip import="myFlashMp3Player_class.swf" />
    <frame>
      <library>
      <clip id="app" class="myFlashMp3Player" />
    </library>
    <place id="app" name="myApp" depth="0" />
  </frame>
</movie>

buils.sh:

#! /bin/bash
mtasc -swf myFlashMp3Player_class.swf -header 1:1:1 myFlashMp3Player.as
swfmill simple myFlashMp3Player.xml myFlashMp3Player.swf

Build the player

Make the file buils.sh executeable.

$ chmod +x build.sh

Run it.

$ ./build.sh

You should now have a file named myFlashMp3Player_class.swf and one named myFlashMp3Player.swf. You can delete the first one - the second one is the player.

Write the Javascript

Create the following script and copy it into a folder on the web server, fx. a folder named "music". Copy the file myFlashMp3Player.swf to the same folder. You also need to add two images to the folder - a start and stop image. In the script I call them "start.gif" and "stop.gif", so you may need to edit the script to usee the names of the images you use.

fplayer.js:

<!--
var el = document.createElement('object');
var start = "music/start.gif";
var stop = "music/stop.gif";
var prev_song = document.createElement('img');

function toggle(img,song) {
	var button = img.getAttribute('src');
	if (button == start) {
		prev_song.src = start;
		img.src = stop;
		load_element();
		el.setAttribute("FlashVars", "song_url="+encodeURI(song));
		document.getElementById('fplayer').appendChild(el);
		prev_song = img;
	}
	else {
		img.src = start;
		document.getElementById('fplayer').removeChild(el);
	}
}

function load_element() {
	el.setAttribute("type", "application/x-shockwave-flash");
	el.setAttribute("width", "0");
	el.setAttribute("height", "0");

	var attr_data = document.createAttribute('data');
	attr_data.nodeValue = "music/myFlashMp3Player.swf";
	el.setAttributeNode(attr_data);

	var attr_FlashVars = document.createAttribute('FlashVars');
}

window.onload = function () {
	load_element();
}
-->

Add the player

Somewhere on your web page, write this code:

<div id="fplayer"></div>

You can add it anywhere you like, it will not be visible. Now you are ready to add the music.

<img src="music/start.gif" onclick="toggle(this, 'music/my_cool_song.mp3')"; />

This is just a simple image tag with an onclick event added. When the user click on the image, information about what image was click and what song to play is sent to the javascript function "toggle". It will look like this:

You can click the button and see how it starts the music and change the button to a stop button. You can add a title near the button, and/or you can create a link, so the user can download the song.

<img src="music/start.gif" onclick="toggle(this, 'music/my_cool_song.mp3')"; />
<a href="music/my_cool_song.mp3">my cool song</a>

Now it will look like this:

01 - Sunday Morning

If you add more songs, it will begin to look like the demo. You may not like the look, but it's up to you to change it. You can use another start and stop button, you can use CSS to change to color of the links, you can ... do what you like.

Home >> Flash, Javascript and html