Flash Tutorial: Sound-Spektrum mit AS 3

Noch vor einigen Jahren konnte man mit Flash das Sound-Spektrum nur faken, sprich, man zeichnete sich Balken oder Linien auf die Bühne und animierte diese per Hand. Das war natürlich kein zufriedenstellendes Ergebnis, also wurde in den Folgeversionen von Flash eine Sound,- und SoundMixer-Klasse eingeführt, die für solche Visualisierungen zuständig ist. Die in der SoundMixer-Klasse enthaltenen Methoden und Eigenschaften ermöglichen uns dabei auf die Soundsteuerung innerhalb eines Flash-Films zuzugreifen. Wir zeigen euch nun heute wie man mit Flash und AS3 ein Echtzeit Sound-Spektrum entwickelt.

1. Zunächst erstellen wir eine neue Flash-Datei (AS3). Speichern könnt ihr sie unter dem Namen spektrum.fla. Einen Sound benötigt ihr natürlich auch. Diesen legt ihr in dasselbe Verzeichnis in dem die spektrum.fla liegt.

2. Nun gehts auch schon ans programmieren. Der gesamte Code wird dabei ins erste Schlüsselbild der Hauptzeitleiste geschrieben. Wir initialisieren zuerst die Objekte die wir zur Darstellung des Spektrums benötigen:

var sound:Sound = new Sound();
var channel:SoundChannel = new SoundChannel();
var bytes:BitmapData = new BitmapData(256, 100, true, 0x000000);
var bitmap:Bitmap = new Bitmap(bytes);

3. Danach fügen wir das Bitmap der Anzeigeliste hinzu und positionieren es. Anschließend laden wir den Sound mithilfe von sound.load() und new URLRequest() und spielen ihn ab. Wichtig ist in AS3 das wir den Sound vorher dem Soundchannel hinzufügen:

addChild(bitmap);
bitmap.x = 150;
bitmap.y = 150;

sound.load(new URLRequest("sound.mp3"));
channel = sound.play();

4. Nun benötigen wir eine Funktion die das Abfragen des Spektrums ermöglicht. In der Funktion legen wir ein ByteArray an, das mit den Werten der Methode SoundMixer.computeSpectrum() befüllt wird. Die Werte werden als normalisierte Gleitkommawerte im Bereich zwischen -1,0 und 1,0 formatiert. Die Größe des erstellten ByteArray-Objekts ist auf 512 Gleitkommawerte festgelegt, wobei die ersten 256 Werte den linken Kanal darstellen und die restlichen 256 Werte den rechten Kanal. Zum Schluß wird das Bitmap in 2 for-Schleifen (für jeweils den linken und rechten Kanal) aktualisiert:

function onEnterFrame(event:Event):void {
var spectrum:ByteArray = new ByteArray();
SoundMixer.computeSpectrum(spectrum);
bytes.fillRect(bytes.rect, 0x000000);
for (var i:int = 0; i < 256; i++) {
bytes.setPixel32(i, 20 + spectrum.readFloat() * 20, 0xff000000);
}
for (var j:int = 0; j < 256; j++) {
bytes.setPixel32(j, 60 + spectrum.readFloat() * 20, 0xff000000);
}
};

5. Als letztes müssen wir die Funktion noch über einen ENTER_FRAME EventListener aufrufen um eine kontinuierliche Aktualisierung zu ermöglichen und fertig ist das Soundspektrum:

addEventListener(Event.ENTER_FRAME, onEnterFrame);