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

Externen Sound mit AS 3 laden und abspielen

Sounds müssen für Flash im MP3 Format vorliegen, um sie extern zu laden. Dazu benötigt man in AS 2, wie auch in AS 3 die Sound Klasse. Mit dieser ist es denkbar einfach einen Sound in Flash zu laden und abzuspielen. Die Klasse wurde in AS 3 aber um einige positive Veränderungen erweitert, auf die wir gleich zu sprechen kommen.

1. Zuerst müssen wir ein Sound Objekt erstellen:
var sound:Sound = new Sound();

2. Externen Sound laden:
sound.load(new URLRequest("sound.mp3"));
Die Methode load(URL), erwartet als Parameter eine Adresse, die in AS 3 immer konsistent mit einem URLRequest Objekt angegeben wird.

Alternativ kann man die Adresse auch vorab definieren:
var adress:URLRequest = new URLRequest("sound.mp3");

Eine andere und somit auch gleichzeitig die kürzeste Variante ist, die Adresse direkt beim Erstellen des Sound Objekts anzugeben:
var sound:Sound = new Sound(new URLRequest("sound.mp3"));

3. Sound steuern:
sound.play();

Neu in AS 3 ist, das man den Sound einem Soundkanal zuweisen muß um ihn weiter zu steuern. So ist jeder Sound der abgespielt wird, Teil eines Soundkanals und kann somit genauer gesteuert werden als noch in AS 2. Bei mehreren Sounds ist das äußerst sinnvoll. Der Soundkanal besitzt eine eigene Klasse, SoundChannel. Das dazugehörige Objekt muß aber nicht instanziert werden, sondern wird von sound.play() zurückgeliefert.

var channel:SoundChannel = sound.play();

Mit channel.stop() kann man dann den Sound auch wieder anhalten.