add table for audios & delet visualizer background
This commit is contained in:
haakel
parent
9b5ea52006
commit
afb97f51bb
|
|
@ -56,7 +56,25 @@
|
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* سایه برای دادن عمق */
|
||||
}
|
||||
|
||||
/* افزودن این استایل برای تغییر رنگ و ظاهر خط */
|
||||
.audio-diary-admin-page canvas {
|
||||
background-color: transparent; /* حذف پسزمینه سیاه */
|
||||
#visualizer {
|
||||
background-color: #f9f9f9; /* پسزمینه ملایم */
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
|
||||
.wrap table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.wrap th, .wrap td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.wrap th {
|
||||
background-color: #f2f2f2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,27 +16,34 @@ jQuery(document).ready(function($) {
|
|||
const canvas = document.getElementById('visualizer');
|
||||
const canvasCtx = canvas.getContext('2d');
|
||||
|
||||
function draw() {
|
||||
function draw() {
|
||||
requestAnimationFrame(draw);
|
||||
|
||||
analyser.getByteTimeDomainData(dataArray);
|
||||
|
||||
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
|
||||
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
canvasCtx.clearRect(0, 0, canvas.width, canvas.height); // حذف پسزمینه سیاه
|
||||
|
||||
// تنظیمات خط وسط
|
||||
const centerY = canvas.height / 2;
|
||||
canvasCtx.beginPath();
|
||||
canvasCtx.moveTo(0, centerY);
|
||||
canvasCtx.lineTo(canvas.width, centerY);
|
||||
canvasCtx.strokeStyle = 'rgba(0, 0, 0, 0.2)'; // خط وسط نیمه شفاف
|
||||
canvasCtx.lineWidth = 1;
|
||||
canvasCtx.stroke();
|
||||
|
||||
// تنظیمات خط موج صدا
|
||||
canvasCtx.lineWidth = 2;
|
||||
canvasCtx.strokeStyle = 'rgb(255, 255, 255)';
|
||||
canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; // خط موج صدا مشکی
|
||||
|
||||
canvasCtx.beginPath();
|
||||
|
||||
let sliceWidth = canvas.width * 1.0 / bufferLength;
|
||||
let x = 0;
|
||||
|
||||
for(let i = 0; i < bufferLength; i++) {
|
||||
for (let i = 0; i < bufferLength; i++) {
|
||||
let v = dataArray[i] / 128.0;
|
||||
let y = v * canvas.height / 2;
|
||||
|
||||
if(i === 0) {
|
||||
if (i === 0) {
|
||||
canvasCtx.moveTo(x, y);
|
||||
} else {
|
||||
canvasCtx.lineTo(x, y);
|
||||
|
|
@ -99,7 +106,7 @@ jQuery(document).ready(function($) {
|
|||
$.toast({
|
||||
text: "Failed to save audio", // Text that is to be shown in the toast
|
||||
heading: 'Note', // Optional heading to be shown on the toast
|
||||
icon: 'Error', // Type of toast icon
|
||||
icon: 'error', // Type of toast icon
|
||||
showHideTransition: 'fade', // fade, slide or plain
|
||||
allowToastClose: true, // Boolean value true or false
|
||||
hideAfter: 3000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
|
||||
|
|
|
|||
|
|
@ -30,10 +30,34 @@ class Audio_Diary_Admin_Page {
|
|||
add_action('admin_menu', array($this, 'add_menu_item'));
|
||||
add_action('admin_enqueue_scripts', array($this, 'enqueue_scripts'));
|
||||
add_action('wp_ajax_save_audio', array($this, 'save_audio'));
|
||||
|
||||
add_action('wp_ajax_delete_audio_files', 'delete_audio_files');
|
||||
$this->create_audio_folder();
|
||||
}
|
||||
|
||||
function delete_audio_files() {
|
||||
check_ajax_referer('audio-diary-nonce', '_ajax_nonce');
|
||||
|
||||
if (!isset($_POST['files']) || !is_array($_POST['files'])) {
|
||||
wp_send_json_error('Invalid request');
|
||||
}
|
||||
|
||||
$uploads = wp_upload_dir();
|
||||
$audio_dir = $uploads['basedir'] . '/audio-diary/';
|
||||
$deleted = [];
|
||||
|
||||
foreach ($_POST['files'] as $file) {
|
||||
$file_path = $audio_dir . basename($file);
|
||||
if (file_exists($file_path) && unlink($file_path)) {
|
||||
$deleted[] = $file;
|
||||
}
|
||||
}
|
||||
|
||||
if (empty($deleted)) {
|
||||
wp_send_json_error('No files deleted');
|
||||
}
|
||||
|
||||
wp_send_json_success($deleted);
|
||||
}
|
||||
public function add_menu_item() {
|
||||
add_menu_page(
|
||||
'Audio Diary', // عنوان صفحه
|
||||
|
|
|
|||
|
|
@ -1,14 +1,36 @@
|
|||
<?php
|
||||
$uploads = wp_upload_dir();
|
||||
$audio_files = glob($uploads['basedir'] . '/audio-diary/*.wav');
|
||||
|
||||
usort($audio_files, function($a, $b) {
|
||||
return filemtime($b) - filemtime($a);
|
||||
});
|
||||
|
||||
?>
|
||||
<div class="wrap">
|
||||
<h1><?php _e('Recorded Audios', 'audio-diary'); ?></h1>
|
||||
<ul>
|
||||
<?php foreach ($audio_files as $file) : ?>
|
||||
<li>
|
||||
<audio controls src="<?php echo $uploads['baseurl'] . '/audio-diary/' . basename($file); ?>"></audio>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><?php _e('Date', 'audio-diary'); ?></th>
|
||||
<th><?php _e('Time', 'audio-diary'); ?></th>
|
||||
<th><?php _e('Audio', 'audio-diary'); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($audio_files as $file) :
|
||||
$file_date = date("Y-m-d", filemtime($file));
|
||||
$file_time = date("H:i:s", filemtime($file));
|
||||
$file_url = $uploads['baseurl'] . '/audio-diary/' . basename($file);
|
||||
?>
|
||||
<tr>
|
||||
<td><?php echo $file_date; ?></td>
|
||||
<td><?php echo $file_time; ?></td>
|
||||
<td>
|
||||
<audio controls src="<?php echo $file_url; ?>"></audio>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
Loading…
Reference in New Issue