A Flash Music Player

Philosophy: I am not a huge fan of looking at a timeline when listening to music (the same goes for audio waveforms). The reason is that it encourages the user to be inpatient, quickly scroll trough the content and possibly a negative time expectation.

Click on the image to see it in action

The principle behind this player was that I wanted the Player to be easily reconfigurable, flexible and controllable via CGI generated playlists. The playlist comes from a CMS that delivers meta information and which files is for the public domain or not. The playback is controlled via a combination of javascript and actionscript.

Techniques and scripts behind the player

Things needed

An array with sound files to be played
A trigger that will start the player
A way to launch a specific sound file via click
Simple Play, Pause, Next and Previous commands

The sound array

JavaScript

var sndArray = ["song1.mp3","song2.mp3","etc"];

A trigger to start the player

JavaScript

// This comes from Flash
function getFirstPlayFromFlash() {
	currIndex = 0;
	var newImg = "img_" + (currIndex + 1);
	sndpSend(sndArray[currIndex],newImg,currIndex);
}
// This gets sent to Flash
function sndpSend(str,imgid,ci) {
	if (last_img) {
		if (document.getElementById(last_img)) {
			document.getElementById(last_img).src = '/player/listen2_16px.png';
		}
	}
	document.getElementById(imgid).src = '/player/listen_16px_now.png';
	last_img = imgid;
	getFlashMovie("flashcontent").sendTextToFlash(str);
	currIndex = ci;
	var testString = "currIndex=" +currIndex+ " soundFile:" + sndArray[currIndex];
	document.getElementById('stat').innerHTML = ''; // + testString;
}

ActionScript3

function getTextFromJavaScript(str:String):void {
 
	returnstring = str;
 
	if (isSoundPlaying) {
		channel.stop();
		removeEventListener(Event.ENTER_FRAME, onEnterFrame);
		isSoundPlaying = false;
		play_mc.gotoAndStop(1);
		meter_off.visible = true;
	}
 
	channel = new SoundChannel();
	snd = new Sound();
 
	// This is the sound file to played
	str = "/someURL/" + str;
 
	var req:URLRequest = new URLRequest(str);
 
	snd.load(req);
	channel = snd.play();
 
	channel.addEventListener(Event.SOUND_COMPLETE,handleSoundComplete);
	addEventListener(Event.ENTER_FRAME, onEnterFrame);
	isSoundPlaying = true;
 
}
// This is the actual trigger that comes from JavaScript
ExternalInterface.addCallback("sendTextToFlash", getTextFromJavaScript);

A way to launch a specific sound file via user click

HTML

<span onclick="javascript:sndpSend('song9.mp3','img_9',8)" title="Play Song">9. Diesel (01:55)</span>

JavaScript

function sndpSend(str,imgid,ci) {
	if (last_img) {
		if (document.getElementById(last_img)) {
			document.getElementById(last_img).src = '/player/listen2_16px.png';
		}
	}
	document.getElementById(imgid).src = '/player/listen_16px_now.png';
	last_img = imgid;
	// Send this to Flash
	getFlashMovie("flashcontent").sendTextToFlash(str);
	// Update the play index
	currIndex = ci;
	// if some extra information needs to be sent as feedback
	var testString = "currIndex=" +currIndex+ " soundFile:" + sndArray[currIndex];
	document.getElementById('stat').innerHTML = ''; // + testString;
}

Buttons

Simple Play, Pause, Stop, Next and Previous commands (launching a sound file has already been taken care of in the "sndpSend" function)

JavaScript

// Play next song
function getNextFromFlash(curr) {
	// Update the play index
	var ci = currIndex + 1;
	if (ci < sndArray.length) {
		currIndex = ci;
		var newImg = "img_" + (currIndex + 1);
		// Launch next song
		sndpSend(sndArray[currIndex],newImg,currIndex);
		if (currIndex > 13) {
			scrollDown();
		}
	} else {
		// This is the end of the playlist
		document.getElementById('stat').innerHTML = 'The End. Thanks for listening!';
	}
}
 
// Play previous song
function getPrevFromFlash(curr) {
	// Update the play index
	var ci = currIndex - 1;
	if (ci >= 0) {
		currIndex = ci;
		var newImg = "img_" + (currIndex + 1);
		sndpSend(sndArray[currIndex],newImg,currIndex);
		if (currIndex > 13) {
			scrollUpp();
		}
	} else {
		// This is the beginning of the playlist
		document.getElementById('stat').innerHTML = 'Playlist Start';
	}
}

The complete JavaScript

var last_img;
var currIndex; // = -1;
function getFirstPlayFromFlash() {
	currIndex = 0;
	var newImg = "img_" + (currIndex + 1);
	sndpSend(sndArray[currIndex],newImg,currIndex);
}
function getTextFromFlash(str) {
	var ci = currIndex + 1;
	if (ci < sndArray.length) {
		currIndex = ci;
		var newImg = "img_" + (currIndex + 1);
		sndpSend(sndArray[currIndex],newImg,currIndex);
		if (currIndex > 13) {
			scrollDown();
		}
	} else {
		document.getElementById('stat').innerHTML = 'Playlist End';
	}
}
function sndpSend(str,imgid,ci) {
	if (last_img) {
		if (document.getElementById(last_img)) {
			document.getElementById(last_img).src = '/player/listen2_16px.png';
		}
	}
	document.getElementById(imgid).src = '/player/listen_16px_now.png';
	last_img = imgid;
	getFlashMovie("flashcontent").sendTextToFlash(str);
	currIndex = ci;
	var testString = "currIndex=" +currIndex+ " soundFile:" + sndArray[currIndex];
	document.getElementById('stat').innerHTML = ''; // + testString;
}
 
// Check browser
function getFlashMovie(movieName) {
	var isIE = navigator.appName.indexOf("Microsoft") != -1;
	return (isIE) ? window[movieName] : document[movieName];
}
 
// This gets triggered from the flash file
function getNextFromFlash(curr) {
	var ci = currIndex + 1;
	if (ci < sndArray.length) {
		currIndex = ci;
		var newImg = "img_" + (currIndex + 1);
		sndpSend(sndArray[currIndex],newImg,currIndex);
		if (currIndex > 13) {
			scrollDown();
		}
	} else {
		document.getElementById('stat').innerHTML = 'The End. Thanks for listening!';
	}
}
function getPrevFromFlash(curr) {
	var ci = currIndex - 1;
	if (ci >= 0) {
		currIndex = ci;
		var newImg = "img_" + (currIndex + 1);
		sndpSend(sndArray[currIndex],newImg,currIndex);
		if (currIndex > 13) {
			scrollUpp();
		}
	} else {
		document.getElementById('stat').innerHTML = 'Playlist Start';
	}
}
 
// Scroll side-pane (the small up/down arrows)
function scrollUpp(url) {
	var nypos = document.getElementById('scrollBox').scrollTop - 20;
	document.getElementById('scrollBox').scrollTop = nypos;
}
function scrollDown(sto) {
	if (document.getElementById('scrollBox')) {
		var nypos = document.getElementById('scrollBox').scrollTop + 20;
		document.getElementById('scrollBox').scrollTop = nypos;
	}
}
 
// An array of sound files to be played
var sndArray = ["song1.mp3","song2.mp3","etc"];

Please follow this link see it in action.

If you are interested, go to the original site - www.heamusic.com - and check the HTML source code.