Calculator Tools Calculator Tools
Create

The Z Script Voice App

Jul 10, 2025

About this app

Create and simulate your own Z script dialogues using various GoAnimate characters and their voices!

The Z Script Voice App The Z Script Voice App Select a Character: Enter Dialogue: Generate Dialogue

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>The Z Script Voice App</title>
<meta name="description" content="Create and simulate your own Z script dialogues using various GoAnimate characters and their voices!" />
<meta name="keywords" content="GoAnimate, Z script, voice simulation, dropdowns, animation, dialogue" />

<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">


<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

const characters = {
"Character 1": "Voice 1 - Funny Sound",
"Character 2": "Voice 2 - Dramatic Sound",
"Character 3": "Voice 3 - Happy Sound",
"Character 4": "Voice 4 - Sad Sound",
"Character 5": "Voice 5 - Angry Sound"
};

document.addEventListener("DOMContentLoaded", function() {
const charSelect = document.getElementById("characterSelect");
const dialogueInput = document.getElementById("dialogueInput");
const output = document.getElementById("output");

Object.keys(characters).forEach(character => {
const option = document.createElement("option");
option.value = character;
option.textContent = character;
charSelect.appendChild(option);
});

document.getElementById("generateQuote").addEventListener("click", function() {
const selectedCharacter = charSelect.value;
const dialogueText = dialogueInput.value;
if (selectedCharacter && dialogueText) {
const voice = characters[selectedCharacter];
output.innerHTML += `<p><strong>${selectedCharacter} (${voice}):</strong> ${dialogueText}</p>`;
dialogueInput.value = '';
} else {
alert("Please select a character and enter dialogue.");
}
});
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
body {
background: linear-gradient(135deg, #6e8bc3, #d0e5ff);
color: #333;
font-family: 'Arial', sans-serif;
}
#main-container {
margin-top: 50px;
}
h1 {
text-align: center;
color: #4a86e8;
}
.card {
border-radius: 15px;
background-color: #ffffff;
padding: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
select, textarea {
border-radius: 10px;
border: 2px solid #4a86e8;
width: 100%;
margin-bottom: 15px;
}
button {
background: #4a86e8;
color: white;
border: none;
border-radius: 10px;
padding: 10px;
cursor: pointer;
font-weight: bold;
}
button:hover {
background: #3671bd;
transition: background 0.3s;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div class="card">
<h1>The Z Script Voice App</h1>
<div class="form-group">
<label for="characterSelect">Select a Character:</label>
<select id="characterSelect" class="form-control"></select>
</div>
<div class="form-group">
<label for="dialogueInput">Enter Dialogue:</label>
<textarea id="dialogueInput" class="form-control" rows="2" placeholder="Type the character's dialogue here..."></textarea>
</div>
<button id="generateQuote">Generate Dialogue</button>
<div id="output" class="mt-3"></div>
</div>
</div>
</body>
</html>