68 lines
3.2 KiB
PHP
68 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=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
|
<link href="assets/css/custom.css?v=<?php echo time(); ?>" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="p-3 mb-4 text-center">
|
|
<h1 class="display-5">Audio Recorder</h1>
|
|
<p class="lead text-muted">Record, visualize, and save your audio with ease.</p>
|
|
</header>
|
|
|
|
<div class="container-fluid px-4">
|
|
<div class="row g-4">
|
|
<!-- Left Column: Recorder -->
|
|
<div class="col-lg-7">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title mb-3">Recorder</h5>
|
|
<div class="flex-grow-1 d-flex align-items-center justify-content-center bg-light rounded p-3">
|
|
<canvas id="waveform"></canvas>
|
|
</div>
|
|
<div class="d-flex justify-content-center align-items-center mt-4">
|
|
<button id="startRecordBtn" class="btn btn-primary btn-lg rounded-pill px-4 me-3">
|
|
<i class="bi bi-mic-fill me-2"></i>Start Recording
|
|
</button>
|
|
<button id="stopRecordBtn" class="btn btn-danger btn-lg rounded-pill px-4" disabled>
|
|
<i class="bi bi-stop-fill me-2"></i>Stop
|
|
</button>
|
|
<button id="saveRecordBtn" class="btn btn-success btn-lg rounded-pill px-4" style="display: none;">
|
|
<i class="bi bi-save-fill me-2"></i>Save Recording
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Library -->
|
|
<div class="col-lg-5">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-3">Library</h5>
|
|
<div id="recordingsList" class="overflow-auto" style="max-height: 400px;">
|
|
<!-- Recordings will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="text-center text-muted mt-5 pb-3">
|
|
<p>© 2025 Audio Recorder. All Rights Reserved.</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?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|