43 lines
2.1 KiB
PHP
43 lines
2.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Real-time Voice Visualizer</title>
|
|
<meta name="description" content="A web application that captures audio input in real-time and visualizes it as dynamic charts or graphs.">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="text-center p-4">
|
|
<h1>Voice Visualizer</h1>
|
|
</header>
|
|
|
|
<main class="container text-center">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<canvas id="visualizer" width="800" height="300"></canvas>
|
|
<p id="status" class="mt-3">Click the button to start visualizing your voice.</p>
|
|
<button id="startButton" class="btn btn-primary btn-lg mt-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-mic-fill" viewBox="0 0 16 16">
|
|
<path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"/>
|
|
<path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
|
|
</svg>
|
|
Start Visualization
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="text-center p-4 mt-5">
|
|
<p class="text-muted">Powered by Flatlogic.</p>
|
|
</footer>
|
|
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html> |