<!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;
direction: rtl;
text-align: right;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.header {
width: 100%;
text-align: center;
padding: 10px;
background-color: #2f2f2f;
color: #bababa;
font-size: 2em;
}
.input-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 800px;
margin: 20px 0;
}
.input-container textarea {
width: 100%;
height: 150px;
background-color: #3c3c3c;
border: none;
color: #bababa;
padding: 10px;
font-size: 1.2em;
resize: none;
border-radius: 5px;
}
.controls {
display: flex;
justify-content: center;
margin-top: 20px;
}
.controls button {
background-color: #2f2f2f;
border: none;
color: #bababa;
padding: 10px 20px;
font-size: 1em;
margin: 0 10px;
cursor: pointer;
border-radius: 5px;
}
.controls button:hover {
background-color: #3c3c3c;
}
.teleprompter {
width: 100%;
max-width: 800px;
height: 300px;
background-color: #282828;
padding: 20px;
border-radius: 10px;
overflow-y: auto;
font-size: 1.5em;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.highlight {
color: #fff;
font-weight: bold;
}
@media (max-width: 600px) {
.header {
font-size: 1.5em;
}
.input-container textarea {
font-size: 1em;
height: 100px;
}
.teleprompter {
font-size: 1.2em;
height: 200px;
}
}
</style>
</head>
<body>
<div class="header">تلپرامتر ساده و مینیمال</div>
<div class="container">
<div class="input-container">
<textarea id="text-input" placeholder="متن خود را وارد کنید."></textarea>
</div>
<div class="controls">
<button onclick="startTeleprompter()">شروع</button>
<button onclick="stopTeleprompter()">توقف</button>
<label for="speed">سرعت:</label>
<input type="range" id="speed" name="speed" min="1" max="10" value="5">
</div>
<div class="teleprompter" id="teleprompter"></div>
</div>
<script>
let teleprompterInterval;
let currentIndex = 0;
function startTeleprompter() {
const textInput = document.getElementById('text-input').value;
const teleprompter = document.getElementById('teleprompter');
const words = textInput.split(' ');
const speed = document.getElementById('speed').value;
const interval = 1000 / speed;
teleprompter.innerHTML = words.map((word, index) => `<span id="word-${index}">${word} </span>`).join('');
function highlightWord() {
if (currentIndex > 0) {
document.getElementById(`word-${currentIndex - 1}`).classList.remove('highlight');
}
if (currentIndex < words.length) {
document.getElementById(`word-${currentIndex}`).classList.add('highlight');
currentIndex++;
} else {
stopTeleprompter();
}
}
highlightWord();
teleprompterInterval = setInterval(highlightWord, interval);
}
function stopTeleprompter() {
clearInterval(teleprompterInterval);
currentIndex = 0;
const teleprompter = document.getElementById('teleprompter');
teleprompter.innerHTML = '';
}
</script>
</body>
</html>
این اسکریپت HTML یک تلپرامتر ساده و مینیمال است که به کاربران امکان می‌دهد تا به راحتی متنی را وارد کرده و آن را با سرعتی تنظیم‌شده، برای خواندن و ضبط، نمایش دهند. هدف اصلی این اسکریپت، تسهیل فرآیند خواندن متن در حین ضبط ویدیوها، به‌ویژه برای تولیدکنندگان محتوا، است.
ویژگی‌های اسکریپت:
طراحی مینیمال و ریسپانسیو: این اسکریپت با یک طراحی مینیمال و ساده، بر روی تمامی دستگاه‌ها به خوبی نمایش داده میشود. طراحی ریسپانسیو باعث میشود که این ابزار به‌خوبی در اندازه‌های مختلف صفحه‌نمایش کار کند و سایز فونت‌ها نیز متناسب با اندازه پلتفرم تغییر می‌کند.
استفاده آسان: کاربران می‌توانند متن خود را به سادگی وارد کرده و با تنظیم سرعت پخش، کلمات را به صورت هایلایت‌شده مشاهده کنند. این امکان به کاربران کمک می‌کند تا متن‌های طولانی را به راحتی و روان بخوانند.
تنظیم سرعت پخش: این اسکریپت دارای قابلیت تنظیم سرعت پخش متن است که به کاربر اجازه می‌دهد سرعت نمایش کلمات را متناسب با سرعت خواندن خود تنظیم کند.
کدنویسی ساده و قابل توسعه: کد این اسکریپت به‌گونه‌ای نوشته شده است که توسعه‌دهندگان به راحتی می‌توانند ویژگی‌های جدیدی به آن اضافه کنند و آن را مطابق با نیازهای خود سفارشی کنند.
کاربردها:
این اسکریپت به خصوص برای افرادی که به تولید محتوای ویدئویی مشغول هستند و نیاز دارند تا متون طولانی را بدون نگاه کردن به کاغذ یا مانیتور، روان و بدون مشکل بخوانند، بسیار مفید است. با استفاده از این ابزار، کاربران می‌توانند متن‌های خود را به صورت متمرکز و با تنظیمات دلخواه نمایش دهند.
نحوه استفاده:
کد HTML را در پروژه خود وارد کنید.
متن خود را در قسمت مشخص‌شده وارد کرده و با تنظیم سرعت، نمایش را آغاز کنید.
اسکریپت به صورت خودکار متن را برای شما هایلایت می‌کند و شما می‌توانید به راحتی متن را بخوانید و ضبط کنید.
این اسکریپت یک ابزار کاربردی برای هر کسی است که به دنبال ساده‌سازی فرآیند خواندن و ضبط متون است، بدون نیاز به پیچیدگی‌های اضافی و تنظیمات متعدد.
تلپرامتر ساده و کاربرپسنده مخصوص یوتیوبری و تولید ویدیوهای خفن
اسکریپت تلپرامپتر حرفه‌ای برای ساخت ویدیو یوتوب
اسکریپت جدید تلپرامتر حرفه‌ای برای تولید محتوا ویدیو یوتیوب و آپارتت
تله پرامپتر برای ساخت ویدیو آموزشی
تلپرامتر حرفه‌ای برای تولید محتوا ویدیویی
color ,teleprompter ,font ,اسکریپت ,size ,width ,font size ,background color ,document getelementbyid ,width 100% ,display flex ,justify content center ,flex justify content ,const teleprompter document ,teleprompter document getelementbyid