Vol. 1, No. 38
Adding Voice Chat To Your Site
All right, cats and kitties. Dig this vibe I'm laying on you: Today
we are going to take it easy. No elaborate languages to learn, no
tricky cross-platform work-arounds, no complicated protocols to
engineer or tedious charts to memorize. No, today we get to make use
of code that's already written for us, nifty code that installs with
minimal fuss and does what it's supposed to. Aahhh, that's so nice.
The software is Voice Chat, provided by your friends at Tripod,
courtesy of THEIR friends at Evoke. It runs on the server, in a
little pop-up window, and adds a certain slick function to your site.
Can you guess what the function is? That's right! Voice chat!
Using their computers' built-in microphones, visitors to your site
can chat with you and amongst themselves; using the vocal cords Nature
gave them, just like that twentieth-century technology, the telephone,
or, even more shocking, the quaint prehistoric innovation of face-to-face
speech. But without the horrible awkwardness of leaving their
workstations, of course. Thank heaven. And so, begone, inconveniences
of typed chat! Now no longer do you have to miss nuances of expression,
rely on lame little smiley faces for emotional content, or wonder in
vain what your new e-friend's Glasgow accent sounds like (though if
it turns out to be totally incomprehensible, perhaps typing is best
for you after all).
A Voice Chat chat room can accommodate as many as 20 people, although
the limitations of the human social apparatus and brain tend to make
smaller groups generally more comfortable. The chat code lives on the
Tripod server, and in fact it's already installed there. All you have
to do is put a snippet of JavaScript on your page to call up the chat
client in a pop-up window. You can get the JavaScript from this page.
But let's take a look at the code here anyway, to see how to customize
aspects of the client, and also to review a teeny bit of JavaScript,
just so our brains don't totally atrophy this week. Here it is:
<script language="JavaScript">
<!--
function EvokePopup()
{
var SpeakerVolume = "0x000000FF";
var MicrophoneVolume = "0x000000FF";
var PanelBackground = "0x00CCCCCC";
var ParticipantsListBackground = "0x00FFFFFF";
var ParticipantsListText = "0x00000000";
var ButtonFace = "0x00CCCCCC";
var popup = window.open("",
"EvokePopup",'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,
width=250,height=368');
popup.location =
"http://members.tripod.com/bin/voicechat/client?UniqueKey=username000000&
SpeakerVolumeColor="+SpeakerVolume+"
&MicrophoneVolumeColor="+MicrophoneVolume+"&PanelBackgroundColor="+PanelBackground+"
&ParticipantsListBackgroundColor="+ParticipantsListBackground+
"&ParticipantsListTextColor="+ParticipantsListText+"&ButtonFaceColor="+ButtonFace;
}
if(window.parent==window) {
EvokePopup();
}
// -->
</script>
Plug that into your page and you're all set: it will pop up a Voice
Chat window. As you can clearly see, because you know and love
JavaScript, the function EvokePopup opens a 250x368 browser window
containing the page at members.tripod.com/bin/voicechat/client, and
passes it a bunch of variables which you can define by modifying the
var statements in the code. Simple. (In your case, you'll want to get
the snippet from the actual page mentioned above, so that you can be
issued your unique key, which is passed to the server as the variable
UniqueKey.)
The variables you can modify change the colors of the various aspects
of the client: the different volume readouts, the backgrounds, the
text, and the buttons. (Got that? Just the colors. The variable
SpeakerVolume doesn't change the speaker volume, just the COLOR of
the speaker volume DISPLAY. Okay?) They are in the form of hex codes,
which you are no doubt familiar with from HTML like <BODY BGCOLOR="00FF00">.
The codes are preceded by 0x00, which lets the server know that they
are hex codes. You can just ignore that part. I just told you that
they're hex codes, and unlike a computer, you don't need to be told
each time. As in HTML, the first two digits (after the 0x00) represent
the proportion of red on a hexadecimal scale from 00 to FF (which
translates to "0 to 255" in normal numbers); the second two digits
represent the proportion of green, and the last pair of digits
represent the proportion of green. But you knew that, you knew that.
HINTS, POINTERS, AND TIPS 'O THE TRADE:
It's a good idea to put a little explanatory text on your site to
explain to the users what exactly is going on with this pop-up window,
and how to use it. You'd want them to do the same for you, right?
WD40 is fantastic for lifting smudges from painted walls. Spot-test
in an inconspicuous place first.
RESOURCES:
Chart of hexadecimal Web color codes.
Evoke Communications.
Understanding Scottish slang.