Today I found some time to mess around with bitmapdata and computeSpectrum again. I’ve been playing with this earlier, but didn’t quite get where I wanted to be. A few weeks ago I came up with a better way of rendering the soundTunnel. That resulted in some crazy cool shit, which I finished off today.

I won’t go into technical details here (yet). I just wanted you guys to see the result.

Demo

Click here
And just to make sure it is actually reacting to the sound, try the following links too

• Song 1: Click
• Song 2: Click
• Song 3: Click (default)
  
• Song 4: Click
• Song 5: Click

Controls

• F: Go full screen
• S: Freeze visualization
• Click: Change color (happens automatically too)

Screenshots

Ik heb hier al vaker aan gedacht, maar altijd de hoop opgegeven als ik moest denken aan de ID3 tags… Ik ben geen PHP guru, waardoor ik nooit echt heb beginnen zoeken.
Nu heb ik mij vandaag toch opeens afgevraagd of er nog geen ID3 support in PHP zit…
Daar heb ik in feite geen antwoord op gevonden, maar ik heb wel gevonden wat ik zocht: Een open-source project waarmee de ID3 tags van MP3 bestanden (en meer) kunnen gelezen en gebruikt worden, namelijk getID3.

Sinds dit het moeilijkste van het hele automatiseren was kon ik meteen aan de slag. Ik ben echt positief verrast over hoe simpel getID3 in te zetten is, en hoeveel informatie daarmee op te halen was.

Om een lang verhaal kort te maken heb ik dus nu een geautomatiseerde versie van de playlist.xml gebouwd.
Het leuke is dat je nu zelf de lengte van de track niet meer moet uitrekenen (wat op zich het meest storende van het hele playlist.xml gebeuren was). En natuurlijk: Nooit meer playlists updaten!

PlayrDiscovr

Download

Gebruik

Gewoon PlayrDiscovr unzippen, en de inhoud van de map uploaden naar je server.
De MP3 bestanden komen in de ‘music’ folder te staan.
In Flash moet je nog even de URL naar je playlist aanpassen van ‘playlist.xml’ naar ‘playlist.php’, en je bent klaar. Nooit meer playlists updaten!
PlayrDiscovr haalt alle info over de tracks op vanuit de ID3v2 tag. Als deze dus in orde is, is zijn je playlists automatisch aangepast, vanaf dat je een liedje op de server hebt upgeload.

Veel plezier!

Na lang wachten heb ik vandaag eindelijk al mijn ditjes en datjes in mijn MusicPlayer class kunnen afwerken.

De player beschikt nu over de volgende properties:

• Autoplay
• Playlist laden (XML)
• De buttonacties instellen
• 2 progress events (Vooruitgang van inladen van de track, alsook de vooruitgang van de track zelf)
• Enkele track inladen
• Repeat
• ID3 ondersteuning

Wat nog op het programma staat:

• Shuffle
• Visualisatie module

Er zijn een aantal wijzigingen in de class gebeurd, waardoor je waarschijnlijk je code zult moeten aanpassen in je huidige projecten. Zo is de import regel iets gewijzigd, gezien de MusicPlayer class zijn eigen events nodig heeft (PlayerEvents). Ik heb de hiërarchie dan ook ietje gewijzigd zodat je geen meerdere imports moet uitvoeren.

De code ziet er voortaan zo uit:

import com.nocreativity.playr.*;
var myPlayer:Playr = new Playr();
myPlayer.autoPlay=true;
myPlayer.repeat = true;
myPlayer.volume = 100;
myPlayer.loadPlaylist("playlist.xml");
myPlayer.registerPlayButton(btnPlay);
myPlayer.registerStopButton(btnStop);
myPlayer.registerPauseButton(btnPause);
myPlayer.registerNextButton(btnNext);
myPlayer.registerPreviousButton(btnPrevious);
myPlayer.registerMuteButton(btnMute);
myPlayer.ID3SourceEnabled =true;
 
myPlayer.addEventListener(PlayerEvent.SONGINFO,infoHandler);
myPlayer.addEventListener(PlayerEvent.SONG_PROGRESS,songprogressHandler);
myPlayer.addEventListener(PlayerEvent.LOAD_PROGRESS,loadprogressHandler);
 
function songprogressHandler(e:PlayerEvent):void{
txtSongProgress.text = "song progress: " + e.songprogress;
}
function loadprogressHandler(e:PlayerEvent):void{
txtLoadProgress.text = "load progress: " + e.loadprogress;
}
 
function infoHandler(e:PlayerEvent):void{
txtTrackInfo.text = myPlayer.artist;
txtTrackInfo.appendText(" - " + myPlayer.trackName);
txtTrackInfo.appendText(" (" +myPlayer.album+")");
txtTrackInfo.appendText(" | " + myPlayer.trackDuration);
}

In het bovenstaande voorbeeld is ook de ID3SourceEnabled gebruikt: deze boolean laat je kiezen of je de ID3tag van je MP3 bestanden wilt gebruiken als bron voor de artist, album en trackName eigenschappen. Als je deze waarde op true zet wordt de artist, album en title tag uit je XML bestand genegeerd, en kun je je XML bestand dus gewoon korter maken. Zet je dit op false wordt je XML bestand als bron van deze eigenschappen gebruikt. Dus als je ID3tags niet naar behoren zijn ingevuld is dit een secundaire oplossing.

Ook de XML heeft een kleine wijziging ondergaan: Er is een nieuwe tag bijgekomen (totalTime): de totale tijd (in seconden) die het betreffende liedje duurt. Dus in geval van een track van 3 minuten en 28 seconden komt dat op 208 (3*60+28) uit. Deze waarde moet handmatig ingegeven worden. Het kan ook via ID3tag maar is precies omslachtig… Als iemand de gouden tip heeft is dit welkom.

Download:

De huidige versie kun je hier downloaden.
Een voorbeeld hoe de XML er moet uitzien staat hier.
Een voorbeeld kun je hier downloaden.
De documentatie heb ik nog niet geupdate, maar dat komt er zo snel mogelijk aan.

Ik release de MusicPlayer class en de PlayerEvent class onder de Creative Commons license. Dat wil zeggen dat je alles in deze classes mag aanpassen zolang je er een verwijzing naar de originele auteur ( ik dus ) in laat staan, en je deze classes met dezelfde rechten verder verdeeld.