<!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; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; direction: rtl; text-align: right; } #container { background-color: #212121; padding: 20px; border-radius: 10px; width: 90%; max-width: 600px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } #textInput { width: 100%; height: 200px; background-color: #2f2f2f; color: #bababa; border: none; border-radius: 5px; padding: 10px; box-sizing: border-box; resize: none; font-size: 16px; } #controls { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } button { background-color: #3c3c3c; color: #bababa; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; font-size: 16px; } button:hover { background-color: #282828; } input[type="range"] { width: 100px; } #teleprompter { background-color: #171717; color: #bababa; border: none; border-radius: 5px; padding: 10px; box-sizing: border-box; width: 100%; height: 200px; font-size: 16px; overflow-y: auto; margin-top: 10px; } @media (max-width: 600px) { #textInput, #teleprompter { font-size: 14px; } button { font-size: 14px; padding: 8px 16px; } input[type="range"] { width: 80px; } } </style> </head> <body> <div id="container"> <textarea id="textInput" placeholder="متن خود را اینجا وارد کنید."></textarea> <div id="controls"> <button id="startButton">پخش</button> <input type="range" id="speedControl" min="1" max="10" value="5"> <span id="speedDisplay">سرعت: 5x</span> </div> <div id="teleprompter"></div> </div> <script> const textInput = document.getElementById('textInput'); const startButton = document.getElementById('startButton'); const speedControl = document.getElementById('speedControl'); const speedDisplay = document.getElementById('speedDisplay'); const teleprompter = document.getElementById('teleprompter'); let intervalId; let words; let wordIndex = 0; let speed = 5; speedControl.addEventListener('input', () => { speed = speedControl.value; speedDisplay.textContent = `سرعت: ${speed}x`; if (intervalId) { clearInterval(intervalId); startScrolling(); } }); startButton.addEventListener('click', () => { if (intervalId) { clearInterval(intervalId); intervalId = null; startButton.textContent = 'پخش'; } else { words = textInput.value.split(' '); wordIndex = 0; teleprompter.textContent = ''; startScrolling(); startButton.textContent = 'توقف'; } }); function startScrolling() { intervalId = setInterval(() => { if (wordIndex < words.length) { teleprompter.textContent += words[wordIndex] + ' '; wordIndex++; teleprompter.scrollTop = teleprompter.scrollHeight; } else { clearInterval(intervalId); intervalId = null; startButton.textContent = 'پخش'; } }, 500 / speed); } </script> </body> </html>
این اسکریپت یک تلپرامپتر ساده و مینیمال است که به افراد تولید محتوا این امکان را میدهد تا متنهای خود را به راحتی وارد کرده و در حین ضبط ویدیو به صورت روان از روی آن بخوانند. اسکریپت طراحی شده با استفاده از ترکیب رنگی تیره و مناسب برای محیطهای کمنور، به گونهای است که کار با آن برای کاربر آسان و بدون حواسپرتی باشد.
این تلپرامپتر به گونهای طراحی شده که کاملاً ریسپانسیو باشد و در تمامی دستگاهها، از جمله موبایل و دسکتاپ، به خوبی اجرا شود. کاربر میتواند متن خود را به راحتی در کادر مربوطه وارد کرده و با فشردن دکمه پخش، متن را به صورت خودکار و با سرعت قابل تنظیم نمایش دهد. این ویژگی به کاربر اجازه میدهد تا سرعت نمایش متن را با سرعت خواندن خود تنظیم کرده و از روی متن، به راحتی و با تسلط کامل، در جلوی دوربین صحبت کند.
همچنین، این اسکریپت دارای طراحی ساده و بدون عناصر اضافی است تا کاربران بتوانند بدون پیچیدگی و به راحتی از آن استفاده کنند. این ویژگیها این اسکریپت را به ابزاری کاربردی برای تولیدکنندگان محتوا تبدیل میکند که به دنبال راه حلی ساده و موثر برای مدیریت متنهای خود در حین ضبط ویدیو هستند.
تلپرامتر ساده و کاربرپسنده مخصوص یوتیوبری و تولید ویدیوهای خفن
اسکریپت تلپرامپتر حرفهای برای ساخت ویدیو یوتوب
اسکریپت جدید تلپرامتر حرفهای برای تولید محتوا ویدیو یوتیوب و آپارتت
تله پرامپتر برای ساخت ویدیو آموزشی
تلپرامتر حرفهای برای تولید محتوا ویدیویی
color ,teleprompter ,border ,intervalid ,width ,10px ,background color ,font size ,document getelementbyid ,color bababa ,border radius ,color bababa border ,none border radius ,clearinterval intervalid intervalid ,null startbutton textcontent