<!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: 'vazirmatn', sans-serif;
background-color: #2f2f2f;
color: #bababa;
direction: rtl;
text-align: right;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.teleprompter {
background-color: #212121;
width: 100%;
max-width: 800px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.teleprompter textarea {
width: 100%;
height: 150px;
background-color: #171717;
border: 1px solid #3c3c3c;
border-radius: 5px;
color: #bababa;
padding: 10px;
box-sizing: border-box;
resize: none;
font-size: 1rem;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.controls button {
background-color: #3c3c3c;
border: none;
color: #bababa;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
.controls button:disabled {
background-color: #282828;
cursor: not-allowed;
}
.speed-control {
display: flex;
align-items: center;
}
.speed-control label {
margin-left: 10px;
font-size: 1rem;
}
.speed-control input {
width: 100px;
}
.display {
background-color: #171717;
color: #bababa;
border: 1px solid #3c3c3c;
border-radius: 5px;
padding: 20px;
margin-top: 20px;
font-size: 1.5rem;
height: 200px;
overflow: hidden;
position: relative;
}
.highlight {
color: #fff;
}
.toggle-mode {
margin-top: 10px;
cursor: pointer;
}
.save-load-controls {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 800px;
margin-top: 10px;
}
.save-load-controls button {
background-color: #3c3c3c;
border: none;
color: #bababa;
padding: 10px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
flex: 1;
margin: 0 5px;
}
@media (max-width: 600px) {
.teleprompter textarea {
height: 100px;
}
.display {
font-size: 1rem;
height: 150px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="teleprompter">
<textarea id="script" placeholder="متن خود را اینجا وارد کنید."></textarea>
<div class="controls">
<button id="startBtn" onclick="start()">شروع</button>
<button id="stopBtn" onclick="stop()" disabled>توقف</button>
<div class="speed-control">
<label for="speed">سرعت:</label>
<input type="range" id="speed" min="1" max="10" value="5">
</div>
</div>
<div class="display" id="display"></div>
<div class="toggle-mode" onclick="toggleMode()"> حالت شب/روز</div>
</div>
<div class="save-load-controls">
<button onclick="saveText()">ذخیره</button>
<button onclick="loadText()">بارگذاری</button>
</div>
</div>
<script>
let script, words, index, intervalId, speed;
const display = document.getElementById('display');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
function start() {
script = document.getElementById('script').value;
words = script.split(/\s+/);
index = 0;
speed = document.getElementById('speed').value;
display.innerHTML = '';
startBtn.disabled = true;
stopBtn.disabled = false;
intervalId = setInterval(showNextWord, 60000 / speed);
}
function stop() {
clearInterval(intervalId);
startBtn.disabled = false;
stopBtn.disabled = true;
}
function showNextWord() {
if (index < words.length) {
display.innerHTML = '';
for (let i = Math.max(0, index - 4); i < index; i++) {
display.innerHTML += `<span>${words[i]} </span>`;
}
display.innerHTML += `<span class="highlight">${words[index]}</span> `;
for (let i = index + 1; i < Math.min(words.length, index + 5); i++) {
display.innerHTML += `<span>${words[i]} </span>`;
}
index++;
display.scrollTop = display.scrollHeight;
} else {
stop();
}
}
document.getElementById('speed').addEventListener('input', function () {
if (intervalId) {
clearInterval(intervalId);
speed = this.value;
intervalId = setInterval(showNextWord, 60000 / speed);
}
});
function toggleMode() {
const body = document.body;
body.classList.toggle('day-mode');
if (body.classList.contains('day-mode')) {
body.style.backgroundColor = '#ffffff';
body.style.color = '#000000';
document.querySelector('.teleprompter').style.backgroundColor = '#f0f0f0';
document.querySelector('.display').style.backgroundColor = '#e0e0e0';
} else {
body.style.backgroundColor = '#2f2f2f';
body.style.color = '#bababa';
document.querySelector('.teleprompter').style.backgroundColor = '#212121';
document.querySelector('.display').style.backgroundColor = '#171717';
}
}
function saveText() {
const script = document.getElementById('script').value;
localStorage.setItem('teleprompterText', script);
alert('متن ذخیره شد!');
}
function loadText() {
const savedText = localStorage.getItem('teleprompterText');
if (savedText) {
document.getElementById('script').value = savedText;
alert('متن بارگذاری شد!');
} else {
alert('متنی برای بارگذاری یافت نشد.');
}
}
</script>
</body>
</html>
این اسکریپت واسه یوتیوبرها یا کسایی که توی فضای مجازی فعالن، خیلی کاربردیه. توی این اسکریپت میتونی به راحتی متنت رو وارد کنی و بعدش با سرعتی که خودت تنظیم میکنی، متنت رو روی صفحه بخونی.
چطوری کار میکنه؟
کافیه متنی که میخوای بخونی رو توی قسمت مشخص شده وارد کنی، بعد دکمه شروع رو بزنی. متن کلمه به کلمه روی صفحه نمایش داده میشه و میتونی سرعت خوندن رو هم هر وقت خواستی تغییر بدی. اینجوری بدون این که نیاز باشه مدام به پایین یا جای دیگهای نگاه کنی، مستقیم رو به دوربین میتونی متنت رو بخونی.
ویژگیهای جالبش چیه؟
این اسکریپت چند تا ویژگی باحال داره که کار رو برایت راحتتر میکنه:
حالت شب و روز: اگر شب کار میکنی یا نور محیط کمه، میتونی حالت شب رو فعال کنی تا چشمات کمتر خسته بشه.
ذخیره و بارگذاری متن: یه جایی رفتی و میخوای بعداً ادامه بدی؟ نگران نباش! میتونی متنت رو ذخیره کنی و دفعه بعد دوباره از همونجا ادامه بدی.
کنترل سرعت خوندن: سرعت خوندن دست خودته. هر وقت احساس کردی سریع یا کند میخونی، میتونی سرعت رو تغییر بدی.
رابط کاربری ساده: طراحی ساده و مینیمال این اسکریپت باعث میشه راحت بتونی باهاش کار کنی، چه روی کامپیوتر، چه روی موبایل.
مناسب برای کیه؟
این اسکریپت برای کسایی که زیاد جلوی دوربین صحبت میکنن یا ویدیو میگیرن خیلی مناسبه. مثلا اگه یوتیوبر هستی یا ارائهدهنده، این ابزار بهت کمک میکنه که بدون نگاه کردن به پایین، حرفاتو بزنی. همینطور اگه نمیخوای از کاغذ و نوشتههای دستی استفاده کنی، این ابزار بهت کمک میکنه که متنهاتو حرفهایتر و راحتتر بخونی.
جمعبندی:
این اسکریپت یه تلپرامتر مینیمال و سادهست که تمام نیازهای یه تولیدکننده محتوا رو برای خوندن متنهای طولانی جلوی دوربین، برآورده میکنه. استفاده ازش خیلی راحته و کلی ویژگی جالب داره که کارت رو حسابی آسون میکنه.
تلپرامتر ساده و کاربرپسنده مخصوص یوتیوبری و تولید ویدیوهای خفن
اسکریپت تلپرامپتر حرفهای برای ساخت ویدیو یوتوب
اسکریپت جدید تلپرامتر حرفهای برای تولید محتوا ویدیو یوتیوب و آپارتت
تله پرامپتر برای ساخت ویدیو آموزشی
تلپرامتر حرفهای برای تولید محتوا ویدیویی
display ,color ,document ,speed ,border ,index ,document getelementbyid ,background color ,font size ,style backgroundcolor ,color bababa ,align items center ,getelementbyid script value ,color bababa padding ,document getelementbyid script