تلپرامتر حرفه‌ای برای تولید محتوا ویدیویی

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تلپرامتر حرفه‌ای</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #2f2f2f;
            color: #bababa;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        .container {
            width: 90%;
            max-width: 800px;
            background-color: #171717;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        h1 {
            color: #bababa;
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }

        textarea {
            width: 100%;
            height: 150px;
            background-color: #212121;
            color: #bababa;
            border: none;
            padding: 10px;
            border-radius: 5px;
            resize: none;
            font-size: 16px;
            line-height: 1.5;
        }

        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .btn {
            background-color: #3c3c3c;
            color: #bababa;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #282828;
        }

        .slider-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .slider-container label {
            font-size: 16px;
        }

        .slider {
            width: 100px;
        }

        .teleprompter {
            background-color: #171717;
            color: #bababa;
            padding: 20px;
            border-radius: 5px;
            margin-top: 20px;
            height: 300px;
            overflow-y: auto;
            text-align: center;
            font-size: 24px;
            line-height: 1.5;
            white-space: pre-wrap;
        }

        .highlight {
            color: #ff5252;
        }

        .progress-bar {
            width: 100%;
            background-color: #3c3c3c;
            border-radius: 5px;
            overflow: hidden;
            margin-top: 10px;
        }

        .progress {
            height: 10px;
            background-color: #ff5252;
            width: 0%;
        }

        @media (max-width: 600px) {
            h1 {
                font-size: px;
            }

            textarea {
                font-size: 14px;
            }

            .btn {
                font-size: 14px;
            }

            .teleprompter {
                font-size: px;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>تلپرامتر حرفه‌ای</h1>
        <textarea id="inputText" placeholder="متن خود را اینجا وارد کنید."></textarea>
        <div class="controls">
            <button class="btn" id="startBtn">شروع</button>
            <button class="btn" id="stopBtn">توقف</button>
            <div class="slider-container">
                <label for="speedRange">سرعت:</label>
                <input type="range" id="speedRange" class="slider" min="1" max="10" value="5">
            </div>
        </div>
        <div class="teleprompter" id="teleprompter">
            <!-- متن پخش شده اینجا نمایش داده می‌شود -->
        </div>
        <div class="progress-bar">
            <div class="progress" id="progress"></div>
        </div>
    </div>

    <script>
        const inputText = document.getElementById('inputText');
        const teleprompter = document.getElementById('teleprompter');
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const speedRange = document.getElementById('speedRange');
        const progress = document.getElementById('progress');

        let words = [];
        let currentIndex = 0;
        let intervalId;
        let isRunning = false;

        function startTeleprompter() {
            if (!isRunning) {
                words = inputText.value.split(' ');
                currentIndex = 0;
                teleprompter.innerHTML = '';
                progress.style.width = '0%';
                intervalId = setInterval(displayNextWord, 500 / speedRange.value);
                isRunning = true;
            }
        }

        function stopTeleprompter() {
            clearInterval(intervalId);
            isRunning = false;
        }

        function displayNextWord() {
            if (currentIndex < words.length) {
                teleprompter.innerHTML += words[currentIndex] + ' ';
                teleprompter.scrollTop = teleprompter.scrollHeight;
                currentIndex++;
                updateProgress();
            } else {
                stopTeleprompter();
            }
        }

        function updateProgress() {
            const progressPercent = (currentIndex / words.length) * 100;
            progress.style.width = progressPercent + '%';
        }

        startBtn.addEventListener('click', startTeleprompter);
        stopBtn.addEventListener('click', stopTeleprompter);

        speedRange.addEventListener('input', function() {
            if (isRunning) {
                clearInterval(intervalId);
                intervalId = setInterval(displayNextWord, 500 / speedRange.value);
            }
        });
    </script>
</body>
</html>

این اسکریپت یه ابزار کارآمد برای کساییه که محتوا تولید می‌کنن و نیاز دارن متن‌هاشون رو موقع ضبط ویدیو راحت بخونن. با این اسکریپت، می‌تونی متن‌هات رو وارد کنی و با یه کلیک پخش کنی، بدون اینکه مجبور باشی چشمات رو هی به کاغذ یا مانیتور بدوزی.

چی کار می‌کنه؟
رابط کاربری ساده: طراحی شده تا کار باهاش آسون باشه. متن رو وارد می‌کنی، سرعت رو تنظیم می‌کنی، دکمه پخش رو می‌زنی و متن شروع به نمایش دادن می‌کنه.
نمایش تدریجی متن: متن به صورت کلمه به کلمه روی صفحه نمایش داده میشه، طوری که بتونی بدون جا انداختن کلمه‌ای، متن رو بخونی.
ریسپانسیو: روی همه دستگاه‌ها مثل دسکتاپ، موبایل، تبلت به خوبی کار می‌کنه و خودش رو با اندازه صفحه تنظیم می‌کنه.
هایلایت کردن کلمات: اگه توی متن کلمه‌ای هست که مهمه و می‌خوای روش تاکید کنی، می‌تونی هایلایتش کنی تا راحت‌تر پیداش کنی.
پیشرفت خواندن: یه نوار پیشرفت (progress bar) هم داره که نشون می‌ده چقدر از متن رو خوندی و چقدرش مونده.
این اسکریپت به چه درد می‌خوره؟
اگه توی کار تولید محتوا هستی، این اسکریپت به کارت میاد. دیگه نیازی نیست متن رو حفظ کنی یا نگران باشی که حین ضبط چیزی رو فراموش کنی. با این تلپرامتر، می‌تونی تمرکزت رو بذاری روی ارائه محتوا و متن رو همون لحظه بخونی، طوری که انگار همه چیز رو از بر هستی.

این یه ابزار کاربردیه که کمک می‌کنه محتوای ویدیوییت رو با کیفیت‌تر و حرفه‌ای‌تر ضبط کنی، بدون اینکه هیچی از دست بره.

تلپرامتر ساده و کاربرپسنده مخصوص یوتیوبری و تولید ویدیوهای خفن

اسکریپت تلپرامپتر حرفه‌ای برای ساخت ویدیو یوتوب

اسکریپت جدید تلپرامتر حرفه‌ای برای تولید محتوا ویدیو یوتیوب و آپارتت

تله پرامپتر برای ساخت ویدیو آموزشی

تلپرامتر حرفه‌ای برای تولید محتوا ویدیویی

تلپرامتر برای تولید محتوا ویدیویی

تلپرامتر حرفه‌ای برای تولید ویدیو

color ,font ,size ,width ,background ,teleprompter ,font size ,background color ,document getelementbyid ,border radius ,color bababa ,align items center ,20px border radius ,currentindex words length ,intervalid setinterval displaynextword