73 lines
3.2 KiB
PHP
73 lines
3.2 KiB
PHP
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Audio Recorder & Visualizer</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<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=Poppins:wght@400;600&display=swap" rel="stylesheet">
|
|
<link href="assets/css/custom.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="p-3 bg-dark text-white text-center">
|
|
<h1>Audio Recorder & Visualizer</h1>
|
|
</header>
|
|
|
|
<div class="container my-5">
|
|
<div class="hero p-5 text-center bg-image" style="background-image: url('https://picsum.photos/seed/wave/1200/400'); border-radius: 0.5rem;">
|
|
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
|
|
<div class="d-flex justify-content-center align-items-center h-100">
|
|
<div class="text-white">
|
|
<h1 class="mb-3">Record and Visualize Your Audio</h1>
|
|
<p class="mb-3">Click the button below to start recording your microphone and see the audio visualized in real-time.</p>
|
|
<button id="startRecordBtn" class="btn btn-primary btn-lg">Start Recording</button>
|
|
<button id="stopRecordBtn" class="btn btn-danger btn-lg" disabled>Stop Recording</button>
|
|
<button id="saveRecordBtn" class="btn btn-success btn-lg" style="display: none;">Save Recording</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
<div class="col-md-8 offset-md-2">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-center">Live Audio Waveform</h5>
|
|
<canvas id="waveform"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
<div class="col-md-8 offset-md-2">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-center">Saved Recordings</h5>
|
|
<div id="recordingsList"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-5 text-center">
|
|
<div class="col-md-6">
|
|
<img src="https://picsum.photos/seed/record/600/400" class="img-fluid rounded" alt="A modern microphone in a recording studio.">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<img src="https://picsum.photos/seed/gallery/600/400" class="img-fluid rounded" alt="A collection of audio waveforms.">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="p-3 bg-dark text-white text-center mt-5">
|
|
<p>© 2025 Audio Recorder & Visualizer</p>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
</html> |