admin/34321-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nice design

Browse Source
This commit is contained in:
Flatlogic Bot 2025-09-23 21:45:57 +00:00
parent fece30dee1
commit 1dedc6920a
5 changed files with 175 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
assets/css/custom.css
View File

@ -1,22 +1,79 @@
/* General Body Styles */
body {
background-color: #F0F8FF;
font-family: 'Poppins', sans-serif;
background-color: #f8f9fa; /* Light gray background */
font-family: 'Inter', sans-serif;
color: #343a40;
}
.hero {
background-image: url('https://picsum.photos/seed/wave/1200/400');
background-size: cover;
background-position: center;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
/* Header */
header h1 {
font-weight: 600;
}
/* Card Styles */
.card {
border: none;
border-radius: 0.75rem; /* Softer rounded corners */
}
.card-title {
font-weight: 500;
color: #495057;
}
/* Waveform Canvas */
#waveform {
display: block;
width: 100%;
height: 200px;
background-color: #FFFFFF;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
height: 150px; /* Adjusted height */
}
.bg-light {
background-color: #e9ecef !important;
}
/* Buttons */
.btn {
font-weight: 500;
transition: all 0.2s ease-in-out;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background-color: #0d6efd;
border-color: #0d6efd;
}
/* Recordings List */
#recordingsList .list-group-item {
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
margin-bottom: 0.75rem;
transition: background-color 0.2s ease;
}
#recordingsList .list-group-item:hover {
background-color: #f1f3f5;
}
#recordingsList .btn-play {
background-color: #198754; /* Green play button */
color: white;
}
#recordingsList .btn-play:hover {
background-color: #157347;
}
#recordingsList .recording-name {
font-weight: 500;
}
/* Footer */
footer {
font-size: 0.9rem;
}

36
assets/js/main.js
View File

@ -24,28 +24,32 @@ document.addEventListener('DOMContentLoaded', () => {
console.log('Recordings found:', recordings);
recordingsList.innerHTML = '';
if (recordings.length > 0) {
const list = document.createElement('ul');
const list = document.createElement('div');
list.className = 'list-group';
recordings.forEach(recording => {
const listItem = document.createElement('li');
listItem.className = 'list-group-item d-flex justify-content-between align-items-center';
// Extract just the filename
const fileName = recording.split('/').pop();
listItem.innerText = fileName;
const card = document.createElement('div');
card.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center';
const nameSpan = document.createElement('span');
nameSpan.className = 'recording-name';
nameSpan.textContent = fileName;
const audio = new Audio(recording);
const playBtn = document.createElement('button');
playBtn.className = 'btn btn-primary btn-sm';
playBtn.innerText = 'Play';
playBtn.onclick = () => audio.play();
playBtn.className = 'btn btn-play btn-sm rounded-pill';
playBtn.innerHTML = '<i class="bi bi-play-fill"></i>';
playBtn.onclick = () => {
const audio = new Audio(recording);
audio.play();
};
listItem.appendChild(playBtn);
list.appendChild(listItem);
card.appendChild(nameSpan);
card.appendChild(playBtn);
list.appendChild(card);
});
recordingsList.appendChild(list);
} else {
recordingsList.innerHTML = '<p class="text-center">No recordings yet.</p>';
recordingsList.innerHTML = '<div class="text-center text-muted p-4"><p>No recordings yet.</p><small>Your saved recordings will appear here.</small></div>';
}
} catch (error) {
console.error('Failed to load recordings:', error);
@ -76,10 +80,10 @@ document.addEventListener('DOMContentLoaded', () => {
const draw = () => {
animationFrameId = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillStyle = '#F0F8FF';
canvasCtx.fillStyle = '#e9ecef'; // Match the light background
canvasCtx.fillRect(0, 0, waveformCanvas.width, waveformCanvas.height);
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = '#1E90FF';
canvasCtx.strokeStyle = '#0d6efd'; // Primary button color
canvasCtx.beginPath();
const sliceWidth = waveformCanvas.width * 1.0 / bufferLength;
let x = 0;
@ -109,7 +113,6 @@ document.addEventListener('DOMContentLoaded', () => {
mediaRecorder.onstop = () => {
console.log('MediaRecorder stopped and onstop event fired.');
// Stop all tracks on the stream to release the microphone
if (streamReference) {
streamReference.getTracks().forEach(track => track.stop());
console.log('Microphone stream tracks stopped.');
@ -176,7 +179,6 @@ document.addEventListener('DOMContentLoaded', () => {
saveRecordBtn.style.display = 'none';
loadRecordings();
} else {
// Use the error from the JSON if available, otherwise a generic message
const errorMessage = data.error || 'An unknown error occurred.';
alert('Error saving recording: ' + errorMessage);
console.error('Server-side save error:', errorMessage);

BIN
assets/pasted-20250923-214203-80d8873e.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 534 KiB

78
index.php
View File

@ -7,67 +7,61 @@
<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">
<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 bg-dark text-white text-center">
<h1>Audio Recorder & Visualizer</h1>
<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 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>
<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>
<div class="row mt-5">
<div class="col-md-8 offset-md-2">
<div class="card">
<!-- Right Column: Library -->
<div class="col-lg-5">
<div class="card shadow-sm h-100">
<div class="card-body">
<h5 class="card-title text-center">Saved Recordings</h5>
<div id="recordingsList"></div>
<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>
<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>&copy; 2025 Audio Recorder & Visualizer</p>
<footer class="text-center text-muted mt-5 pb-3">
<p>&copy; 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"></script>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>

56
save_audio.php
View File

@ -6,35 +6,71 @@ $response = [];
// The directory where recordings will be stored.
$uploadDir = 'uploads/';
// Ensure the upload directory exists and is writable.
// Check if the upload directory exists and is writable.
if (!is_dir($uploadDir)) {
// Try to create it if it doesn't exist.
if (!mkdir($uploadDir, 0775, true)) {
$response = ['success' => false, 'message' => 'Failed to create upload directory.'];
$response = ['success' => false, 'error' => 'Server error: Cannot create upload directory.'];
echo json_encode($response);
exit;
}
}
// Get the raw POST data.
$audioData = file_get_contents('php://input');
if (!is_writable($uploadDir)) {
$response = ['success' => false, 'error' => 'Server error: The uploads directory is not writable. Please check file permissions.'];
echo json_encode($response);
exit;
}
if ($audioData) {
// Generate a unique filename.
// Check if a file was uploaded and there are no errors.
if (isset($_FILES['audio_data']) && $_FILES['audio_data']['error'] == UPLOAD_ERR_OK) {
// Get the temporary file path of the uploaded file.
$tmpName = $_FILES['audio_data']['tmp_name'];
// Generate a unique filename to prevent overwriting existing files.
$fileName = 'recording_' . date('Y-m-d_H-i-s') . '_' . uniqid() . '.wav';
$filePath = $uploadDir . $fileName;
// Save the file.
if (file_put_contents($filePath, $audioData)) {
// Move the uploaded file from the temporary directory to the final destination.
if (move_uploaded_file($tmpName, $filePath)) {
$response['success'] = true;
$response['message'] = 'Audio saved successfully.';
$response['file_path'] = $filePath;
} else {
$response['success'] = false;
$response['message'] = 'Error saving audio file. Check directory permissions.';
$response['error'] = 'Error saving audio file after upload. Check directory permissions.';
}
} else {
// Handle potential upload errors.
$error_message = 'No audio data received or an upload error occurred.';
if (isset($_FILES['audio_data']['error'])) {
switch ($_FILES['audio_data']['error']) {
case UPLOAD_ERR_INI_SIZE:
$error_message = 'The uploaded file exceeds the upload_max_filesize directive in php.ini.';
break;
case UPLOAD_ERR_FORM_SIZE:
$error_message = 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form.';
break;
case UPLOAD_ERR_PARTIAL:
$error_message = 'The uploaded file was only partially uploaded.';
break;
case UPLOAD_ERR_NO_FILE:
$error_message = 'No file was uploaded.';
break;
case UPLOAD_ERR_NO_TMP_DIR:
$error_message = 'Missing a temporary folder.';
break;
case UPLOAD_ERR_CANT_WRITE:
$error_message = 'Failed to write file to disk.';
break;
case UPLOAD_ERR_EXTENSION:
$error_message = 'A PHP extension stopped the file upload.';
break;
}
}
$response['success'] = false;
$response['message'] = 'No audio data received.';
$response['error'] = $error_message;
}
echo json_encode($response);