mp3 player in flash

Met dank aan Bouli, waarvan ik een nummer van zijn oude band mocht gebruiken .
(Alle knoppen, sliders etc komen uit de common library van flash mx.)

Aan de hand van deze tutorial kunnen jullie straks zelf verschillende mp3 spelers maken.
In deze tutorial leg ik uit hoe je zelf een mp3 speler maakt, maar ook hoe je het flash media component kan gebruiken.
Ik ga ALLE players hun geluiden extern inladen, zo hoef je later als je een ander geluid wilt niet de player aan te passen, maar gewoon het mp3tje te verwisselen.
Het begin van deze tutorial gaat over de meest simpele player die je maar kan bedenken, namelijk gewoon een die geluid geeft en verder niets, aan het einde van deze tutorial kan je een player maken met play, stop, pauze, fastforward, rewind, en verschillende ID tags uitlezen.

Alle AS codes die ik geef in deze tutorial moet je in een keyFrame plaatsen, en niet ergens anders, je kan dus een hele mp3 speler kwijt op één keyFrame.

• geluid inladen in flash
• start en stop knoppen
• volume
• panorama
• pauze
• snel spoelen
• ID3 tags
• het media component

Om een geluid in flash binnen te halen en te kunnen "bedienen" (volume, balans, pauze, etc) maken we eerst een "new Sound" object aan en geven de exacte naam van ons mp3'tje.

geluid = new Sound();
geluid.loadSound("jeLiedje.mp3", true);

"true" in bovenstaande code geeft aan of de mp3 gelijk moet gaan spelen of eerst helemaal gedownload moet worden om te gaan spelen.
Als je "true" kiest gaat de mp3 gelijk spelen, met als nadeel dat het nogal met horten en stoten kan gaan bij een trage connectie.
Als je "false" kiest word de mp3 eerst helemaal gedownload, en heb je een smooth geluid, met als nadeel dat je wel lang moet wachten voordat je iets hoort.

Nu we ons geluid binnen hebben willen we natuurlijk ook wel een start- en stopknop natuurlijk.
Dus maak die buttons, geef ze de instance namen "startKnop" en "stopKnop" mee, en plaats volgende code in een keyframe op de main timeline.

Zo nu heb je al een player die je kan aan en uitzetten, dan gaan we er nu eens een volumeknop bijmaken.
Deze tut gaat niet over het maken van sliders etc, maar ervanuitgaande dat je een slider hebt gemaakt/gevonden, die ook nog een "waarde" kan genereren, dan kunnen we die waarde gebruiken om via
geluid.setVolume(waarde);
het volume bepalen.

Nu kunnen we er zelfs nog een "panorama" knop bijmaken, ook die nam ik uit de common library en via
geluid.setPan(waarde);
kun je het panorama bepalen.

En dan nu de pauze knop, die is al iets meer tricky, want je moet de positie bepalen waar en op welk moment je precies op "stop" hebt geklikt, en zodra je weer op start klikt moet hij wel weer "daar" beginnen.
Dat doen we als volgt.
Met het flash cmd "position" krijg je de huidige playhead positie in millisecondes.
Dus als we op onze nieuwe pauzeKnop klikken gaan we eerst die huidige positie bepalen door volgende AS te gebruiken

Voor een FastForward en een Rewind functie kunnen we ook de huidigeTijd gebruiken.
Door nu een onEnterFrame functie te maken met diverse if loopjes.
Onderstaande zal wel eea verduidelijken. (maak natuurlijk ook een ffKnop en een rewKnop)

Met geluid.duration kunnen we de lengte van ons audio object achterhalen.

ID3 tags

In een mp3 file (kunnen) verschillende stukjes informatie zitten, zoals bijvoorbeeld de artiest, songnaam en album.
Een aantal van die gegevens zie je ook als je een mp3 in je normale mp3speler afspeelt.
Ook die gegevens kunnen we via AS uitlezen.

Om alle id3 tags uit te lezen moeten we eerst een functie aanmaken.

geluid.onID3 = function(){
    for ( var prop in geluid.id3 ){
    trace( prop + " : "+ geluid.id3[prop] );
    }
} //als je dit stukje codeloslaat in flash krijg je een hele waslijst te zien met alle gegeven informatie.

Natuurlijk hoeven we niet al die info te hebben omdat er ook een hoop minder interesante informatie bij staat, we kunnen ook meer gericht informatie opvragen door bijvoorbeeld alleen de artiestennaam, de songtitel en het het album op te vragen door :

Voila nu hebben we een mp3 speler in flash die alles kan wat een normale mp3 speler behoort te kunnen.
Er zou nog een klein detail kunnen worden toegevoegd aan dit verhaal, namelijk:
geluid.onSoundComplete = function(){ //actions hier }
Zodra het nummer is afgelopen kan je dus iets laten gebeuren, zoals bijvoorbeeld een nieuwe sound inladen.

We kunnen nu wel zelf een leuke mp3 speler maken, maar stel dat je geen zin hebt om al die codes in te voeren, en om knoppen te tekenen, dan kan je ook nog altijd een media component gebruiken van flash zelf, die heeft al een volume-, pauze-, start- en stop knop ingebouwd.
Drag & drop vanuit het components scherm(ctrl+f7) een MediaPlayback component op de main scene, en geef deze een instance naam (player bijvoorbeeld).

Nu kunnen we via het AS panel dit component verder "instrueren" wat te doen.
Hieronder staan de belangrijkste commands om je media component te gebruiken via AS.
player.setMedia("jeLiedje.mp3");
player.autoPlay = false;
player.pause();
player.stop();
player.play();
player.volume = 100;
player.complete = function(){ //actions hier }
player.controllerPolicy = "on"; //off zijn geen controllers, en auto dat show/hiden de controls als je eroverheen gaat.
player.controlPlacement = "bottom"; //default is bottom, andere opties zijn left, right en top.

Er zijn nog veel commando's, maar dit zijn zo'n beetje de meest gebruikte.

Tot zover deze tutorial over mp3 en flash, mochten er nog onduidelijkheden zijn, laat me die dan horen bij de commentaren of op het forum.
Hier kan je alle *.FLA files downloaden die ik in deze tutorial heb gebruikt.

Mocht deze tutorial nog niet helemaal voldoen aan je verwachting, bezoek dan mijn website voor een eventuele geupdate tutorial. mvg vinTage