Audioscopes101

Play some music to see the effect...

Right Now(Rocker)
Whiter Shade Of Pale (Softrock)
Echoes (Mellow)

You might have seen an Audioscope somewhere and wondered what they were and how you could make one for yourself...or maybe your seeing them for the first time...These are WebTV specific and in this tutorial you will learn all of the "Attributes"...how to make them...and see examples as well...and then you will be able to build one your self using one of my 2 different builders.

Audioscopes are basically used with music and sounds to to create cool effects to enhance your website pages...they can be very elaborate and you can get really inventive and make them do all kinds of things as you will see...and they can also be addicting to make. So don't be afraid to experiment or change things around. Trust me... you won't break anything.

So...let's get started!!

The first thing you need to know are the "Attributes" of an Audioscope.

Gain - This will tell your Audioscope how much to react to the sound. The value can be a Positive number, zero, or a Negative number. Set the gain to "0" and you get a scope that resembles led's on a home stereo...setting it higher changes the scope and effects...
Height - This determines the Height of the Audioscope.
Width - This determines the Width of the Audioscope.
Border - This creates a Border around your Audioscope...and can also be done using Tables...
Leftcolor/Rightcolor - On each Audioscope there is a "Left" and "Right" Audioscope indicator. This determines the color of each one...
Leftoffset/Rightoffset - This Attribute will seperate the left and right tracks on the Audioscope. One value should be a "Positive number" and the other a "Negative number" to keep them even, but you can put in any value to get whatever effect you want.
Bgcolor - This determines the Background color of your Audioscope.
MaxLevel - Maxlevel displays a floating horizontal bar indicating the maximum volume...the setting for this is just simply maxlevel.

NOTE: The Attributes Height, Width, Border, Leftoffset, & Rightoffset are all measured in Pixels.

First...Here's your basic Audioscope with a simple code and no Attributes.
Yeah I know...real exciting huh!...NOT!

The Code;

<Audioscope>

Here's the same one with the Width Attribute added to it. Width can be set with either a number of pixels or a percentage of screen width.

The Code:
<Audioscope Width="350">

Now we'll change the Height a little and change the background color using the Bgcolor Attribute...which will make it look like this...

The Code:
<audioscope bgcolor="#111111" height="40" width="350">

Or like this...

The Code:
<Audioscope Bgcolor="#111111" Height="300" Width="100">

Now we'll spruce it up a bit and change the color of the pulse lines in the scope using Leftcolor & Rightcolor Attributes...

The Code:
<Audioscope Leftcolor="teal" Rightcolor="silver" Bgcolor="#111111" Height="60" Width="350">

Now we'll add the Rightoffset and Leftoffset so they are more visible which allows you to separate the right and left channels graphically, usually you set them to a positive and negative number of the same value...
Oh Yeah!...Lookin Good!

The Code:
<Audioscope Leftoffset="-4" Rightoffset="4" Leftcolor="teal" Rightcolor="silver" Bgcolor="111111" Height="60" Width="350">

Now we'll add the Maxlevel which adds a neat effect to it...

The Code:
<Audioscope Leftcolor="teal" Rightcolor="silver" Leftoffset="-4" Rightoffset="4" Bgcolor="#111111" Height="60" Width="350" maxlevel>

Here's how the Maxlevel behaves in 3 different vertical standing scopes with the gain value set at 1, 2, & 3...and yes those are 2 smaller scopes dividing them and 1 above and below to show you more of what you can do...

The Code:
<center> <audioscope gain="1" leftcolor="teal" rightcolor="silver" bgcolor="#000000" height="10" width="245"> <br> <audioscope gain="1" leftcolor="teal" rightcolor="silver" leftoffset="-4" rightoffset="4" bgcolor="#111111" height="200" width="75" maxlevel> <audioscope bgcolor="#000000" height="200" width="10" gain="2" leftoffset="-4" rightoffset="4" leftcolor="teal" rightcolor="silver"> <audioscope gain="2" leftcolor="teal" rightcolor="silver" leftoffset="-4" rightoffset="4" bgcolor="#111111" height="200" width="75" maxlevel> <audioscope bgcolor="#000000" height="200" width="10" gain="3" leftoffset="-4" rightoffset="4" leftcolor="teal" rightcolor="silver"> <audioscope gain="3" leftcolor="teal" rightcolor="silver" leftoffset="-4" rightoffset="4" bgcolor="#111111" height="200" width="75" maxlevel> <br> <audioscope gain="1" leftcolor="teal" rightcolor="silver" bgcolor="#000000" height="10" width="245"> </center>

Now we'll beef up the scope even more and add a Border...

The Code:
<Audioscope Leftcolor="teal" Rightcolor="silver" Leftoffset="-4" Rightoffset="4" Bgcolor="#111111" Height="60" Width="350" Border="10" maxlevel>

NOTE: You can also add a table to your Audioscope allowing you to add a image to the border or even an animated gif which can make them look really cool like the two below...

The Code:
<table background="YOUR BACKGROUND HERE" border="5"> <tr><td bgcolor="#000000"> <audioscope bgcolor="#000000" leftcolor="teal" rightcolor="silver" leftoffset="-4" righoffset="4" height="75" width="350" gain="2" maxlevel> </tr></td></table>

The Code:
<table background="YOUR BACKGROUND HERE.jpg" border="5"> <tr><td> <audioscope bgcolor="#000000" height="50" width="175" gain="2" leftoffset="5" rightoffset="-5" leftcolor="purple" rightcolor="yellow"> <embed src="YOUR IMAGE HERE.gif"> <audioscope bgcolor="#000000" height="50" width="30" gain="0" leftoffset="2" rightoffset="-2" leftcolor="black" rightcolor="black"> <embed src="YOUR IMAGE HERE.gif"> <audioscope bgcolor="#000000" height="50" width="175" gain="2" leftoffset="5" rightoffset="-5" leftcolor="purple" rightcolor="yellow"> </tr></td></table>

Now for the "Gain" Attribute which allows you to set the amount of vertical response to music volume in the Audioscope making it look sortof like the led's you see on your home stereo...

The Code:
<Audioscope Gain="0" Bgcolor="#111111" Leftcolor="teal" Rightcolor="silver" Height="60" Width="350" Border="10">

The change in this Audioscope is because the Gain is equal to zero. And because the "Leftoffset/Rightoffset" has no effect when the Gain Attribute is added they are not included here...

Now if you make the Gain equal to a Negative number, this is what you get...

The Code:
<Audioscope Bgcolor="#111111" Leftcolor="teal" Rightcolor="silver" Height="60" Width="350" Border="10" Gain="-10">

In this one you can see how the Silver and Teal colors blend together creating a cool effect...in this case you can set the "Leftcolor/Rightcolor" to the same value if you're looking for a certain color...

Here is the same one as above but with the "Leftoffset/Rightoffset" added to it...

The Code:
<Audioscope Gain="-10" Bgcolor="#111111" Leftcolor="teal" Rightcolor="silver" Leftoffset="-4" Rightoffset="4" Height="60" Width="350" Border="10">

Ok...There you are...You've seen all the different Attributes of an Audioscope...You've seen some examples & the related codes...Now you can start building one for yourself. Just go below toeither of my Audioscope Builders to get started, and remember what I said earlier... you won't break anything. And if your not happy with the outcome of your Audioscope, just start over until you have something you like. So...what are you waiting for? Get to it...and have fun!

Choose A Builder Below And Start Building Your Audioscope or checkout Coolscopes to see some more Cool examples I put together!

WebGizmos CoolScopes

Audioscope Builder1 ~ Audioscope Builder2