<!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: #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;
        }

        @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>

    <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');

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

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

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

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

        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>

این اسکریپت تلپرامتر یک ابزار کاربردی برای افرادی است که نیاز دارند متن‌های طولانی را هنگام ضبط ویدیو به راحتی و بدون نیاز به حفظ کردن بخوانند. این اسکریپت با یک طراحی ساده و مینیمال به شما این امکان را می‌دهد که متن خود را وارد کرده، سرعت پخش را تنظیم کنید و با فشردن یک دکمه، متن را به صورت کلمه به کلمه روی صفحه نمایش دهید.

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


 

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

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

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

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

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

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

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

color ,font ,teleprompter ,size ,background ,center ,font size ,background color ,document getelementbyid ,color bababa ,border radius ,align items center ,20px border radius ,intervalid setinterval displaynextword ,color bababa border
مشخصات
آخرین مطالب این وبلاگ