Spaces:

Blane187
/

animalese-js

Running

App Files Files Community

Blane187 commited on Aug 17, 2024

Commit

2be8bea

verified ·

1 Parent(s): fb20b43

Update index.html

Browse files

Files changed (1) hide show

index.html +113 -52

index.html CHANGED Viewed

@@ -1,62 +1,123 @@
-<html>
 <head>
-    <title>animalese.js Demo</title>
-</head>
-<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) {
-  // convert base64/URLEncoded data component to raw binary data held in a string
-  var byteString;
-  if (dataURI.split(',')[0].indexOf('base64') >= 0)
-    byteString = atob(dataURI.split(',')[1]);
-  else
-    byteString = unescape(dataURI.split(',')[1]);
-  // separate out the mime component
-  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
-  // write the bytes of the string to a typed array
-  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>
 <body>
-    <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="false" onclick="download()">Download!</button>
 </body>
 </html>

+<!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: #f5f5f5;
+            color: #333;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 0;
+            padding: 20px;
+        }
+        h2 {
+            color: #4CAF50;
+        }
+        .container {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            max-width: 600px;
+            width: 100%;
+        }
+        textarea {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            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: #ddd;
+            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>