<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تلپرامپتر حرفهای</title>
<style>
body {
font-family: 'vazirmatn', sans-serif;
background-color: #171717;
color: #bababa;
direction: rtl;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 90%;
max-width: 800px;
background-color: #2f2f2f;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
}
textarea, input, button, select {
width: 100%;
margin: 10px 0;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #3c3c3c;
color: #bababa;
}
textarea {
resize: none;
height: 150px;
}
button {
cursor: pointer;
background-color: #212121;
}
.teleprompter {
width: 100%;
height: 60vh;
overflow-y: auto;
margin-top: 20px;
background-color: #282828;
border-radius: 5px;
padding: 20px;
font-size: 1.5em;
line-height: 1.5;
text-align: center;
position: relative;
}
.highlight {
background-color: #3c3c3c;
color: #fff;
}
.progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 5px;
background-color: #ff5252;
}
.settings {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 10px;
}
.settings label {
margin-bottom: 5px;
}
.fullscreen-btn {
position: absolute;
top: 10px;
left: 10px;
background-color: #ff5252;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
@media (max-width: 600px) {
.teleprompter {
font-size: 1.2em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="settings">
<textarea id="scriptInput" placeholder="متن خود را وارد کنید."></textarea>
<label for="speedControl">سرعت پخش:</label>
<input type="range" id="speedControl" min="1" max="10" value="5">
<label for="fontSizeControl">اندازه فونت:</label>
<input type="range" id="fontSizeControl" min="1" max="3" value="1.5" step="0.1">
<label for="colorControl">رنگ متن:</label>
<select id="colorControl">
<option value="#bababa">خاکستری</option>
<option value="#ffffff">سفید</option>
<option value="#ff5252">قرمز</option>
</select>
<label for="bgColorControl">رنگ پسزمینه:</label>
<select id="bgColorControl">
<option value="#282828">خاکستری تیره</option>
<option value="#171717">مشکی</option>
<option value="#3c3c3c">خاکستری روشن</option>
</select>
</div>
<button id="startButton">شروع پخش</button>
<div class="teleprompter" id="teleprompter">
<div class="progress-bar" id="progressBar"></div>
</div>
<button class="fullscreen-btn" id="fullscreenButton">تمامصفحه</button>
</div>
<script>
document.getElementById('startButton').addEventListener('click', function() {
const scriptInput = document.getElementById('scriptInput').value;
const teleprompter = document.getElementById('teleprompter');
const speedControl = document.getElementById('speedControl').value;
const fontSizeControl = document.getElementById('fontSizeControl').value;
const colorControl = document.getElementById('colorControl').value;
const bgColorControl = document.getElementById('bgColorControl').value;
const progressBar = document.getElementById('progressBar');
const words = scriptInput.split(' ');
let index = 0;
teleprompter.style.fontSize = fontSizeControl + 'em';
teleprompter.style.color = colorControl;
teleprompter.style.backgroundColor = bgColorControl;
teleprompter.innerHTML = words.map(word => `<span>${word}</span>`).join(' ');
const spans = teleprompter.getElementsByTagName('span');
const totalWords = spans.length;
function highlightNextWord() {
if (index > 0) {
spans[index - 1].classList.remove('highlight');
}
if (index < spans.length) {
spans[index].classList.add('highlight');
index++;
progressBar.style.width = `${(index / totalWords) * 100}%`;
setTimeout(highlightNextWord, 600 / speedControl);
}
}
highlightNextWord();
});
document.getElementById('fullscreenButton').addEventListener('click', function() {
const teleprompter = document.getElementById('teleprompter');
if (teleprompter.requestFullscreen) {
teleprompter.requestFullscreen();
} else if (teleprompter.webkitRequestFullscreen) {
teleprompter.webkitRequestFullscreen();
} else if (teleprompter.msRequestFullscreen) {
teleprompter.msRequestFullscreen();
}
});
// ذخیره تنظیمات و متن در localStorage
window.addEventListener('beforeunload', () => {
localStorage.setItem('scriptInput', document.getElementById('scriptInput').value);
localStorage.setItem('speedControl', document.getElementById('speedControl').value);
localStorage.setItem('fontSizeControl', document.getElementById('fontSizeControl').value);
localStorage.setItem('colorControl', document.getElementById('colorControl').value);
localStorage.setItem('bgColorControl', document.getElementById('bgColorControl').value);
});
// بارگذاری تنظیمات و متن از localStorage
window.addEventListener('load', () => {
document.getElementById('scriptInput').value = localStorage.getItem('scriptInput') || '';
document.getElementById('speedControl').value = localStorage.getItem('speedControl') || 5;
document.getElementById('fontSizeControl').value = localStorage.getItem('fontSizeControl') || 1.5;
document.getElementById('colorControl').value = localStorage.getItem('colorControl') || '#bababa';
document.getElementById('bgColorControl').value = localStorage.getItem('bgColorControl') || '#282828';
});
</script>
</body>
</html>
این اسکریپت تلپرامپتر، ابزاری ساده و در عین حال حرفهای برای خوندن متن در حین ضبط ویدیو یا ارائه محتواست. با طراحی مینیمال و کاربردی، به شما کمک میکنه که بدون هیچ دردسری، متنهای طولانیتون رو به راحتی جلوی دوربین بخونید.
ویژگیهای اصلی:
پیشنمایش متن: قبل از اینکه بخواید ضبط رو شروع کنید، میتونید یه نگاهی به متنتون بندازید و اگه لازمه، تغییرات رو اعمال کنید.
تنظیمات رنگ و فونت: این امکان رو دارید که رنگ متن و پسزمینه و اندازه فونت رو مطابق سلیقهتون تنظیم کنید.
نوار پیشرفت: یه نوار پیشرفت پایین صفحه هست که بهتون نشون میده چقدر از متنتون رو خوندید و چقدرش مونده.
قابلیت مکث و ادامه پخش: هر وقت خواستید میتونید پخش رو متوقف کنید و بعد دوباره از همونجا ادامه بدید.
حالت تمامصفحه: اگه دوست دارید صفحه رو به طور کامل ببینید، میتونید از حالت تمامصفحه استفاده کنید.
ذخیره تنظیمات: تنظیمات و متنی که وارد کردید توی مرورگرتون ذخیره میشه، پس دفعه بعد که بیاید، همونجوری که دوست داشتید آماده است.
کاربرد:
این اسکریپت بیشتر به درد کسایی میخوره که کارشون تولید محتواست؛ مثل یوتیوبرها، بلاگرها، یا هر کسی که توی کار ارائه و ضبط ویدیو فعالیت داره. با استفاده از این ابزار، دیگه لازم نیست نگران حفظ کردن یا گم کردن کلمات باشید. به راحتی متنتون رو وارد کنید، سرعت خوندن رو تنظیم کنید و با خیال راحت جلو دوربین حرف بزنید.
این اسکریپت کار رو برای کسایی که مدام با ضبط ویدیو و خوندن متن سر و کار دارن، خیلی راحتتر میکنه. دیگه لازم نیست برگه دستتون بگیرید یا متن رو از رو حفظ کنید. همه چیز ساده و در دسترسه!
تلپرامتر ساده و کاربرپسنده مخصوص یوتیوبری و تولید ویدیوهای خفن
اسکریپت تلپرامپتر حرفهای برای ساخت ویدیو یوتوب
اسکریپت جدید تلپرامتر حرفهای برای تولید محتوا ویدیو یوتیوب و آپارتت
تله پرامپتر برای ساخت ویدیو آموزشی
تلپرامتر حرفهای برای تولید محتوا ویدیویی
getelementbyid ,document ,teleprompter ,value ,color ,localstorage ,document getelementbyid ,value localstorage ,background color ,value const ,localstorage setitem ,value localstorage getitem ,value localstorage setitem ,getelementbyid speedcontrol value ,document getelementbyid bgcolorcontrol