<!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 {
max-width: 800px;
margin: auto;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header h1 {
margin: 0;
color: #bababa;
}
.textarea-container {
background-color: #2f2f2f;
padding: 20px;
border-radius: 10px;
}
.textarea-container textarea {
width: 100%;
height: 150px;
background-color: #3c3c3c;
border: none;
color: #bababa;
padding: 10px;
border-radius: 5px;
resize: none;
font-size: 1em;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
flex-wrap: wrap;
}
.controls button, .controls input {
background-color: #3c3c3c;
border: none;
color: #bababa;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin: 5px;
}
.teleprompter {
background-color: #212121;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
display: none;
}
.teleprompter p {
margin: 0;
font-size: 1.5em;
}
.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #212121;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.teleprompter p {
font-size: 1.2em;
}
}
@media screen and (max-width: 480px) {
.teleprompter p {
font-size: 1em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>تلپرامپتر پیشرفته</h1>
</div>
<div class="textarea-container">
<textarea id="teleprompter-text" placeholder="متن خود را اینجا وارد کنید."></textarea>
</div>
<div class="controls">
<button id="start-button">شروع</button>
<input type="range" id="speed-control" min="1" max="10" value="5">
<button id="fullscreen-button">تمامصفحه</button>
<input type="color" id="text-color" title="رنگ متن">
<input type="color" id="bg-color" title="رنگ پسزمینه">
<button id="save-button">ذخیره متن</button>
<button id="load-button">بارگذاری متن</button>
<span id="time-left"></span>
</div>
<div class="teleprompter" id="teleprompter">
<p id="teleprompter-content"></p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const startButton = document.getElementById('start-button');
const speedControl = document.getElementById('speed-control');
const teleprompterText = document.getElementById('teleprompter-text');
const teleprompter = document.getElementById('teleprompter');
const teleprompterContent = document.getElementById('teleprompter-content');
const fullscreenButton = document.getElementById('fullscreen-button');
const textColorPicker = document.getElementById('text-color');
const bgColorPicker = document.getElementById('bg-color');
const saveButton = document.getElementById('save-button');
const loadButton = document.getElementById('load-button');
const timeLeftDisplay = document.getElementById('time-left');
let interval;
let speed = 5;
let totalTime, elapsedTime = 0;
const startTeleprompter = () => {
const text = teleprompterText.value.split(' ');
let index = 0;
teleprompter.style.display = 'block';
teleprompterContent.innerHTML = '';
totalTime = text.length / speed;
elapsedTime = 0;
interval = setInterval(() => {
if (index < text.length) {
teleprompterContent.innerHTML += text[index] + ' ';
index++;
elapsedTime += 1 / speed;
updateTimeLeft();
} else {
clearInterval(interval);
}
}, 600 / speed);
};
const stopTeleprompter = () => {
clearInterval(interval);
teleprompter.style.display = 'none';
startButton.textContent = 'شروع';
updateTimeLeft(true);
};
const updateTimeLeft = (reset = false) => {
if (reset) {
timeLeftDisplay.textContent = '';
} else {
const timeLeft = totalTime - elapsedTime;
timeLeftDisplay.textContent = `زمان باقیمانده: ${Math.max(timeLeft, 0).toFixed(1)} ثانیه`;
}
};
startButton.addEventListener('click', () => {
if (interval) {
stopTeleprompter();
} else {
startTeleprompter();
startButton.textContent = 'توقف';
}
});
speedControl.addEventListener('input', (e) => {
speed = e.target.value;
if (interval) {
stopTeleprompter();
startTeleprompter();
}
});
fullscreenButton.addEventListener('click', () => {
if (!document.fullscreenElement) {
teleprompter.requestFullscreen().catch(err => console.error(err));
} else {
document.exitFullscreen();
}
});
textColorPicker.addEventListener('input', (e) => {
teleprompterContent.style.color = e.target.value;
});
bgColorPicker.addEventListener('input', (e) => {
teleprompter.style.backgroundColor = e.target.value;
});
saveButton.addEventListener('click', () => {
const text = teleprompterText.value;
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'teleprompter.txt';
a.click();
});
loadButton.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'text/plain';
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
teleprompterText.value = event.target.result;
};
reader.readAsText(file);
}
});
input.click();
});
});
</script>
</body>
</html>
این اسکریپت یک تلپرامپتر پیشرفتهست که برای افرادی که تولید محتوا میکنن، یا به هر شکلی باید متون طولانی رو در حین ضبط ویدیو یا ارائه بخونن، خیلی به درد میخوره. تو این برنامه شما میتونید متن مورد نظرتون رو وارد کنید و با استفاده از یک سری امکانات مثل کنترل سرعت، حالت تمامصفحه، و تغییر رنگ متن و پسزمینه، کارتون رو راحتتر انجام بدید.
مثلاً فرض کنید یه ویدیوی آموزشی یا یک سخنرانی دارید و نمیخواید مدام سرتون رو پایین بیارید و از روی کاغذ یا مانیتور بخونید. این تلپرامپتر به شما کمک میکنه که متنتون رو کلمه به کلمه و با سرعتی که خودتون تنظیم میکنید بخونید. حتی میتونید رنگ متن و پسزمینه رو هم تغییر بدید تا بهتر دیده بشه یا با شرایط نور محیطتون تطبیق پیدا کنه.
یک ویژگی خوب دیگهاش اینه که میتونید متن رو ذخیره کنید یا از قبل یه متنی رو که نوشتید بارگذاری کنید و با خیال راحت شروع به ضبط کنید. اینجوری لازم نیست هربار متنتون رو دوباره وارد کنید.
در نهایت، این ابزار به درد کسایی میخوره که نیاز دارن متنهای طولانی رو با دقت و بدون فشار بخونن و در عین حال از یه ابزار ساده و کاربردی استفاده کنن. چه برای تولیدکنندههای محتوا، چه برای کسایی که سخنرانی میکنن یا حتی دانشجوهایی که باید متنی رو ارائه بدن، این اسکریپت یه انتخاب خوب و کاربردیه که میتونه خیلی کمککننده باشه.
تلپرامتر ساده و کاربرپسنده مخصوص یوتیوبری و تولید ویدیوهای خفن
اسکریپت تلپرامپتر حرفهای برای ساخت ویدیو یوتوب
اسکریپت جدید تلپرامتر حرفهای برای تولید محتوا ویدیو یوتیوب و آپارتت
تله پرامپتر برای ساخت ویدیو آموزشی
تلپرامتر حرفهای برای تولید محتوا ویدیویی
const ,document ,teleprompter ,color ,getelementbyid ,text ,document getelementbyid ,background color ,font size ,border radius ,addeventlistener click ,document getelementbyid teleprompter ,20px border radius ,background color 212121 ,text telepromptertext value