<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx">

  <fx:Script>
    <![CDATA[
      
      protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
        
        //super.updateDisplayList(width, height);
                
        var soundBuffer:ByteArray = new ByteArray();
        
        SoundMixer.computeSpectrum(soundBuffer, true);
        
        this.graphics.clear();
        
        for (var i:uint = 0, bufferLength:uint = (soundBuffer.length / 8); i < bufferLength; i += 8) {
          
          var value:Number = soundBuffer.readFloat();
          var gradientMatrix:Matrix = new Matrix();
          // Create matrix for a 10*height bar, rotated by 90 degrees
          gradientMatrix.createGradientBox(10, height, Math.PI / 2);
          
          // Set stroke and fill colors
          this.graphics.lineStyle(1, 0x555753);
          this.graphics.beginGradientFill(
            GradientType.LINEAR,
            [0x2e3436, 0xd9d9d9],
            [1, 1],
            [0, 255],
            gradientMatrix
          );
          
          // Draw the bar based on the current value
          this.graphics.drawRect(
            width * (i / bufferLength), // E.g. 300 * (8 / 256) = 9
            height, // E.g. 100
            10,
            -(height * value) // E.g. -(100 * 0.04504564)
          );
          
          this.graphics.endFill();
        }
      }
      
    ]]>
  </fx:Script>
  
</s:BorderContainer>