After endless nights, liters of coffeee and chats with some people with nice ideas, here the long awaited Part III of the streaming MP3 Player tutorial. There are still a lot of functions that could be implemented, but I leave that to you guys to extend it even further.
I must clear off as first, this tutorial is really advanced, so beginners that never went through part I or II by their own, will have difficulties, I will try to explain everything as accurate as possible.
So for those who didn’t read the previous tutorials here the link to them:
Part I: Creating the basic player
Part II: Extension of player
To get an overview of what will be covered on this tutorial, here the feature list:
Here the screenshot of our final result:
Scrolling Text
ok, there are different ways to create a scrolling text display, I’ve choosen this one, since it’s more controllable then others, and the result looks better.
First of all let’s us create a a new layer, name that layer “mask”, create a rectangle with any other color then white, with a width of 117px right on top of the “title_txt” textfield, that should fit right beneath the controls.
Now let us put the textfield “title_txt” on a separate layer, and name that new layer “title field”.
Move the text field to the far right of the mask, let’s say at a X position of 220, we’re doing this so that the text “scrolls” to our mask instead of just showing up.
As last step we need to tell our mask layer that it’s a mask 
for that just right-click on the mask layer and choose mask. lock those 2 layers, since we’re not doing anything more with them.
Everything will be now done controlled with actionscript and one movieclip.
Crete a new movieclip by pressing CTRL + F8, name that movieclip “scroller”, inside of the newly created movieclip, on frame 1 press F9 to get our action window.
Here the code we will be using, the explanation will follow below.
1 2 3 4 5 6 | this.onEnterFrame = function() { _root.title_txt._x -= 1; if (_root.title_txt._x < (-100-_root.title_txt.width)) { _root.title_txt._x = 219; } } |
Explanation:
1 | this.onEnterFrame = function(){ |
everytime the playhead enters this frame, depending on the framerate you defined, this function will be executed
1 | _root.title_txt._x -= 1 |
Here we decrement the x value of our textfield by 1px everytime the function is being called.
1 | if (_root.title_txt._x < (-100-_root.title_txt.width)) { |
This one is pretty obvious, if the x value of our textfield is less then our textfieldwidth minus 100 then....
1 | _root.title_txt._x = 220; |
... set the textfield to the original x position.
Go back to our maintimeline, create a new layer named "controllers" and drag our scroller mc to the stage.
You will only see a small white circle on the stage, since the movieclip is empty.
One thing needs to be done still, before you test the movie, different tracks have a different name, with a different length, our textfield need to get an autosize otherwise it can look strage.
Go to our actions layer in the maintimeline and press F9 to open the actionspanel, and insert following line right after the stop action:
1 | title_txt.autoSize = "left"; |
So what have we done? We are changing the position of our textfield by 1px everytime the function is being called, in our case with 15fps, meaning the textfield is being moved 15px per second. Since we've masked our textfield only that portion is viewable. Go on and test your movie! you should see the text moving from right to left and after a while starting again.
FadeIn at songstart
To achieve this function you have to again create a blank movieclip as a controller for the volume, so agan create a blank movieclip by pressing CTRL+F8 and give it a name of "fader"
Again on frame 1 of that newly movieclip open your actions panel with F9 and start typing this code 
1 2 3 4 5 6 7 | onEnterFrame = function(){ var CurrentVolume = _root.sound_mc.sound_obj.getVolume(); _root.toolTip.ttVolume.text = CurrentVolume; if (CurrentVolume < = 99){ _level0.sound_mc.sound_obj.setVolume(CurrentVolume + 1); } } |
Explanation:
1 | onEnterFrame = function(){ |
Already explained before, every time the movie enters this frame, run this function.
1 | var CurrentVolume = _root.sound_mc.sound_obj.getVolume(); |
Here we set the variable CurrentVolume the currentVolume of our sound with the getVolume() function
1 | _root.toolTip.ttVolume.text = CurrentVolume |
this is already a preparation for our volume display. basically we are just telling that the variable CurrentVolume should be displaying on the textfield inside ToolTip named ttVolume. " We will create that later".
1 | if (CurrentVolume < = 99){ |
Here we check the currentvolume, if more or equal to 99 (why 99?, volume starts at 0 so 99 equals 100)
1 | _level0.sound_mc.sound_obj.setVolume(CurrentVolume + 1); |
And here we increment our variable CurrentVolume by 1 everytime the movie passes this frame (remember the 15fps on your movie)
Again go back to your main timeline and drag the newly created movieclip from the library to the controller layer.
you can also lock the layer "controller" we will not need it anymore.
One thing has gone forgotten.. Our volume is already sent to 100 by default!!
Let's change that on the actions layer of our main timeline.
Inside our prototype after the "this.sound_obj.loadSound(file, true);" line type this:
1 | this.sound_obj.setVolume(0); |
It NEEDS to be placed there, if you place it before the prototype nothing will happen, and if you place it after the prototype you will hear the sound for a short amount of time, till the script reached our line.
Go for it and test the movie, you will see that music starts with a volume of 0 and get's louder till it reaches 100% volume.
If you don't believe me, then put a trace action inside the fader movieclip
1 | trace (CurrentVolume) |
Let's make a break and go drink a coffee or whatever you like, the hardest part is still to come.
Volume Display
This is nothing that you really need, just came up my mind as I was playing around with the windows media player.
When you change the volume on WMP you see a small tooltip with the volume display. We will no re-attempt that function.
First of all we need to create a small movieclip that will act as our tooltip, so as usual press CTRL+F8 to create a new movieclip and give it the name tooltip.
Now let's create 2 layers one for the textfield and one for the graphic.
Here a screenshot of my tooltip (zoomed)
So as you see I've created a small rectangle as background of the tooltip, and on the top layer I've created a dynamic text field with enough space to hold 3 digits.
Before you go back to your main timeline, give the textfield an instance name of "ttVolume".
Do you remember our fader script? there was a line saying:
1 | _root.toolTip.ttVolume.text = CurrentVolume; |
Now you know for what we put that line of code in there
Now let's go back to our main timeline, drag our tooltip movie to the position you want, I've placed mine right underneath the volume dragger (like on WMP)
Give that newly created movieclip an instancename of "toolTip". Move on to our actionscript.
First of all we need to hide our toolTip, since it only needs to be shown when you drag the volumebar.
Type this code right after the stop action.
1 | toolTip._visible = false; |
This will hide our movieclip at the beginnning.
Now let's move down to our Volume Dragger function, right after the startdrag line type this code:
1 2 3 4 5 | _root.toolTip._visible = true; setInterval(draggableTip,100); function draggableTip(){ _root.toolTip._x = _root._xmouse; } |
Explanation:
1 | _root.toolTip._visible = true; |
Here we make our tooltip visible
1 | setInterval(draggableTip,100); |
We set the interval to call the function draggableTip 100times a second.
1 2 | function draggableTip(){ _root.toolTip._x = _root._xmouse; |
This is our function, that controls the movieclip accordingly to the position of our mouse's X axis.
Now we need to hide the movieclip as soon as the user releases the button.
For that scroll down to our onReleaseOutside function and type this code to hide our movieclip
1 | _root.toolTip._visible = false; |
okay, test your movie to see if everything is working as it should.
ID3 Support
Do you remember on part I, where we built all those arrays to get the trackname and bandname on our display?
We just keep those arrays for our filename (location) and for a function that we will write soon.
We will change the way the songname is being extracted, for that we use the ID3 functions of flash.
Here a small list of which values you can extract.
Sound.id3.comment
Sound.id3.album
Sound.id3.genre
Sound.id3.songname
Sound.id3.artist
Sound.id3.track
Sound.id3.year
Here the code to achieve that.
1 2 3 | track = this.sound_obj.id3.songname; artist = this.sound_obj.id3.artist; this._parent.title_txt.text =artist+" - "+track; |
Explanation:
1 | track = this.sound_obj.id3.songname; |
Here we give the variable track the value of the id3.songname.
1 | artist = this.sound_obj.id3.artist; |
Here we give the variable artist the value of the id3.artist.
1 | this._parent.title_txt.text =artist+" - "+track; |
Like on part I we just tell our textfield to display those 2 variables separated by a -
Pretty clear or not? Sure you can put much more informations on the display, but hey.. What do you need else then those 2 values?
TotalTime Display
The CORRECT time will be displayed as soon as the whole song is "cached" since flash receives that information at the end. The result of this will be a constantly growing number till the song finishes loading.
We used on the last tutorial a function to show the position time of our song, we will use the same function for the totalTime just a bit different. I will not explain the whole function since it has already been explained before.
The only thing we change is the variable names since they're already being used by our first function, I just added a "d" to all variables. D for Duration and obviously the function is called duration.. d'oh
1 2 3 4 5 6 7 | function duration (){ timed = _root.sound_mc.sound_obj.duration/1000; mind = Math.floor(timed/60); mind = (mind<10) ? "0"+mind : mind; secd = Math.floor(timed%60); secd = (secd<10) ? "0"+secd : secd; totalDuration = mind+":"+secd; |
This function needs to be called whenever a user presses a button or the track changes, so we will create a setInterval calling that function every 100ms. Place this code on the last line (after the xml.load)
1 | setInterval(duration,100); |
Now instead of making a second textfield for our duration, I've added it to the "timeDisplay_txt" that we already have.
So just go one function upwards (the timer function) and add the totalDuration to it.
1 | timeDisplay_txt.text = min+":"+sec+"/"+totalDuration; |
Now our textfield is too small for all our informations, we will add it dynamically with this line of code right after the stop action
1 | timeDisplay_txt.autoSize = "left"; |
LoaderBar / ProgressBar
First of all you need to create a new layer let's name it loader. Then let's draw a rectangle with a dark-green stroke and a light-green fill. place it underneath your controls, and give it a size of 272px * 6px, convert this rectangle to a movieclip by pressing F8 and assign the name loaderto it.
Now let's select the loader movieclip, and go into edit mode, by double-clicking on it.
Then select the light-green fill and press F8 to convert it to a movieclip, assign the name loadbarto it.
I always like to keep things clean and tidy, so select the loadbar mc and press CTRL+X, create a new layer called loadbar and press CTRL+SHIFT+V to paste in place, don't forget to give the loaderbar an instancename since we are going to use it with actionscript. I've named mine loadbar.
Go back to the main stage, and what have we done till now? 2 MC's one with loadbar and one with the stroke, both together are our loader, assign this MC also a instance name, I've named mine loader
To finish it off create a movieclip with a nice playhead so we can show where the music is.
Give it an instancename of playHead
Let's move on to the actionscipt part!
ok, now let's get down with AS, this is always my favourite part of the whole thing..
There is one thing that we need to think about first:
The loadbar should scale itself by the amount of downloaded data, this can only be accomplished by setting an interval that calls the function every certain amount of time..
So let's create an interval using the setInterval function press F1 to get more informations about this function
First we create a variable holding the interval I've named it soundStatus, then we set the Interval to call up the function videoStatus, we will create it very soon, and we tell also that the function should be called every 100milliseconds, also every 0.1second, put this line right after the first setInterval we've created before.
1 | setInterval(soundStatus,100); |
Now it's time to create our function called soundStatus.
1 2 3 4 5 6 7 | function soundStatus(){ var amountLoaded = _root.sound_mc.sound_obj.getBytesLoaded() / _root.sound_mc.sound_obj.getBytesTotal(); _root.loader.loadBar._width = amountLoaded * 260; duration = _root.sound_mc.sound_obj.duration; position = _root.sound_mc.sound_obj.position; _root.playHead._x = position / duration * 272 + 5; } |
Explanation:
1 | var amountLoaded = _root.sound_mc.sound_obj.getBytesLoaded() / _root.sound_mc.sound_obj.getBytesTotal(); |
The variable amountLoaded gets the result of the getBytesLoaded divided by the total amount of Bytes.
1 | _root.loader.loadBar._width = amountLoaded * 260; |
we will control the width of the loadbar via actionscript for that we need to point the script to the loader mc, that contains the loadbar mc, by multiplying the amountloaded value by 260 we get a loaderbar that we assign to the width property of our mc.
1 | duration = _root.sound_mc.sound_obj.duration; |
A variable holding the value of the current duration.
1 | position= _root.sound_mc.sound_obj.position; |
A variable holding the value of the current position.
1 | _root.playHead._x = position / duration * 272 + 5; |
This wil move our playHead inside our loaderbar accordingly to the position of the track.
Simulate the movie by pressing CTRL+ENTER twice to see how the bar grows
Playlist Display
This is the last bit you have to do for your player.. creating a nice playlist to see which tracks are available.
Since my layout of the player is very small I had to limit it to 6 songs, depending on your layout you need to change some values.
First of all I've created a movieclip with a nice graphic on the background. mine is just a square with a dot on the left side.
and a dynamic textField with the lenght of the graphic the textfield has an instancename of "but_txt".
Don't put the button on the stage, rather leave in the library and right-click on it, and choose linkage, give it an unique name, mine is called "butTemp".
type this code right after the last array is built, still inside of the for loop.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | attachMovie("butTemp","but"+i,i+50); eval("but"+i).id=i; _root["but"+i]._x = 5; _root["but"+i]._y = 40 + (i*15); _root["but"+i].but_txt.text = songname[i]; if (i >= 3){ _root["but"+i]._x = 160 _root["but"+i]._y = -5 + (i*15); } _root["but"+i].onRelease = function(){ clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; _root.sound_mc.songStarter(songfile[this.id]); } |
ok, what are we doing here?
1 | attachMovie("butTemp","but"+i,i+50); |
this attaches the movie butTemp, gives the naw name "but"+i, where I is a number, and using i+50 I set the depth of the button on top..
1 | eval("but"+i).id=i; |
Here we are giving each of our new buttons an id corresponding to the value of the array.
1 2 | _root["but"+i]._x = 5; _root["but"+i]._y = 40 + (i*15); |
With this we position our buttons where we want.
1 | _root["but"+i].but_txt.text = songname[i]; |
I think you should know what this means by now...
1 2 3 | if (i >= 3){ _root["but"+i]._x = 160 _root["but"+i]._y = -5 + (i*15); |
As mentioned before I had to split the display, since I don't have enough space on my layout.
Pretty obvious what this is does
1 2 3 4 5 | _root["but"+i].onRelease = function(){ clearInterval(timeInterval); _root.timeDisplay_txt.text = "00:00/00:00"; _root.sound_mc.songStarter(songfile[this.id]); } |
And this final function is just controlling the onRelease status of our buttons, clearing the interval, resetting the timedisplay and it play's the song that you've chosen.
HERE you can download a .zip file containing the .fla, .xml and 4 sample mp3's to play around.
For those who still work with Flash MX or Flash MX2004 here a compatible FLA file
Have Fun
Tiago Dias
wildhuman
Just change button template in the library panel to your needs, I think the movieclips name is but_temp
Thanks Tiago.
Yes, I can changed it.
New question: if I want to drag playhead or loadbar, how should I do? I try it, but it doesn’t work.
_root.playHead.onPress = function()
{
startDrag (this, true, 55.8+this._x, this._y,_root.loader.loadBar.width, this._y);
setInterval(drTip,100);
function drTip ()
{
_root.toolTip._x = _root._xmouse;
}
this.onEnterFrame = function ()
{
var p = (this._x / _root.loader.loadBar._width) * 100;
trace(p);
};
}
_root.playHead.onRelease = _root.playHead.onReleaseOutside = function(){
stopDrag();
}
Hello, i really like the mp3 player you created but when i export it into dreamweaver 8 and try to preview it, it just says loading but never loads.
Do you think you can help with this problem?
thanx genteel
wildhuman
you need to pause the mp3 so you are able to drag.
Genteel
That’s probably because the XML isn’t being loaded properly.
Thanxs for the response
Forgive me for my ignorance but how can i get the XML file to load properly? am i missing something? I have a temp page up with the player up. Your assistance is greatly appriciated.
Genteel.
help me in masking
the text is nt scrolling
do u have ur email id
i want to submit my file to u
i have some problem in this
the masking text works when clicking 4 or 5 times
but after that it doesnt appear
Genteel
One way to be 100% sure you are requesting the proper files is to use a full path, instead of using “playlist.xml” you can use “http://www.yoursite.com/playlist.xml” with that you can be fully aware that flash is not calling up some bogus.
i have a progressbar and i have stop play prev next buttons
in a mp3 player
when i select the first song in tracklist the sound plays and the progressbar or the preloader starts and the start button is in green color and all the other buttons are in white
when the song is over the green color play btn should become white or should be disabled and the stop button should be green or enabled
pls help me in this
Ok im back again, and i’m having the same problem. The player works fine out of flash but when i take it into dreamweaver and test it out it doesnt do anything. It just shows the player as is, doesn’t say loading, it just shows the buttons and the volume bar.
i’ve tried to use a full path and that didn’t work, i don’t know what to do!
HELP PLEASE…
Hi Tiago,
Thanks for the great player! My question is: Which AS code can I use to enable users to download mp3 songs from player.
Thanks,
Ali
Great player Tiago!
I have some suggestions for the player. First, when people press play, can you make it turn into a pause button and allow people to pause the song? Secondly, can you make the seek bar move when people drag it to a certain part of the song?
Tyler
Great turtorial, helped me heaps
I was wondering with the scrolling text. each song title is a different length and sometimes the scroller cuts it off early for longer titles and leaves a lot of blank space at the end for shorter titles.
Is there a way to fix this?
genteel
Publish the html & swf directly from flash and have a try, I remember some posts where DW was buggy using flash, but that was a long while ago
ali
Just create a second node on the xml with a link to each ZIPPED song, otherwise the mp3 will play inside the browser
Tyler
Thanks for your feedback, I’m currently working on a new version of it, your input is welcome and will be placed in
Stine
The only solution I can think of from top of my head is to use the textfield length and calculate the “out” point of the scrolling text. as the textfield is set to autosize you just need to read that value out and do the math.
hey taigo is there anyway you can make a playlist load into dynamic textbox with a scroll bar in it instead of using attachmovie let me kno if its hard to understand
hey taigo is there anyway of having the playlist load into a dynamic text field with a scrollbar instead of using attach movie because the way my mp3 player is setup is when i hover over the player a box drops down which shows the song title and all that so if you help me out that would b great and if it is hard to understand what im trying to say let me kno thnx
hey tiago is there anyway of having the playlist load into a dynamic text field with a scrollbar instead of using attach movie because the way my mp3 player is setup is when i hover over the player a box drops down which shows the song title and all that so if you help me out that would b great and if it is hard to understand what im trying to say let me kno thnx
Great tutorial, I am very new to this kind of stuff but it works like a charm!
For the sake of my layout I’m having trouble tweaking a couple things though, specifically the playlist. The most important is changing the width of each box, but I’d like to change text color too. I can’t edit it as easily as the other text because it doesn’t show up in my flash editing window, and I can’t figure out which part in the actionscript controls the width of each box. Sorry if this has been asked, I’m very glad for this script and your help answering comments, looking at past comments I figured out my problems so far!
Never mind, I figured it out by editing the button template in the library
Great Tutorial!!
I’ve got it working they way I want with the exception of the time display running at about half speed (so it takes 2 seconds for timer to advance 1 second). This also causes the playhead to only move halfway through the scrubber bar. I can’t for the life of me figure out why this is occuring. It seemed to work OK at one point when viewing through Control > Test Movie, but not when viewing the .swf directly. The next thing I know it was happening no matter how I viewed the player.
Here is the .swf.
My .fla is here.
Thanks in advance for your help.
Shannon
i need a flash mp3 player which is play a file through the checkbox check box in given on the html page and when we check the box and click to play button than song is paly
Hey Taigo,
Great tutorial. I used what I learned and skinned the player. It works great, however I am having 1 small problem. Evevrything works fine as a stand alone swf, but when I “loadMovie” within another swf I have to click on the volume bar for the volume to come on (doesn’t do this as a stand alone swf though). I’ve read alot about _root conflicts, but I’m not sure thats what it is since it does play, just takes user interaction. Any ideas?
Hey Tiago, about Scrolling TExt
is there a way to make the scrolling text reset to the left of the mask everytime you click on the next track. That way you can see the name right away and don’t have to wait for it scroll into place.
And is there a way to start with, say track 5, and then after that it follows the track order?
HOW TO STOP PLAYHEAD FROM SKIPPING AS YOUR SONG IS LOADING:
This will automatically figure out the entire duration of the song and will allow the playHead to operate freely and not skip around while the song is loading (you don’t need to know the audio bitrate either):
In function soundStatus() change the duration line to:
duration = (_root.sound_mc.sound_obj.getBytesTotal() * _root.sound_mc.sound_obj.duration) / _root.sound_mc.sound_obj.getBytesLoaded();
That’s it! Hope this helps everybody. Thanks Tiago for the mp3 player tut, it was great. Hopefully you can add this line in your new version (if you’re making one)?
hey tiago is there anyway you can have the playlist into a dynamic text field with a scrollbar instead of having it load into a movie clip
to those looking at adding playlist items into a dynamic text field, try the following solution:
1. create a dynamic textfield (multiline with HTML enabled) with an instance name of newpl
2. attach a scrollbar to the field (any method you choose)
3. add the following function to your AS:
function newplclick(songid) {
trace(songid);
clearInterval(timeInterval);
_root.timeDisplay_txt.text = "00:00/00:00";
_root.sound_mc.songStarter(songfile[songid]);
}
4. where the code previously had:
_root["but"+i].but_txt.text = songname[i];place the following on the next line:
_root.newpl.htmlText = _root.newpl.htmlText+""+songname[i]+"";hope this helps
oops… you can of course remove the trace included above
When combined with viktors issue above of the title/band not displaying when the playlist is clicked (assuming id3 tags not being used) change the function above to the following to eliminate this problem:
function newplclick(songid) {
_global.song_nr = songid;
clearInterval(timeInterval);
_root.timeDisplay_txt.text = "00:00/00:00";
_root.sound_mc.songStarter(songfile[songid]);
}
hi JohnMc,
I was trying the code for adiinf a scrollbar in the tracklist, its working fine but tracklist is not getting clickable like it was in the movieclip. Any help?
Hi, john/Tiago
I am desperately looking for help. The code posted by john is creating scrollbar but not making the playlist clickable or songs playable from there. Please suggest what to do
Rup
the code posted is fine – however this blog parses any a tags… try the following to replace the last line (fingers crossed this works ok in the blog):
_root.newpl.htmlText = _root.newpl.htmlText+"<a>"+songname[i]+"</a>";cheers
John
argh… sorry that was all written from memory – a quick check of the code tonight reveals the following for the <a> piece:
<a href=\"asfunction:newplclick,"+i+"\" >
hope that helps
John,
You are my angel. ITS WORKING.Thaaaaaank you. You really helped me a lot
Rup
Im making this website,for my fiance and she is more of a visual person. So im trying to get this playlist to work but i got lost. Can you resummarize the playlist modifcations.
I appreciate your community you are building here
surely there is an easier way to get my scroller text working.
couldn’t you just tell it to move left the length of the mask + the lenght of text box
could someone plz post some code that ive tried to explain above
anyway, great tutorial!
Hi, great tutorial, I don’t know if you are still replying to these comments…
I’m a real flash n00b, and this was my first time really making anything, I’ve managed to tweak everything to get it working but I just have one problem:
I need to add a ‘download mp3′ button that the user can click to download the current playing song… and I have no idea how to do this.
Ali above me mentioned the same thing, and you answered:
“ali – Just create a second node on the xml with a link to each ZIPPED song, otherwise the mp3 will play inside the browser”
Now I understand how to add the link into the xml, but have no idea how to create a clickable button in flash that goes to the URL depending on what song is playing!
Thanks in advance if you find the time to help me.
Chop.
great tutorial
how to make the playhead draggable based on the position and to also adjust the timing based on the position
playHead.onPress = function()
{
trace(“ok”);
sound_mc.sound_obj.stop();
startDrag(playHead, false,_root.playHead._x, _root.playHead._y, _root.playHead._x,_root.playHead._y)
}
playHead.onRelease = function()
{
stopDrag();
}
im using this code
Hey hey! Have a bit of a problem I hope someone will be able to help me with! When I try starting a song from my playlist the textbox on my mp3- player keeps returning an “undefined” message instead of displaying the correct songtitle! Any solution to this would be greatly appreciated! Thanks in advance!
hey, great job.
can u help me with extracting the album art from flash. i am using Adobe flash cs3. would be extremely grateful to find the answer to it.
thanks in advance.
Hey TIago,
I just wanted to say thank you so much for your time and effort in creating this tut and answering so many questions!!! This was the best I found and exactly what I needed for the site I am working on!
Cheers!
Hey Tiago
Thanks a lot for this tutorial! it works fine in flash, but not in my browser.
I saw that Genteel had the same problem as me..
Your answer was:
“Publish the html & swf directly from flash and have a try, I remember some posts where DW was buggy using flash, but that was a long while ago”
I did this and that worked. But how do i fix this in my page?
TPB
This is the page were the player has to shown up. as you see the player doesn’t load the songs.. he only displayed “loading…”
I had tryed to get the code from flash and put this in my own page. But also that didn’t worked.
I hope you still answer questions on this forum.
And i’m sorry for my english, i know, it’s not really good.
Hi Roy
Most of the times the problem is that the files are not being placed at the same location or that the links between each other are not valid.
You can use the contact form on this blog to send the files along
Can you please send me a zip file with EXACTLY the player you are using on the website you mentioned above so I can take a closer look? Don’t include the mp3′s as I can use my own
Cheers
Tiago
PS: Don’t worry about your english, it’s far better then some others I’ve seen
Thank you so much! its amazing!
Hi Tiago,
Thanks for the great tutorials & support. Very helpful.
I still have a view questions:
1. How can I make a dropdown list for the tracklist.
I don’t want people to see the tracks unless they push a button. And ofcourse they can hide the tracklist again.
For a music company I’m trying to make a mp3 player, something like you did for toscano, but with more albums & tracks.So each album should have a dropdownlist. When you click a track, the list should hide again.
2. For a band website I’m trying to make the mp3 player with one long playlist.
How can I make one playlist with lets say 3 albums, where you also put the album title in the list (unclickable), tracks (clickable), another album title , tracks, etc? I would also like to the titles to change colour when mouseover.
Hope you can help me out.
Regards, gonzaless
Hi Tiago,
Thanks for the great tutorials & support. Very helpful.
I still have a view questions:
1. How can I make a dropdown list for the tracklist.
I don’t want people to see the tracks unless they push a button. And ofcourse they can hide the tracklist again.
For a music company I’m trying to make a mp3 player, something like you did for toscano, but with more albums & tracks.So each album should have a dropdownlist. When you click a track, the list should hide again.
2. For a band website I’m trying to make the mp3 player with one long playlist.
How can I make one playlist with lets say 3 albums, where you also put the album title in the list (unclickable), tracks (clickable), another album title , tracks, etc? I would also like to the titles to change colour on mouseover.
Hope you can help me out.
Regards, gonzaless
Hi Tiago,
Thanks for the great tutorials & support. Very helpful.
I still have a view questions:
1. How can I make a dropdown list for the tracklist.
I don’t want people to see the tracks unless they push a button. And ofcourse they can hide the tracklist again.
For a music company I’m trying to make a mp3 player, something like you did for toscano, but with more albums & tracks.So each album should have a dropdownlist. When you click a track, the list should hide again.
2. For a band website I’m trying to make the mp3 player with one long playlist.
How can I make one playlist with lets say 3 albums, where you also put the album title in the list (unclickable), tracks (clickable), another album title , tracks, etc? I would also like to the titles to change colour on mouseover.
Hope you can help me out.
Regards, Lija
Hey Tiago!
Great tutorials, but, I’m having a little bit of trouble. My scrolling display doesn’t scroll back around! It just keeps going longer than I’m willing to watch and find out how long exactly, lol.
Could I have it set wrong?
“this.onEnterFrame = function() {
_root.title_txt._x -= 1;
if (_root.title_txt._x < (-100-_root.title_txt.width)) {
_root.title_txt._x = 800;
}
}”
Is the code I’m using, I’ve adjusted to no avail. =(
Thank you Tiago! This is the best mp3 player tutorial in the world (wide web). I’ve been using it to replace the one I’m currently using (crap!) and was deterred only by the jumping playhead. And now it appears even that’s been solved. Can’t wait to implement! Cheers!
hi Tiago,
i’ve found the solution for my problem:
The swf and the XML file has to be placed in the same directory as the pages does where the SWF is loaded in.
greeting Roy
Hi Tiago,
For a noob such as myself, this has helped greatly, I am trying feebly to customize it and I have everything going okay, but i am trying to figure out how to add a scrollbar feature with the buttons instead of dynamic text….you havent really answered that question and I am trying to figure it out, thank you so much for everything you already have done!