Introduction
This JavaScript based effect simulates the character-by-character transmission of secure data to a terminal.
Background
The code has been designed to move through a set of text on a character-by-character basis with a telemetry data received audio “blip”. This happens by making a copy of the text in a hidden DIV tag, and clearing the tag text then showing the DIV. Next, each character is reintroduced into the DIV tag one at a time while playing a “blip” sound.
The script also supports changing the audio “blip” style through an embedded tag: <!--SWAPSOUND-->. Here is the function that displays the next character:
Disclaimer: I have only tested the code on Internet Explorer so far.
function DisplayNextChar()
{
var nextChar = text.charAt(index);
if (nextChar == "<")
{
var endOfTag = text.indexOf(">", index) + 1;
var tag = text.substring(index, endOfTag).toUpperCase();
if (tag == "<!--SWAPSOUND-->")
{
Pause();
tickSound = !tickSound;
Resume();
}
else if (tag == "<BR>")
document.all.message.innerHTML += "<BR><BR>";
else
document.all.message.innerHTML += tag;
index = endOfTag;
}
else if (nextChar == "&")
{
var endOfElem = text.indexOf(";", index) + 1;
document.all.message.innerHTML += text.substring(index, endOfElem);
index = endOfElem;
}
else
{
document.all.message.innerHTML += nextChar;
index++;
}
document.all.ScrollMarker.scrollIntoView();
if (index >= text.length - 1)
{
Pause();
document.all.EndTransmissionSound.src = "BlipEnd.wma";
}
else if (nextChar == ".")
{
Pause();
setTimeout(Resume, 100);
}
}
To add to the effect, the sound balance is rotated from one speaker to the other, adding to the allusion that the data is moving. This is accomplished by adjusting the sound’s balance property on a timer:
function RotateBalance()
{
var balance = document.all.TelemetrySound.balance;
balance += 50;
if (balance > 5000) balance = -5000;
document.all.TelemetrySound.balance = balance;
}
Using the code
The following code shows some example text and the script code in ONLOAD that starts the effect (make sure and download the entire set of script for proper operation - only excerpts of the code have been provided):
<BODY BGCOLOR="black" ONLOAD="InitTextEffect()" STYLE="MARGIN: 0px">
<DIV ID="message" CLASS="message" STYLE="DISPLAY:none; PADDING-LEFT: 10px; ">
Transmission one.<BR>
<!----><BR>
Transmission two.<BR>
</DIV>
<A HREF="#" ID="ScrollMarker"></A>
</BODY>
