Spaces:
Running
Running
File size: 4,387 Bytes
2be8bea fb20b43 2be8bea 2059dc4 2be8bea 2059dc4 2be8bea 2059dc4 2be8bea 2059dc4 2be8bea 2059dc4 2be8bea fb20b43 2be8bea fb20b43 2be8bea fb20b43 2be8bea fb20b43 2be8bea fb20b43 2be8bea fb20b43 2be8bea fb20b43 2be8bea fb20b43 f84fa7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animalese.js Demo</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #000; /* Set background to black */
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 20px;
}
h2 {
color: #4CAF50;
}
.container {
background-color: #111; /* Dark gray for container background */
padding: 20px;
border-radius: 8px;
border: 2px solid #fff; /* White border around the box */
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); /* White shadow for slight emphasis */
max-width: 600px;
width: 100%;
}
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #222; /* Darker background for textarea */
color: #fff; /* White text in textarea */
resize: vertical;
margin-bottom: 10px;
}
label {
display: flex;
align-items: center;
margin-bottom: 10px;
}
input[type="checkbox"],
input[type="range"] {
margin-left: 10px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button:disabled {
background-color: #555;
cursor: not-allowed;
}
a {
color: #4CAF50;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
<script src="riffwave.js"></script>
<script src="Blob.js"></script>
<script src="FileSaver.min.js"></script>
<script src="animalese.js"></script>
<script>
function dataURItoBlob(dataURI) {
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
}
var synth = new Animalese('animalese.wav', function () {
document.getElementById("preview").disabled = false;
document.getElementById("download").disabled = false;
});
function generateWav() {
return synth.Animalese(document.getElementById("text").value,
document.getElementById("shorten").checked,
document.getElementById("pitch").value).dataURI;
}
function preview() {
var audio = new Audio();
audio.src = generateWav();
audio.play();
}
function download() {
var wave = generateWav();
saveAs(dataURItoBlob(wave), "animalese.wav");
}
</script>
</head>
<body>
<div class="container">
<h2>Animalese.js Demo</h2>
<p>More information and the source at <a href="https://github.com/Acedio/animalese.js">https://github.com/Acedio/animalese.js</a>.</p>
<textarea id="text" rows="4" cols="50">Testing out animalese.js. Did it work?</textarea><br/>
<label>Shorten words<input id="shorten" type="checkbox" /></label><br/>
<label>Grump<input id="pitch" type="range" min="0.2" max="2.0" value="1.0" step="0.1" />Isabelle</label><br/>
<button id="preview" type="button" disabled="true" onclick="preview()">Preview!</button>
<button id="download" type="button" disabled="true" onclick="download()">Download!</button>
</div>
</body>
</html>
|