<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal Teleprompter</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #171717;
color: #bababa;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
box-sizing: border-box;
}
.container {
width: 90%;
max-width: 800px;
background-color: #2f2f2f;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.text-input {
width: 100%;
height: 150px;
background-color: #212121;
border: none;
border-radius: 5px;
padding: 10px;
color: #bababa;
font-size: 1.2rem;
resize: none;
box-sizing: border-box;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.btn {
background-color: #3c3c3c;
border: none;
border-radius: 5px;
padding: 10px 20px;
color: #bababa;
cursor: pointer;
font-size: 1.2rem;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #4c4c4c;
}
.speed-control {
display: flex;
align-items: center;
}
.speed-control input {
margin-left: 10px;
width: 100px;
}
.teleprompter {
display: none;
margin-top: 20px;
padding: 10px;
background-color: #282828;
border-radius: 5px;
font-size: 2rem;
color: #bababa;
text-align: center;
max-height: 300px;
overflow: hidden;
}
.teleprompter.active {
display: block;
}
@media (max-width: 600px) {
.text-input {
font-size: 1rem;
}
.btn {
font-size: 1rem;
}
.teleprompter {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<textarea class="text-input" placeholder="متن خود را اینجا وارد کنید."></textarea>
<div class="controls">
<button class="btn play-btn">پخش</button>
<div class="speed-control">
<label for="speed">سرعت:</label>
<input type="range" id="speed" min="1" max="10" value="5">
</div>
</div>
<div class="teleprompter"></div>
</div>
<script>
const textInput = document.querySelector('.text-input');
const playBtn = document.querySelector('.play-btn');
const speedControl = document.querySelector('#speed');
const teleprompter = document.querySelector('.teleprompter');
let interval;
let speed = 5;
playBtn.addEventListener('click', () => {
if (playBtn.textContent === 'پخش') {
startTeleprompter();
} else {
stopTeleprompter();
}
});
speedControl.addEventListener('input', () => {
speed = 11 - speedControl.value; // Invert speed for a more natural control
if (interval) {
clearInterval(interval);
startTeleprompter();
}
});
function startTeleprompter() {
playBtn.textContent = 'توقف';
teleprompter.classList.add('active');
teleprompter.innerHTML = '';
const words = textInput.value.split(' ');
let index = 0;
interval = setInterval(() => {
if (index < words.length) {
teleprompter.innerHTML += words[index] + ' ';
teleprompter.scrollTop = teleprompter.scrollHeight; // Scroll down as words are added
index++;
} else {
stopTeleprompter();
}
}, speed * 100);
}
function stopTeleprompter() {
clearInterval(interval);
playBtn.textContent = 'پخش';
teleprompter.classList.remove('active');
}
</script>
</body>
</html>
در این مطلب به بررسی یک اسکریپت ساده و کاربردی تلپرامتر می‌پردازیم که می‌تواند به تولیدکنندگان محتوا کمک کند تا به راحتی متن‌های خود را هنگام ضبط ویدیوها بخوانند. این اسکریپت به طور ویژه برای کسانی که نیاز به خواندن متن‌های طولانی دارند و نمی‌خواهند از کاغذ یا دستگاه‌های جانبی استفاده کنند، طراحی شده است.
ویژگی‌های اسکریپت:
طراحی مینیمال و ساده: این اسکریپت با استفاده از یک طراحی مینیمال و رنگ‌های تیره ساخته شده است که تمرکز کاربر را بر روی متن حفظ می‌کند و از جزئیات غیرضروری پرهیز می‌کند.
ورودی متن: کاربران می‌توانند متن خود را به سادگی در بخش مخصوص وارد کنند. این متن می‌تواند شامل هر تعداد کلمه باشد و فضای کافی برای متون طولانی فراهم شده است.
کنترل سرعت پخش: یکی از مهم‌ترین ویژگی‌های این تلپرامتر، قابلیت تنظیم سرعت پخش متن است. با استفاده از یک نوار لغزنده، کاربران می‌توانند سرعت نمایش کلمات را مطابق با سرعت خواندن خود تنظیم کنند.
پخش و توقف آسان: این اسکریپت به کاربران امکان می‌دهد با یک کلیک ساده بر روی دکمه‌ی "پخش"، متن خود را به ترتیب بخوانند. همچنین در هر لحظه می‌توانند پخش را متوقف کرده و در صورت نیاز دوباره شروع کنند.
واکنش‌گرایی کامل: اسکریپت به طور کامل واکنش‌گرا طراحی شده است، به این معنی که می‌تواند بر روی تمامی دستگاه‌ها، از جمله رایانه‌های رومیزی، تبلت‌ها و گوشی‌های هوشمند، به خوبی کار کند. اندازه فونت‌ها و عناصر دیگر به طور خودکار با اندازه صفحه نمایش تطبیق می‌یابند.
سهولت در استفاده: هدف اصلی این اسکریپت این است که کار با تلپرامتر را برای کاربران ساده و راحت کند. از این رو، رابط کاربری آن بسیار ساده و قابل فهم است و نیاز به یادگیری خاصی ندارد.
کاربرد اسکریپت:
این اسکریپت می‌تواند به عنوان ابزاری مفید برای انواع کاربران، از جمله یوتیوبرها، مدرسین آنلاین، سخنرانان و حتی خبرنگاران مورد استفاده قرار گیرد. به کمک این تلپرامتر، کاربران می‌توانند متن‌های خود را بدون نیاز به حفظ کردن یا نگاه کردن به کاغذ، به راحتی در مقابل دوربین بخوانند. این امر به بهبود کیفیت ویدیوها و ارائه‌های آنلاین کمک می‌کند و تجربه ضبط ویدیو را برای کاربران به مراتب راحت‌تر می‌سازد.
نتیجه‌گیری:
این اسکریپت تلپرامتر یک ابزار کاربردی و مؤثر برای کسانی است که به دنبال روشی ساده و کارآمد برای خواندن متن در هنگام ضبط ویدیوها هستند. با طراحی مینیمال و امکانات متعدد، این ابزار می‌تواند بهبود چشمگیری در فرآیند تولید محتوا ایجاد کند.
تلپرامتر ساده و کاربرپسنده مخصوص یوتیوبری و تولید ویدیوهای خفن
اسکریپت تلپرامپتر حرفه‌ای برای ساخت ویدیو یوتوب
اسکریپت جدید تلپرامتر حرفه‌ای برای تولید محتوا ویدیو یوتیوب و آپارتت
تله پرامپتر برای ساخت ویدیو آموزشی
تلپرامتر حرفه‌ای برای تولید محتوا ویدیویی
teleprompter ,اسکریپت ,color ,border ,speed ,font ,background color ,font size ,document queryselector ,color bababa ,border radius ,align items center ,none border radius