MP3 Player - Source included

[aliseya]

Hi,

I've open sourced my MP3 player here

http://flash.aliseya.com/2007/10/flash-mp3-player.html

I've got a photo album up too. I'm going to add some new components to my site in the future, so if you have any suggestions for things you want added, let me know. I've got a contact form on my site.

[prototype]

Thanks for sharing!

[nortago]

Thank you hun!

[minthu]

I would like to see the preview online if possible.

[somnamblst]

Hi,

I've open sourced my MP3 player here

http://flash.aliseya.com/2007/10/flash-mp3-player.html




Thanks Aliseya! I love the look of this player but would prefer a user initiated experience. What line(s) would I need to modify?


import com.aliseya.xml.playlistXML;
import com.aliseya.music.song;
var mySound:Sound;
mySound = new Sound(this);
//hide prev and next buttons while loading xml
this.prevTrack._visible = false;
this.nextTrack._visible = false;
var songDuration:Number = 0; //duration in seconds
var songPosition:Number = 0;//position in seconds
var curSong:Number = 0;
var durationInterval:Number;
var ieRefreshInterval:Number;
//Array for holding the playlist after the xml is parsed
var songs:Array = new Array();
//path to xml playlist
var playlistFile:String = "playlists/samplePlaylist.xml";
var playlist = new playlistXML();
playlist.songs = songs;
playlist.ignoreWhite = true;
playlist.load(playlistFile);
/************************
CALLED WHEN XML IS LOADED AND PARSED
*************************/
function playlistLoaded(){
mySound.loadSound(songs[curSong].getFile(), true);
showPrevNextButtons();
mySound.stop();
//set check for ie7 issue
ieRefreshInterval = setInterval(_root, "ieCheck", 500);
}
/**************************************
EVENT HANDLERS FOR SOUND OBJECT
**************************************/
mySound.onSoundComplete = function(){
playNextSong();
}

mySound.onLoad = function(success){
if (success){
mySound.stop();

//show pause button
_root.pause._visible = true;
_root.play._visible = false;
songDuration = Math.floor(mySound.duration/1000);

//restart timer to update the song's playing time
clearInterval(durationInterval);
durationInterval = setInterval(updateTime, 250);

//play sound
mySound.start(0);
_root.eqBars.gotoAndStop(2);
setTitle();
}else{
//sound was not loaded correctly
stopPressed();
}

}
function ieCheck(){

clearInterval(ieRefreshInterval);
//should be playing, but isn't. this happens in IE when you press refresh
if (!_root.play._visible && (mySound.position == 0)){
_root.playPressed();
}
}
function playNextSong(){
curSong++;
if (curSong == songs.length){curSong = 0;}
setTitle();
songPosition = 0;
mySound.loadSound(songs[curSong].getFile(), true);
mySound.stop();
playPressed();
}
function playPrevSong(){
curSong--;
if (curSong < 0){curSong = songs.length -1;}
setTitle();
songPosition = 0;
mySound.loadSound(songs[curSong].getFile(), true);
mySound.stop();
playPressed();
}
function setTitle(){
this.trackTitle.html = true;
var trackNo:String = (curSong +1).toString() + ". ";
this.trackTitle.htmlText = trackNo + songs[curSong].getTitle();

while(this.trackTitle.textWidth > (this.trackTitle._width-2)){
var tempText = this.trackTitle.text.substr(0, (this.trackTitle.text.length-4));
tempText += "...";
this.trackTitle.htmlText = tempText;

}

}
function showPrevNextButtons(){
this.prevTrack._visible = this.nextTrack._visible = (songs.length > 1);
}
function updateTime(){
songPosition = Math.floor(mySound.position/1000);

if (!isNaN(songDuration)){
_root.time.text= timeFormat(songPosition) + "/" + timeFormat(songDuration);
}
else{
_root.time.text = timeFormat(songPosition);
}
}
function timeFormat(time):String{
//get the mins and seconds

var mins = Math.floor( time / 60);
var seconds = time % 60;

var timeString = "";
//if (mins < 10){ timeString += "0"; }
timeString += mins.toString();
timeString += ":";
if (seconds < 10){timeString += "0";}
timeString += seconds.toString();

return timeString;
}

function playPressed(){
//show pause button, hide play button
_root.pause._visible = true;
_root.play._visible = false;

songDuration = Math.floor(mySound.duration/1000);

//restart timer
clearInterval(durationInterval);
durationInterval = setInterval(updateTime, 250);

//play sound
mySound.start(songPosition);

//start EQ Bars
_root.eqBars.gotoAndStop(2);
}
function pausePressed(){
//show play button, hide pause button
_root.pause._visible = false;
_root.play._visible = true;

//stop timer
clearInterval(durationInterval);

//stop song
mySound.stop();

//stop EQ Bars
_root.eqBars.gotoAndStop(1);
}

[aliseya]

[quote=somnamblst;2240702]Thanks Aliseya! I love the look of this player but would prefer a user initiated experience. What line(s) would I need to modify?

I'm glad you like it!

if you want to change it so that it is stopped by default, make these changes to the code:

in the main timeline, in the actions layer, first add an autoStart variable, then change the onLoad function so that it doesn't play the song the first time it's loaded:


//add this variable outside of the function
var autoStart:Boolean = false;

//change this function
mySound.onLoad = function(success){


//begin new code
if (!autoStart){
//only do this the first time
autoStart = true;

songDuration = Math.floor(mySound.duration/1000);
setTitle();

stopPressed();
return;
}

//end new code, everything after here is the same.

if (success){
mySound.stop();

//show pause button
_root.pause._visible = true;
_root.play._visible = false;
songDuration = Math.floor(mySound.duration/1000);

//restart timer to update the song's playing time
clearInterval(durationInterval);
durationInterval = setInterval(updateTime, 250);

//play sound
mySound.start(0);
_root.eqBars.gotoAndStop(2);
setTitle();
}else{
//sound was not loaded correctly
stopPressed();
}

}


also, if you like the player, would you mind adding a comment on the blog page about it so that people know that the code is legit!
http://flash.aliseya.com/2007/10/flash-mp3-player.html

[somnamblst]

Thanks! I just left a comment on your blog.

[aliseya]

hi,

so i've gotten some feedback that i should add volume controls to this. so, i've got a follow up question....would you prefer a mute button or a volume slider?

[learntoreed]

Hi Aliseya,

Love the player. I've been using it for my site, but I'm having trouble with it when I use large mp3s. Anything in the 8 - 10 mb. range and it goes a little haywire. The time code information isn't correct, and sometimes the buttons don't work. Any ideas on how to fix this?

Thanks!

[aliseya]

Hi Aliseya,

Love the player. I've been using it for my site, but I'm having trouble with it when I use large mp3s. Anything in the 8 - 10 mb. range and it goes a little haywire. The time code information isn't correct, and sometimes the buttons don't work. Any ideas on how to fix this?

Thanks!

Hi,

i haven't seen this yet, can you post a large file that i can test it with?

-aliseya

[nnnswordfish]

hy guys i am new here . is it possible in flash:for example i have folder contain mp3 files ,can flash wach this files and create list (in list i whant that it shows name of mp3)automatic using action skript?and when mp3 file will be changed with new file list must updated and show this new files in list automatic and when i press mp3 on list i whant to open it and play is it possible guys? can anyone help me and sorry for my english i hope u understand me

[spyderman]

I am very new to Flash and I am looking for a mp3 player and your looks very close to what I want...

But I want to add album art / image above or beside the player. The one that I have built works except for that part and being that I am building it on necessity verses want my focus may be a bit narrow and dont know where to look.

I have a set of guidelines that I have to include ... I am basing alot of my feature off a common tut that is out there... So dont bash the simpleness.. Just learning.

Here is how my XML is setup for each song:


<song url="LoveInOctober-ADayInTheLifeOf.mp3" artist="Love in October" track="A Day in the Life1" >
<image>LoveInOct.jpg</image>
</song>


and the Song.as:


class Song
{
public var earl:String;
public var artist:String;
public var track:String;
public var image:String;

public function Song(e:String, a:String, t:String, p:String)
{
earl=e;
artist=a;
track=t;
image=p;
}
}


In the mp3player.as I have it pulling that info:



// Load the songs XML
var xml:XML=new XML();
xml.ignoreWhite=true;
xml.onLoad=function()
{
var nodes:Array=this.firstChild.childNodes;
for (var i=0;i<nodes.length;i++)
{
sa.push(new Song(nodes[i].attributes.url, nodes[i].attributes.artist, nodes[i].attributes.track, nodes[i].attributes.image));
}
playSong(); //Delete if dont want first song to play automatically
}

xml.load("songs.xml");
// Play the MP3 File
function playSong():Void
{
s=new Sound();
s.onSoundComplete=playSong;
s.setVolume(75);
mute.gotoAndStop("on");

if(cps==sa.length-1)
{
cps=0;
s.loadSound(sa[cps].earl,true); // True is for streaming False os for download then play
}
else
{
s.loadSound(sa[++cps].earl,true);
}
trackInfo.text=sa[cps].artist+ " - " +sa[cps].track;
playPause.gotoAndStop("pause");
}




But if a player is built with this already that would be great

I need to have album art / image loaded as the song is changed on player.

Thanks
Spyderman

[aliseya]

well, once you have the location of the image, you'd want to load that image into a movie clip when the song is changed. so in addition to updating the Sound object, you'd want to add a call to load the image.

i've got the source for image loading in the photo album on my flash site...you are welcome to take the code from there and modify it you fit your app.

[teemsu]

thankyou = ขอบคุณครับ