Je eigen mp3 speler maken met flash
blokje door vinTage op 22-09-2006

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.


Met dank aan Bouli, waarvan ik een nummer van zijn oude band mocht gebruiken ter ondersteuning van deze tutorial .



de knopjes/faders/potmeters etc komen uit de common library van flash

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



Geluid inladen in flash

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.
actionscript code

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.


«top»
Start en stop knoppen

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.
actionscript code

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

geluid.stop(); //als je niet wilt dat het geluid direct gaat spelen, als je dat wel wilt, gewoon deze regel weghalen.

stopKnop.onRelease = function() {
    geluid.stop();
};

startKnop.onRelease = function() {
    geluid.start();
};
 

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.



«top»
Volume regelen

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.

actionscript code


geluid.setVolume(waarde);

setVolume(100); //is het hardste wat je kan zetten.
setVolume(0); //is het zachtste wat je kan zetten.
 


Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.



«top»
Panorama

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.

actionscript code

geluid.setPan(waarde);

setPan(-100); //en je hoort alleen het linker kanaal.
setPan(100); //en je hoort alleen het rechter.
setPan(0); //en je hoort beide kanalen even hard.
 


Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.



«top»
Pauze

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

actionscript code

pauzeKnop.onRelease = function() {
    huidigeTijd = geluid.position/1000; //delen door 1000 omdat het milliseconden zijn
    geluid.stop();
};

//Om ons muziekje dan weer op "dat" moment te laten starten gebruiken we het volgende AS:
startKnop.onRelease = function() {
    geluid.start(huidigeTijd, 0); //de 0 in deze regel is optioneel en geeft aan of het geluid moet "loopen" of niet.
};

stopKnop.onRelease = function() {
    geluid.stop();
    huidigeTijd = 0; //Anders begint de audio niet aan het begin (wat wel hoort als je op stop klikt)
};
 


Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.



«top»
Snel spoelen

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.

actionscript code

this.onEnterFrame = function() {
//Rewind
    if (rewind == 1 && huidigeTijd>0) {
      geluid.stop();
      huidigeTijd = huidigeTijd-.5;
      geluid.start(huidigeTijd, 0);
    }
    rewKnop.onPress = function() {
      rewind = 1;
      huidigeTijd = geluid.position/1000;
    };
    rewKnop.onRelease = function() {
      rewind = 0;
    };
    //Fast Forward
    if (fastforward == 1 && geluid.position<geluid.duration) {
      geluid.stop();
      huidigeTijd = huidigeTijd+.5;
      geluid.start(huidigeTijd, 0);
    }
    ffKnop.onPress = function() {
      fastforward = 1;
      huidigeTijd = geluid.position/1000;
    };
    ffKnop.onRelease = function() {
      fastforward = 0;
    };
};
 


Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.



«top»
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.

actionscript code

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 :
actionscript code

geluid.onID3 = function(){
    artiest = geluid.id3.TPE1;
    titel = geluid.id3.TIT2;
    album = geluid.id3.TALB;
    jaartal = geluid.id3.TYER;
    genre = geluid.id3.TCON;
    //deze gegevens tonen we in een tekstvak met de instancenaam "info".
    info.text = artiest+"n"+titel+"n"+album+"n"+jaartal+"n"+genre ;
}

 


Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.


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.
Een voorbeeldje:
actionscript code

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

geluid.onSoundComplete = function() {
  geluid.loadSound("EenAnderLiedje.mp3");
};
 



«top»
Het media component

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).

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.



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.
actionscript code

player.setMedia("jeLiedje.mp3");
player.autoPlay = false;
player.pause();
player.stop();
player.play();
player.volume = 100;

player.complete = function(){
     //actions als het nummer is afgelopen
}

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.

edit: Nog een leuke/nuttige toevoeging.


Share |



Stem op deze tutorial


Reacties



Je bent niet ingelogged, je kan geen commentaar geven, of commentaren lezen over deze tutorial.

Uw link hier ?

sitemasters siteoptimo

html-site.nl webdesignersforum.nl actionscript.startpagina.be flash.startpagina.be macromedia.startpagina.be get firefox Nibbler report for www.vintagesworld.be uw advertentie hier?
contact

vt4 klussers....