USER
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>مبدل صوت با هوش مصنوعی</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100vh;
background-color: #f0f0f0;
}
.iframe-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
iframe {
width: 100%;
height: calc(100% + 0.01cm); /* اضافه کردن 0.01 سانتیمتر به پایین */
border: none;
display: none;
position: relative;
top: -0.01cm; /* مخفی کردن 0.01 سانتیمتر از بالا */
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 10000;
}
.loading-message {
margin-bottom: 20px;
font-size: 18px;
}
.progress {
width: 80%;
max-width: 400px;
height: 20px;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0;
background-color: #4caf50;
transition: width 1s;
}
.error-message {
display: none;
color: red;
margin-top: 20px;
font-size: 16px;
text-align: center;
}
#retryButton {
display: none;
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
}
/* کاهش اندازه دکمههای دانلود و توضیحات */
.download-button, .description-button {
display: block;
width: 90px; /* کاهش عرض از 120px به 90px */
color: white;
text-align: center;
padding: 6px; /* کاهش padding از 8px به 6px */
border-radius: 5px;
cursor: pointer;
font-size: 12px; /* کاهش اندازه فونت از 14px به 12px */
transition: background-color 0.3s;
position: fixed;
top: 10px;
z-index: 10001;
text-decoration: none;
}
.download-button {
background-color: #4CAF50;
right: 10px;
}
.description-button {
background-color: rgb(84, 110, 122);
left: 10px;
}
.download-button:hover, .description-button:hover {
background-color: #45a049;
}
/* استایل پنجره سفارشی (modal) */
.modal {
display: none;
position: fixed;
z-index: 10002;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
max-width: 500px;
text-align: center;
border-radius: 5px;
}
/* پنجره تأیید دانلود */
.confirm-modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
text-align: center;
border-radius: 5px;
}
.modal-button {
margin-top: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
.cancel-btn {
background-color: #f44336;
color: white;
}
.translate-btn {
background-color: #4CAF50;
color: white;
}
.translate-btn:hover {
background-color: #45a049;
}
.confirm-btn {
background-color: #4CAF50;
color: white;
}
.confirm-btn:hover {
background-color: #45a049;
}
.canceled-btn {
background-color: #f44336;
color: white;
}
.canceled-btn:hover {
background-color: #d32f2f;
}
.audio-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
}
.audio-item {
margin: 20px 0;
width: 100%;
text-align: center;
}
.audio-player {
width: 80%;
margin-bottom: 10px;
}
.download-audio-button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
.download-audio-button:hover {
background-color: #45a049;
}
.audio-label {
font-weight: bold;
margin-bottom: 5px;
font-size: 16px;
}
.download-button-bottom {
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: #4CAF50;
padding: 12px; /* افزایش padding برای پهنای بیشتر */
width: 250px; /* تعیین عرض بیشتر */
border-radius: 5px;
color: white;
text-align: center;
font-size: 16px;
text-decoration: none;
z-index: 10001;
cursor: pointer;
}
.download-button-bottom:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<!-- دکمههای دانلود و توضیحات -->
<p>
<a href="#" class="download-button" id="downloadButton">دانلود صدا 📥</a>
<a href="#" class="description-button" id="descriptionButton">توضیحات</a>
</p>
<!-- پنجره سفارشی (modal) برای نمایش صداهای دانلود شده -->
<div id="myModal" class="modal">
<div class="modal-content">
<p style="text-align: center;">صداهای شناسایی شده</p>
<div class="audio-container" id="audioContainer"><!-- پلیرهای صدا در اینجا قرار خواهند گرفت --></div>
<button class="modal-button cancel-btn" id="closeBtn">بستن</button>
</div>
</div>
<!-- پنجره تأیید دانلود -->
<div id="confirmModal" class="modal">
<div class="confirm-modal-content">
<p>برای دانلود فایل صوتی روی تایید کلیک کنید و بعد از باز شدن مرورگر سمت راست فایل کلیک کنید و بارگیری فایل را انتخاب کنید.</p>
<button class="modal-button confirm-btn" id="confirmDownloadBtn">تایید</button>
<button class="modal-button canceled-btn" id="cancelDownloadBtn">لغو</button>
</div>
</div>
<!-- پنجره سفارشی (modal) برای نمایش توضیحات -->
<div id="myDescriptionModal" class="modal">
<div class="modal-content">
<hr />
<p><span style="color: #0000ff;">مبدل صوت با هوش مصنوعی</span> </p>
<p>اولین مجموعه تبدیل صوت در <span style="color: #33cccc;">برنامه هوش مصنوعی </span></p>
<p>تبدیل صداها به مدلهای دلخواه.</p>
<p>صدای خود را در کادر اول اضافه کنید </p>
<p>و در قسمت پرامپت به چیزی که میخواهید تبدیل بشه توضیحات رو به انگلیسی بنویسید.</p>
<p>چهار جایگاه برای اضافه کردن صدا است که میتوانید چند صدای از خودتون قرار بدید تا بهتر شناسایی شوند.</p>
<button class="modal-button translate-btn" id="translateBtn">مترجم</button>
<button class="modal-button cancel-btn" id="closeDescriptionBtn">بستن</button>
</div>
</div>
<!-- لودینگ و iframe -->
<div class="iframe-container">
<div class="loading" id="loadingContainer">
<div class="loading-message">لطفاً صبر کنید...</div>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="error-message" id="errorMessage">بارگیری زیاد طول کشید.<br />در صورت عدم بارگذاری، فیلترشکن خود را روشن کنید.</div>
<button id="retryButton">بارگذاری مجدد</button>
</div>
<iframe id="myIframe" onload="iframeLoaded()" onerror="iframeError()"></iframe>
</div>
<!-- دکمه دانلود صدا در پایین صفحه -->
<p>
<a href="#" class="download-button-bottom" id="downloadButtonBottom">دانلود صدا 📥</a>
</p>
<script>
let progress = 0;
const progressBar = document.getElementById('progressBar');
const retryButton = document.getElementById('retryButton');
const errorMessage = document.getElementById('errorMessage');
const loadingContainer = document.getElementById('loadingContainer');
let interval;
let iframeLoadedFlag = false;
// متغیر برای ذخیرهی لینک فایل صوتی انتخاب شده
let selectedAudioUrl = '';
function startProgress() {
loadingContainer.style.display = 'flex';
progressBar.style.width = '0%';
progress = 0;
interval = setInterval(() => {
if (progress < 100) {
progress += 10;
progressBar.style.width = progress + '%';
}
if (progress === 100) {
clearInterval(interval);
if (!iframeLoadedFlag) {
retryButton.style.display = 'block';
errorMessage.style.display = 'block';
}
}
}, 1000);
}
function iframeLoaded() {
iframeLoadedFlag = true;
clearInterval(interval);
loadingContainer.style.display = 'none';
document.getElementById('myIframe').style.display = 'block';
}
function iframeError() {
clearInterval(interval);
loadingContainer.style.display = 'flex';
retryButton.style.display = 'block';
errorMessage.style.display = 'block';
}
retryButton.addEventListener('click', function() {
progress = 0;
progressBar.style.width = '0%';
iframeLoadedFlag = false;
retryButton.style.display = 'none';
errorMessage.style.display = 'none';
loadingContainer.style.display = 'flex';
document.getElementById('myIframe').style.display = 'none';
loadIframe();
startProgress();
});
function loadIframe() {
const iframe = document.getElementById('myIframe');
const urlParts = ['https:', '', 'resembleai-resemble-enhance.hf.space', ''];
iframe.src = urlParts.join('/');
}
function handleDownload(event) {
event.preventDefault();
const iframe = document.getElementById('myIframe');
let iframeDocument;
try {
iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
} catch (error) {
console.error("دسترسی به محتوای iframe به دلیل محدودیتهای امنیتی امکانپذیر نیست.", error);
alert("دسترسی به محتوای iframe به دلیل محدودیتهای امنیتی امکانپذیر نیست.");
return;
}
try {
const links = iframeDocument.querySelectorAll('a');
if (links.length === 0) {
alert("هیچ لینک صوتی برای دانلود یافت نشد.");
return;
}
let wavFiles = [];
links.forEach((link) => {
const href = link.href;
if (href && href.toLowerCase().endsWith('.wav')) {
wavFiles.push(href);
}
});
if (wavFiles.length === 0) {
alert("هیچ فایل صوتی با فرمت .wav پیدا نشد.");
return;
}
// محدود به دو فایل
wavFiles = wavFiles.slice(0, 2);
const audioContainer = document.getElementById('audioContainer');
audioContainer.innerHTML = '';
wavFiles.forEach((audioUrl, index) => {
const audioItem = document.createElement('div');
audioItem.classList.add('audio-item');
// تعیین برچسب بر اساس شماره پلیر
let labelText = '';
if (index === 0) {
labelText = 'خروجی صدای بدون نویز';
} else if (index === 1) {
labelText = 'خروجی صدای پیشرفته';
}
audioItem.innerHTML =
<p class="audio-label">${labelText}</p>
<audio controls class="audio-player">
<source src="${audioUrl}" type="audio/wav">
مرورگر شما از پخش این فایل صوتی پشتیبانی نمیکند.
</audio>
<button class="download-audio-button" onclick="downloadAudio('${audioUrl}')">دانلود صدا</button>
;
audioContainer.appendChild(audioItem);
});
document.getElementById('myModal').style.display = 'block';
} catch (error) {
console.error("خطا در شناسایی صداها: ", error);
alert("خطایی در شناسایی صداها رخ داد.");
}
}
function downloadAudio(audioUrl) {
// ذخیره لینک فایل صوتی انتخاب شده
selectedAudioUrl = audioUrl;
// نمایش پنجره تأیید
document.getElementById('confirmModal').style.display = 'block';
}
// Event listener برای دکمه تایید دانلود
document.getElementById('confirmDownloadBtn').addEventListener('click', function() {
if (selectedAudioUrl) {
window.open(selectedAudioUrl, '_blank'); // باز کردن لینک در تب جدید
// بسته شدن پنجره تأیید
document.getElementById('confirmModal').style.display = 'none';
// پاک کردن متغیر بعد از استفاده
selectedAudioUrl = '';
}
});
// Event listener برای دکمه لغو دانلود
document.getElementById('cancelDownloadBtn').addEventListener('click', function() {
// بسته شدن پنجره تأیید
document.getElementById('confirmModal').style.display = 'none';
// پاک کردن متغیر
selectedAudioUrl = '';
});
document.getElementById('downloadButton').addEventListener('click', handleDownload);
document.getElementById('downloadButtonBottom').addEventListener('click', handleDownload);
const modal = document.getElementById('myModal');
const closeBtn = document.getElementById('closeBtn');
const confirmModal = document.getElementById('confirmModal');
closeBtn.addEventListener('click', function() {
modal.style.display = 'none';
});
window.addEventListener('click', function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
if (event.target == descriptionModal) {
descriptionModal.style.display = 'none';
}
if (event.target == confirmModal) {
confirmModal.style.display = 'none';
selectedAudioUrl = '';
}
});
const descriptionModal = document.getElementById('myDescriptionModal');
const descriptionButton = document.getElementById('descriptionButton');
const closeDescriptionBtn = document.getElementById('closeDescriptionBtn');
const translateBtn = document.getElementById('translateBtn');
descriptionButton.addEventListener('click', function(event) {
event.preventDefault();
descriptionModal.style.display = 'block';
});
closeDescriptionBtn.addEventListener('click', function() {
descriptionModal.style.display = 'none';
});
translateBtn.addEventListener('click', function() {
window.open('https://translate.google.com/?hl=fa&sl=fa&tl=en&op=translate', '_blank');
});
loadIframe();
startProgress();
</script>
</body>
</html> این کد منو جوری درست کن که وقتی سایت باز میشه حالت تمام صفحه باز بشه یعنی سایت که باز میشه کل صفحه موبایل رو در بر بگیره همه جای صفحه رو بالا و پایین همه جا رو در بر بگیره سایت کد کامل یکجا درست کن بفرستASSISTANT
برای اطمینان از اینکه وبسایت شما به صورت کامل و بهینه در دستگاههای موبایل نمایش داده میشود و تمام فضای صفحه را پوشش میدهد، چند تغییر و بهینهسازی در کد HTML و CSS شما اعمال کردهام. این تغییرات شامل اضافه کردن تگهای متا مناسب برای تنظیم نمای موبایل، تنظیمات CSS برای اطمینان از پوشش کامل صفحه و بهبود واکنشپذیری (responsiveness) عناصر مختلف است.
در ادامه، کد کامل بهروز شده را مشاهده میکنید:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- تنظیم نمایش واکنشپذیر برای موبایل -->
<title>مبدل صوت با هوش مصنوعی</title>
<style>
/* تنظیمات کلی برای html و body */
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
/* کانتینر اصلی iframe */
.iframe-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: none;
position: absolute;
top: 0;
left: 0;
}
/* لودر */
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 10000;
width: 80%;
max-width: 300px;
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.loading-message {
margin-bottom: 20px;
font-size: 18px;
color: #333;
}
.progress {
width: 100%;
height: 10px;
background-color: #ddd;
border-radius: 5px;
overflow: hidden;
}
.progress-bar {
height: 100%;
width: 0;
background-color: #4caf50;
transition: width 1s;
}
.error-message {
display: none;
color: red;
margin-top: 20px;
font-size: 16px;
text-align: center;
}
#retryButton {
display: none;
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
}
/* دکمههای دانلود و توضیحات */
.download-button, .description-button {
display: block;
width: 90px;
color: white;
text-align: center;
padding: 8px 0;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
position: fixed;
top: 10px;
z-index: 10001;
text-decoration: none;
}
.download-button {
background-color: #4CAF50;
right: 10px;
}
.description-button {
background-color: rgb(84, 110, 122);
left: 10px;
}
.download-button:hover, .description-button:hover {
background-color: #45a049;
}
/* پنجرههای مودال */
.modal {
display: none;
position: fixed;
z-index: 10002;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
overflow-y: auto;
}
.modal-content, .confirm-modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
max-width: 500px;
text-align: center;
border-radius: 5px;
}
.confirm-modal-content {
max-width: 400px;
}
.modal-button {
margin-top: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
.cancel-btn {
background-color: #f44336;
color: white;
}
.translate-btn, .confirm-btn {
background-color: #4CAF50;
color: white;
}
.translate-btn:hover, .confirm-btn:hover {
background-color: #45a049;
}
.canceled-btn {
background-color: #f44336;
color: white;
}
.canceled-btn:hover {
background-color: #d32f2f;
}
/* کانتینر صدا */
.audio-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
}
.audio-item {
margin: 20px 0;
width: 100%;
text-align: center;
}
.audio-player {
width: 80%;
margin-bottom: 10px;
}
.download-audio-button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
.download-audio-button:hover {
background-color: #45a049;
}
.audio-label {
font-weight: bold;
margin-bottom: 5px;
font-size: 16px;
}
/* دکمه دانلود در پایین */
.download-button-bottom {
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: #4CAF50;
padding: 12px;
width: 250px;
border-radius: 5px;
color: white;
text-align: center;
font-size: 16px;
text-decoration: none;
z-index: 10001;
cursor: pointer;
}
.download-button-bottom:hover {
background-color: #45a049;
}
/* بهینهسازی برای نمایش در موبایل */
@media (max-width: 600px) {
.modal-content, .confirm-modal-content {
margin: 20% auto;
width: 95%;
}
.download-button, .description-button {
width: 80px;
font-size: 12px;
padding: 6px 0;
}
.download-button-bottom {
width: 80%;
padding: 10px;
font-size: 14px;
}
.loading-message {
font-size: 16px;
}
.progress {
height: 10px;
}
}
</style>
</head>
<body>
<!-- دکمههای دانلود و توضیحات -->
<p>
<a href="#" class="download-button" id="downloadButton">دانلود صدا 📥</a>
<a href="#" class="description-button" id="descriptionButton">توضیحات</a>
</p>
<!-- پنجره سفارشی (modal) برای نمایش صداهای دانلود شده -->
<div id="myModal" class="modal">
<div class="modal-content">
<p style="text-align: center;">صداهای شناسایی شده</p>
<div class="audio-container" id="audioContainer"><!-- پلیرهای صدا در اینجا قرار خواهند گرفت --></div>
<button class="modal-button cancel-btn" id="closeBtn">بستن</button>
</div>
</div>
<!-- پنجره تأیید دانلود -->
<div id="confirmModal" class="modal">
<div class="confirm-modal-content">
<p>برای دانلود فایل صوتی روی تایید کلیک کنید و بعد از باز شدن مرورگر سمت راست فایل کلیک کنید و بارگیری فایل را انتخاب کنید.</p>
<button class="modal-button confirm-btn" id="confirmDownloadBtn">تایید</button>
<button class="modal-button canceled-btn" id="cancelDownloadBtn">لغو</button>
</div>
</div>
<!-- پنجره سفارشی (modal) برای نمایش توضیحات -->
<div id="myDescriptionModal" class="modal">
<div class="modal-content">
<hr />
<p><span style="color: #0000ff;">مبدل صوت با هوش مصنوعی</span> </p>
<p>اولین مجموعه تبدیل صوت در <span style="color: #33cccc;">برنامه هوش مصنوعی </span></p>
<p>تبدیل صداها به مدلهای دلخواه.</p>
<p>صدای خود را در کادر اول اضافه کنید </p>
<p>و در قسمت پرامپت به چیزی که میخواهید تبدیل بشه توضیحات رو به انگلیسی بنویسید.</p>
<p>چهار جایگاه برای اضافه کردن صدا است که میتوانید چند صدای از خودتون قرار بدید تا بهتر شناسایی شوند.</p>
<button class="modal-button translate-btn" id="translateBtn">مترجم</button>
<button class="modal-button cancel-btn" id="closeDescriptionBtn">بستن</button>
</div>
</div>
<!-- لودینگ و iframe -->
<div class="iframe-container">
<div class="loading" id="loadingContainer">
<div class="loading-message">لطفاً صبر کنید...</div>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="error-message" id="errorMessage">بارگیری زیاد طول کشید.<br />در صورت عدم بارگذاری، فیلترشکن خود را روشن کنید.</div>
<button id="retryButton">بارگذاری مجدد</button>
</div>
<iframe id="myIframe" onload="iframeLoaded()" onerror="iframeError()"></iframe>
</div>
<!-- دکمه دانلود صدا در پایین صفحه -->
<p>
<a href="#" class="download-button-bottom" id="downloadButtonBottom">دانلود صدا 📥</a>
</p>
<script>
let progress = 0;
const progressBar = document.getElementById('progressBar');
const retryButton = document.getElementById('retryButton');
const errorMessage = document.getElementById('errorMessage');
const loadingContainer = document.getElementById('loadingContainer');
let interval;
let iframeLoadedFlag = false;
// متغیر برای ذخیرهی لینک فایل صوتی انتخاب شده
let selectedAudioUrl = '';
function startProgress() {
loadingContainer.style.display = 'flex';
progressBar.style.width = '0%';
progress = 0;
interval = setInterval(() => {
if (progress < 100) {
progress += 10;
progressBar.style.width = progress + '%';
}
if (progress === 100) {
clearInterval(interval);
if (!iframeLoadedFlag) {
retryButton.style.display = 'block';
errorMessage.style.display = 'block';
}
}
}, 1000);
}
function iframeLoaded() {
iframeLoadedFlag = true;
clearInterval(interval);
loadingContainer.style.display = 'none';
document.getElementById('myIframe').style.display = 'block';
}
function iframeError() {
clearInterval(interval);
loadingContainer.style.display = 'flex';
retryButton.style.display = 'block';
errorMessage.style.display = 'block';
}
retryButton.addEventListener('click', function() {
progress = 0;
progressBar.style.width = '0%';
iframeLoadedFlag = false;
retryButton.style.display = 'none';
errorMessage.style.display = 'none';
loadingContainer.style.display = 'flex';
document.getElementById('myIframe').style.display = 'none';
loadIframe();
startProgress();
});
function loadIframe() {
const iframe = document.getElementById('myIframe');
const urlParts = ['https:', '', 'resembleai-resemble-enhance.hf.space', ''];
iframe.src = urlParts.join('/');
}
function handleDownload(event) {
event.preventDefault();
const iframe = document.getElementById('myIframe');
let iframeDocument;
try {
iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
} catch (error) {
console.error("دسترسی به محتوای iframe به دلیل محدودیتهای امنیتی امکانپذیر نیست.", error);
alert("دسترسی به محتوای iframe به دلیل محدودیتهای امنیتی امکانپذیر نیست.");
return;
}
try {
const links = iframeDocument.querySelectorAll('a');
if (links.length === 0) {
alert("هیچ لینک صوتی برای دانلود یافت نشد.");
return;
}
let wavFiles = [];
links.forEach((link) => {
const href = link.href;
if (href && href.toLowerCase().endsWith('.wav')) {
wavFiles.push(href);
}
});
if (wavFiles.length === 0) {
alert("هیچ فایل صوتی با فرمت .wav پیدا نشد.");
return;
}
// محدود به دو فایل
wavFiles = wavFiles.slice(0, 2);
const audioContainer = document.getElementById('audioContainer');
audioContainer.innerHTML = '';
wavFiles.forEach((audioUrl, index) => {
const audioItem = document.createElement('div');
audioItem.classList.add('audio-item');
// تعیین برچسب بر اساس شماره پلیر
let labelText = '';
if (index === 0) {
labelText = 'خروجی صدای بدون نویز';
} else if (index === 1) {
labelText = 'خروجی صدای پیشرفته';
}
// استفاده از template literals برای ایجاد محتوای داخلی
audioItem.innerHTML = `
<p class="audio-label">${labelText}</p>
<audio controls class="audio-player">
<source src="${audioUrl}" type="audio/wav">
مرورگر شما از پخش این فایل صوتی پشتیبانی نمیکند.
</audio>
<button class="download-audio-button" onclick="downloadAudio('${audioUrl}')">دانلود صدا</button>
`;
audioContainer.appendChild(audioItem);
});
document.getElementById('myModal').style.display = 'block';
} catch (error) {
console.error("خطا در شناسایی صداها: ", error);
alert("خطایی در شناسایی صداها رخ داد.");
}
}
function downloadAudio(audioUrl) {
// ذخیره لینک فایل صوتی انتخاب شده
selectedAudioUrl = audioUrl;
// نمایش پنجره تأیید
document.getElementById('confirmModal').style.display = 'block';
}
// Event listener برای دکمه تایید دانلود
document.getElementById('confirmDownloadBtn').addEventListener('click', function() {
if (selectedAudioUrl) {
window.open(selectedAudioUrl, '_blank'); // باز کردن لینک در تب جدید
// بسته شدن پنجره تأیید
document.getElementById('confirmModal').style.display = 'none';
// پاک کردن متغیر بعد از استفاده
selectedAudioUrl = '';
}
});
// Event listener برای دکمه لغو دانلود
document.getElementById('cancelDownloadBtn').addEventListener('click', function() {
// بسته شدن پنجره تأیید
document.getElementById('confirmModal').style.display = 'none';
// پاک کردن متغیر
selectedAudioUrl = '';
});
document.getElementById('downloadButton').addEventListener('click', handleDownload);
document.getElementById('downloadButtonBottom').addEventListener('click', handleDownload);
const modal = document.getElementById('myModal');
const closeBtn = document.getElementById('closeBtn');
const confirmModal = document.getElementById('confirmModal');
closeBtn.addEventListener('click', function() {
modal.style.display = 'none';
});
window.addEventListener('click', function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
if (event.target == descriptionModal) {
descriptionModal.style.display = 'none';
}
if (event.target == confirmModal) {
confirmModal.style.display = 'none';
selectedAudioUrl = '';
}
});
const descriptionModal = document.getElementById('myDescriptionModal');
const descriptionButton = document.getElementById('descriptionButton');
const closeDescriptionBtn = document.getElementById('closeDescriptionBtn');
const translateBtn = document.getElementById('translateBtn');
descriptionButton.addEventListener('click', function(event) {
event.preventDefault();
descriptionModal.style.display = 'block';
});
closeDescriptionBtn.addEventListener('click', function() {
descriptionModal.style.display = 'none';
});
translateBtn.addEventListener('click', function() {
window.open('https://translate.google.com/?hl=fa&sl=fa&tl=en&op=translate', '_blank');
});
loadIframe();
startProgress();
</script>
</body>
</html>
```
### توضیحات تغییرات اعمال شده:
1. **تگ متا Viewport**:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
این تگ باعث میشود صفحه وب به درستی در دستگاههای موبایل نمایش داده شود و اندازه عناصر بهصورت واکنشپذیر تنظیم گردد.
2. **تنظیمات CSS برای `html` و `body`**:
```css
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
```
این تنظیمات اطمینان حاصل میکنند که کل صفحه از نظر ابعاد پوشش کامل صفحه نمایش را دارد و هیچ حاشیهای اضافی ندارد.
3. **بهبود نمایش لودر (Loading)**:
اضافه کردن پسزمینه نیمهشفاف و بهبود ظاهر لودر برای نمایش بهتر در دستگاههای موبایل.
4. **واکنشپذیری (Responsiveness) از طریق Media Queries**:
استفاده از @media برای تنظیم اندازه و ظاهر عناصر در دستگاههای با عرض کمتر از 600px. این تنظیمات شامل کاهش اندازه دکمهها، افزایش فضای حاشیهای و تغییر اندازه فونتها است.
5. **اصلاحات دیگر**:
- بهینهسازی موقعیتیابی عناصر ثابت مانند دکمههای دانلود.
- اطمینان از اینکه پنجرههای مودال به طور کامل روی صفحه نمایش داده میشوند و قابلیت اسکرول در صورت نیاز.
- بهبود ظاهر و عملکرد دکمههای دانلود صدا و توضیحات.
### نکات مهم:
- **حالت تمام صفحه (Fullscreen Mode)**:
مرورگرهای موبایل به دلایل امنیتی و تجربه کاربری اجازه نمیدهند وبسایتها به طور خودکار به حالت تمام صفحه بروند. کاربر باید با استفاده از گزینههای مرورگر (مانند اضافه کردن به صفحه اصلی) وبسایت را به شکل تمام صفحه مشاهده کند.
- **اضافه کردن به صفحه اصلی (Add to Home Screen)**:
برای تجربه نزدیک به برنامههای موبایل، کاربران میتوانند وبسایت شما را به صفحه اصلی دستگاه خود اضافه کنند. این کار باعث میشود که وبسایت بدون نوار آدرس مرورگر باز شود و مانند یک اپلیکیشن بومی عمل کند.
برای اطلاعات بیشتر در مورد PWA (Progressive Web Apps) و بهینهسازی برای موبایل، میتوانید مستندات مربوطه را مطالعه کنید.
اگر نیاز به تغییرات بیشتری دارید یا سوال دیگری دارید، خوشحال میشوم کمک کنم!