<!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;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
transition: background-color 0.5s, color 0.5s;
}
.container {
width: 90%;
max-width: 800px;
background-color: #2f2f2f;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header h1 {
margin: 0;
font-size: 24px;
}
.textarea-container {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 150px;
background-color: #212121;
color: #bababa;
border: none;
border-radius: 5px;
padding: 10px;
resize: none;
font-size: 16px;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.controls button {
background-color: #3c3c3c;
color: #bababa;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.controls button:hover {
background-color: #282828;
}
.controls input[type="range"] {
width: 150px;
}
.teleprompter {
display: none;
flex-direction: column;
align-items: center;
}
.teleprompter p {
font-size: 24px;
text-align: center;
line-height: 1.6;
}
.mirror-mode {
transform: scaleX(-1);
}
.save-load-buttons {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.save-load-buttons button {
background-color: #3c3c3c;
color: #bababa;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.save-load-buttons button:hover {
background-color: #282828;
}
.theme-toggle {
margin-top: 20px;
cursor: pointer;
color: #bababa;
font-size: 16px;
}
@media (max-width: 600px) {
.header h1 {
font-size: 20px;
}
.controls button, .controls input[type="range"] {
font-size: 14px;
}
.teleprompter p {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Teleprompter</h1>
</div>
<div class="textarea-container">
<textarea id="textInput" placeholder="متن خود را اینجا وارد کنید."></textarea>
</div>
<div class="save-load-buttons">
<button id="saveText">ذخیره متن</button>
<button id="loadText">بارگذاری متن</button>
</div>
<div class="controls">
<button id="startBtn">شروع</button>
<input type="range" id="speedControl" min="1" max="10" value="5">
<button id="resetBtn">تنظیم مجدد</button>
</div>
<div class="teleprompter" id="teleprompter">
<p id="teleprompterText"></p>
</div>
<div class="theme-toggle" id="themeToggle">تغییر به حالت روز</div>
</div>
<script>
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const textInput = document.getElementById('textInput');
const teleprompter = document.getElementById('teleprompter');
const teleprompterText = document.getElementById('teleprompterText');
const speedControl = document.getElementById('speedControl');
const saveTextBtn = document.getElementById('saveText');
const loadTextBtn = document.getElementById('loadText');
const themeToggle = document.getElementById('themeToggle');
let isRunning = false;
let currentIndex = 0;
let words = [];
let interval = null;
let isNightMode = true;
startBtn.addEventListener('click', () => {
if (isRunning) {
clearInterval(interval);
startBtn.textContent = 'شروع';
} else {
words = textInput.value.split(' ');
currentIndex = 0;
teleprompterText.textContent = words[currentIndex];
teleprompter.style.display = 'flex';
interval = setInterval(() => {
currentIndex++;
if (currentIndex < words.length) {
teleprompterText.textContent = words.slice(0, currentIndex + 1).join(' ');
} else {
clearInterval(interval);
startBtn.textContent = 'شروع';
isRunning = false;
}
}, 1000 / speedControl.value);
startBtn.textContent = 'توقف';
}
isRunning = !isRunning;
});
resetBtn.addEventListener('click', () => {
clearInterval(interval);
textInput.value = '';
teleprompter.style.display = 'none';
startBtn.textContent = 'شروع';
isRunning = false;
});
speedControl.addEventListener('input', () => {
if (isRunning) {
clearInterval(interval);
interval = setInterval(() => {
currentIndex++;
if (currentIndex < words.length) {
teleprompterText.textContent = words.slice(0, currentIndex + 1).join(' ');
} else {
clearInterval(interval);
startBtn.textContent = 'شروع';
isRunning = false;
}
}, 1000 / speedControl.value);
}
});
saveTextBtn.addEventListener('click', () => {
localStorage.setItem('savedText', textInput.value);
alert('متن ذخیره شد!');
});
loadTextBtn.addEventListener('click', () => {
const savedText = localStorage.getItem('savedText');
if (savedText) {
textInput.value = savedText;
alert('متن بارگذاری شد!');
} else {
alert('متنی برای بارگذاری وجود ندارد.');
}
});
themeToggle.addEventListener('click', () => {
if (isNightMode) {
document.body.style.backgroundColor = '#ffffff';
document.body.style.color = '#000000';
themeToggle.textContent = 'تغییر به حالت شب';
} else {
document.body.style.backgroundColor = '#171717';
document.body.style.color = '#bababa';
themeToggle.textContent = 'تغییر به حالت روز';
}
isNightMode = !isNightMode;
});
</script>
</body>
</html>
این اسکریپت تلپرامتر یه ابزار کاربردیه که مخصوص تولیدکنندههای محتوا طراحی شده. با این اسکریپت، دیگه نیازی نیست که موقع ضبط ویدئو، متن رو از روی کاغذ یا مانیتور بخونید. این اسکریپت بهتون کمک میکنه تا متنهایی که آماده کردید رو بهراحتی وارد کنید و با کنترل سرعت، اونها رو به تدریج و با توجه به نیازتون نمایش بدید.
اسکریپت بهگونهای طراحی شده که استفاده ازش راحت و بیدردسر باشه. میتونید متن رو ذخیره کنید و بعداً دوباره بارگذاری کنید، یا اگر نیاز دارید بین حالت شب و روز جابجا بشید، این امکان هم فراهمه. حتی میتونید قبل از شروع پخش، یه شمارش مع کوتاه داشته باشید تا برای ضبط آماده بشید.
طراحی این ابزار مینیمال و شیکه، با رنگهای تیره که خستگی چشم رو کاهش میده و تو هر دستگاهی که دارید (موبایل، تبلت یا کامپیوتر) بهخوبی اجرا میشه. سرعت پخش متن هم با یه نوار لغزنده قابل تنظیمه، پس میتونید متن رو با سرعتی که براتون مناسبه بخونید.
در کل، این اسکریپت یه راهکار ساده و موثره برای کسانی که میخوان محتوای ویدئویی خودشون رو با کیفیت بالاتر و بدون دردسر آماده کنن. کافیه متن رو وارد کنید، سرعت رو تنظیم کنید و دکمه شروع رو بزنید.
تلپرامتر ساده و کاربرپسنده مخصوص یوتیوبری و تولید ویدیوهای خفن
اسکریپت تلپرامپتر حرفهای برای ساخت ویدیو یوتوب
اسکریپت جدید تلپرامتر حرفهای برای تولید محتوا ویدیو یوتیوب و آپارتت
تله پرامپتر برای ساخت ویدیو آموزشی
تلپرامتر حرفهای برای تولید محتوا ویدیویی
color ,document ,textcontent ,const ,20px ,font ,document getelementbyid ,font size ,background color ,color bababa ,clearinterval interval ,شروع isrunning false ,telepromptertext textcontent words ,flex direction column ,interval startbtn textcontent