<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teleprompter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #171717;
color: #bababa;
margin: 0;
padding: 0;
direction: rtl;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #212121;
}
.teleprompter {
background-color: #2f2f2f;
border: 1px solid #3c3c3c;
border-radius: 10px;
padding: 20px;
width: 90%;
max-width: 800px;
box-sizing: border-box;
}
.teleprompter textarea {
width: 100%;
height: 150px;
border: none;
border-radius: 5px;
padding: 10px;
box-sizing: border-box;
background-color: #3c3c3c;
color: #bababa;
resize: none;
font-size: 1.2em;
}
.controls {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.controls button {
background-color: #3c3c3c;
border: none;
border-radius: 5px;
color: #bababa;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s;
}
.controls button:hover {
background-color: #282828;
}
.speed-control {
display: flex;
align-items: center;
}
.speed-control input {
margin-left: 10px;
padding: 5px;
width: 60px;
border: none;
border-radius: 5px;
background-color: #3c3c3c;
color: #bababa;
font-size: 1em;
text-align: center;
}
.output {
margin-top: 20px;
background-color: #2f2f2f;
border: 1px solid #3c3c3c;
border-radius: 10px;
padding: 20px;
width: 100%;
height: 300px;
overflow-y: auto;
font-size: 1.5em;
line-height: 1.5;
box-sizing: border-box;
display: none;
}
@media (max-width: 600px) {
.teleprompter textarea {
font-size: 1em;
}
.controls button {
padding: 8px 16px;
font-size: 0.9em;
}
.speed-control input {
width: 50px;
padding: 4px;
}
.output {
font-size: 1.2em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="teleprompter">
<textarea id="inputText" placeholder="متن خود را اینجا وارد کنید."></textarea>
<div class="controls">
<button id="startButton">شروع</button>
<div class="speed-control">
<label for="speed">سرعت:</label>
<input type="number" id="speed" value="1" min="0.1" step="0.1">
</div>
</div>
<div class="output" id="outputText"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const startButton = document.getElementById('startButton');
const inputText = document.getElementById('inputText');
const outputText = document.getElementById('outputText');
const speedInput = document.getElementById('speed');
let intervalId;
let words;
let currentWordIndex = 0;
startButton.addEventListener('click', () => {
if (startButton.textContent === 'شروع') {
startButton.textContent = 'توقف';
startTeleprompter();
} else {
startButton.textContent = 'شروع';
stopTeleprompter();
}
});
const startTeleprompter = () => {
outputText.style.display = 'block';
words = inputText.value.split(/\s+/);
currentWordIndex = 0;
outputText.innerHTML = '';
intervalId = setInterval(displayNextWord, 1000 / parseFloat(speedInput.value));
};
const stopTeleprompter = () => {
clearInterval(intervalId);
};
const displayNextWord = () => {
if (currentWordIndex < words.length) {
outputText.innerHTML += words[currentWordIndex] + ' ';
currentWordIndex++;
outputText.scrollTop = outputText.scrollHeight;
} else {
stopTeleprompter();
startButton.textContent = 'شروع';
}
};
});
</script>
</body>
</html>
این اسکریپت یک تلپرامتر ساده و واکنش‌گرا (Responsive) است که به کاربران این امکان را می‌دهد تا متن‌های طولانی را به راحتی و با سرعت تنظیم شده بخوانند. طراحی مینیمال و کاربردی این اسکریپت، استفاده از آن را برای تولیدکنندگان محتوا و افرادی که نیاز به خواندن متن‌ها هنگام ضبط ویدیو دارند، بسیار ساده می‌کند.
ویژگی‌های اصلی:
واکنش‌گرایی کامل: این اسکریپت بر اساس اندازه صفحه نمایش کاربر تنظیم میشود و به طور خودکار سایز فونت و اجزا را برای تجربه کاربری بهتر تنظیم می‌کند.
رابط کاربری مینیمال: استفاده از رنگ‌های تیره و متنی ساده، باعث میشود تا کاربر بدون حواس‌پرتی از خواندن متن خود لذت ببرد.
کنترل سرعت: کاربران می‌توانند سرعت نمایش کلمات را بر اساس نیاز خود تنظیم کنند.
سهولت استفاده: فقط کافیست کاربر متن خود را وارد کند و با فشار دادن دکمه "شروع"، تلپرامتر به صورت خودکار شروع به نمایش متن می‌کند.
کاربردها:
این اسکریپت برای افرادی که تولید محتوای ویدیویی می‌کنند و نیاز به خواندن متن‌ها بدون نگاه مستقیم به اسکریپت یا کاغذ دارند، بسیار مفید است. همچنین برای افرادی که در جلسات آنلاین، وبینارها یا سخنرانی‌ها شرکت می‌کنند و نیاز به یک تلپرامتر ساده دارند، ایده‌آل است.
این اسکریپت به گونه‌ای طراحی شده است که نیاز به نصب نرم‌افزار خاصی ندارد و مستقیماً در مرورگر کار می‌کند. کاربران می‌توانند با استفاده از این تلپرامتر، عملکرد خود را بهبود دهند و بدون وقفه و با اعتماد به نفس بیشتری در مقابل دوربین صحبت کنند.
این اسکریپت به سادگی قابل اجرا است و هیچ نیازی به تنظیمات پیچیده ندارد، که آن را برای کاربران با سطوح مختلف مهارت فنی مناسب می‌سازد.
تلپرامتر ساده و کاربرپسنده مخصوص یوتیوبری و تولید ویدیوهای خفن
اسکریپت تلپرامپتر حرفه‌ای برای ساخت ویدیو یوتوب
اسکریپت جدید تلپرامتر حرفه‌ای برای تولید محتوا ویدیو یوتیوب و آپارتت
تله پرامپتر برای ساخت ویدیو آموزشی
تلپرامتر حرفه‌ای برای تولید محتوا ویدیویی
border ,color ,background ,padding ,font ,size ,background color ,font size ,border radius ,document getelementbyid ,startbutton textcontent ,background color 3c3c3c ,align items center ,none border radius ,speed control input