Elegant MP3 Player

[Warangel]

So you want to have a stylish MP3 player on your site, that is fast loading for the song, elegant to look at, and easy to code? Well, here you go…

This MP3Player will be featured on the upcoming site www.tatiweb.com The accompanying file for this tutorial can be found at:

http://www.flashgoddess.com/tutorials/mp3Player.fla

PLEASE NOTE: THE MP3s WERE NOT INCLUDED WITH THE TUTORIAL OR DOWNLOAD

So I have a MovieClip (MC) on screen with the instance name “mp3Player”. This code is on the main timeline, but refers to that MC:

volumeDragging = false;
function playNewSong() {
clearInterval(soundDuration);
mp3Player.mySound.position = 0;
mp3Player.mySound.duration = 0;
mp3Player.progressBar._width = 0;
mp3Player.mySound = new Sound();
mp3Player.mySound.onSoundComplete = playNewSong;
randomSound = random(4)+1;
mp3Player.mySound.loadSound("bgSound"+randomSound+".mp3", 1);
soundDuration = setInterval(durSong, 1000);
function durSong() {
mp3Player.progressBar._width = Math.round((mp3Player.mySound.position/mp3Player.mySound.duration)*31);
}
}
mp3Player.onLoad = playNewSong();

You can see this onLoad function refers to the mp3Player instance. The actual functions above, playNewSong, and durSong, are used for positioning our track playhead, and loading a new random song. The songs are streaming the first time through, which will still play pretty quickly. The nice thing about streaming is that once the song is downloaded, the next time it is accessed, it should play instantly. The only other part to this file is the volume control. Inside of mp3Player, I have a button with these actions attached to it:

on (press) {
startDrag("volumeDrag", false, volumeDrag.left, volumeDrag.top, volumeDrag.right, volumeDrag.bottom);
_root.volumeDragging = true;
}
on (release, releaseOutside) {
stopDrag();
_root.volumeDragging = false;
}

And the actual draggable MC that is for our volume control, named volumeDrag. For now it uses onLoad and enterFrame events, but I would like to change it to something more efficient. Alos needs some code for if the user clicks somewhere on the user bar.

onClipEvent (load) {
top = _y;
right = _x;
left = _x-31;
bottom = _y;
volumePercent = _parent.mySound.getVolume();
}
onClipEvent (enterFrame) {
if (_root.volumeDragging) {
_parent.mySound.setVolume(((_x / right)*100));
volumePercent = _parent.mySound.getVolume();
}
}

That’s it! Enjoy your groovin'. Special thanks to Bloodnut, who provided the graphics for this, and the original idea that inspired me. Love you, Ogre !!!
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[fabolous]

Pretty good war... thanks for the contribution on behalf of everyone here...

[Leviathan]

I spent some time with the player now and its great Just add 4 different mp3's in same folder and it plays each time on load a different mp3

[Warangel]

You can change how many different Mp3s you want to play by changing the random code. Right now it says Random(4) + 1 to give you 5 Mp3s, but you can change it to any amount, and it works. Glad you are enjoying it.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Leviathan]

Yup I do and it shows so cool how the mp3 is progressing wether u use a small mp3 or a big one it works great

[Warangel]

Glad to hear it. I am adding functionality so the user can click anywhere on the volume slider as well. Also, if they slide off the left to zero, hence muting it, I am going to pause the song as well. Give it a try if you want. Fun fun fun.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[shazam]

Warangel,

Looks like a great litlle mp3 player!! However, when I download it, it doesn't work too well, and it seems some of the code isn't there. I can't find that last bit that you refer to as sitting in volumeDrag, and can't find an instance or library item or MC with that name.

What I am after is to add that way to cool 'wave' volume slider to my existing slider/mp3 player, but I can't seem to figure out how you made it work. Any advice?

BTW, that Tataiweb site looks great!

Thanks...

[Warangel]

The MP3 Player does NOT include any MP3s, to keep file size down. If you look inside the main MC on stage, you will find all the other ones...
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[shazam]

Warangel,

Thanks for the reply!

I have no problem getting the mp3 player to load music, doing as the others did by changing the number etc. and names of bgsound to mysound or whatever, but the volume control doesn't work.

I have downloaded the .fla file several times to see if maybe I had changed something, but still no go - maybe it is corrupted?.

What I do notice is that at first the volume control seems to lower the volume a bit, not much, but then the volume comes right back. I can even scroll left to no volume, but still after loading another sound, it comes back full. Maybe you hadn't noticed this on tatiweb because the soundclips are larger than the ones I am testing with - 3-4 seconds...

I am a bit of a rookie flash user so there is a chance that I am getting something wrong here.. But when I test the movie it plays music fine, and I tried publishing it to see if that solved the problem, but no luck..

Thanks again for the reply...

[Warangel]

Actually, I fixed that issue on Tatiweb, as it was for a professional client. The slider can be misleading, as you must drag the slider, not merely click on it. I am sure with a little play, you will figure it out.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Helenae]

Thanks for that Warangel:). I am having trouble with mid sounds atm for my site, but it's great to have an mp3 snippet handy! Your notes are always so informative and helpful:).
_________________
check out my new personal site!
www.helenae.com

[shazam]

Warangel,

your guidance leaves me dumbstruck. Too bad I couldn't have learnt something from your tutorial - oh wait, I did, 'how to click and drag'? Come on... I'm not askin for a freebie here, have a look at the download and your first message. Your MC's don't even have the same name in the file as on your 'tutorial' message - well, one anyway, and no mention about that missing onClipEvent code - really, have a look, I have.

[Warangel]

Shazam... I am truly sorry you didn't find my tutorial helpful. Perhaps I need to be more thorough in the future. Thank you for the suggestion.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[shazam]

Warangel,

No problem, I hope that I didn't get too 'flamey'.

Understand that it wasn't your tutorial somuch as that you didn't address any of my concerns when I posted questions, and it seemed that you assumed that I hadn't looked at your .fla and was looking for some handholding - perhaps my questions are of such a low level that the answers are obvious, if so I am sorry, I am not an actionscript genuis. I am not looking for a walkthough, but a hint would have been nice (like - 'oh, you're right, that code isn't in there, what I was getting at was...').

Regards...

[Warangel]

I was not offended, and am sorry if I was sensitive to your exact need. I will update this tutorial over the weekend, and hopefully it will work better for you.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.