スクロール動画

(2025-02-07)

音声を載せて文字をスクロールさせます。

chatGPT に相談したところ、python で簡単にできるという話だったのでやってみたのですが、chatGPT はついにできませんでした。

半年前ほどにスクロールと音声を表示してそれを kazam でキャプチャして動画を作成していたのですが、記憶が脱落してしまってどうやったのか憶えていません。

おそらく php を使ったのではないかと思うのですが。

音声を作成する

python でまず音声を作成します。

text.txt を用意してそれを元に音声ファイルを作成します。

from gtts import gTTS

# テキストファイルを読み込む
with open('text.txt', 'r', encoding='utf-8') as file:
    text = file.read()

# 音声化して保存
tts = gTTS(text=text, lang='en')
audio_filename = 'output.mp3'
tts.save(audio_filename)

print("🎤 音声生成完了")

php でスクロール

<?php
// 外部のテキストファイルを読み込む
$filename = "text.txt"; // 読み込むテキストファイル
if (file_exists($filename)) {
    $text = file_get_contents($filename);  // ファイルの内容を取得
    $text = nl2br(htmlspecialchars($text)); // HTMLエスケープして改行を反映
} else {
    $text = "テキストファイルが見つかりません。";
}
?>
<!DOCTYPE html>
<html lang="ja">
<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;
            line-height: 1.6;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            height: 100vh;
            overflow: hidden; /* スクロールバーを隠す */
        }
        .container {
            width: 50%;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            height: 80vh;
            overflow: hidden;
            position: relative;
        }
        .text {
            position: relative;
            width: 100%;
            white-space: pre-line;
            font-size: 18px;
        }
        audio {
            display: none; /* 音声を非表示にする */
        }
    </style>
</head>
<body>

<div class="container">
    <div class="text" id="textContent">
        <?php echo $text; ?>
    </div>
</div>

<!-- 音声ファイルを埋め込む -->
<audio id="audioPlayer" autoplay>
    <source src="audio/output.mp3" type="audio/mp3">
    音声を再生するためのブラウザが必要です。
</audio>

<script>
    let textContainer = document.getElementById("textContent");
    let containerHeight = document.querySelector('.container').offsetHeight;
    let audioPlayer = document.getElementById("audioPlayer");

    // 音声の長さ（秒数）
    let audioDuration = 0;

    // 音声がロードされたら、その長さを取得
    audioPlayer.onloadedmetadata = function() {
        audioDuration = audioPlayer.duration;
        startAutoScroll();  // 音声が準備できたらスクロールを開始
    }

    // 22分30秒（1350秒）でスクロールを完了させるための設定
    const targetScrollTime = 1350; // スクロール時間を22分30秒（1350秒）に設定

    // スクロールの計算を音声に合わせて調整
    function startAutoScroll() {
        let textHeight = textContainer.scrollHeight; // テキストの高さ
        let scrollDistance = textHeight - containerHeight; // スクロールする総距離
        let scrollSpeed = scrollDistance / targetScrollTime;  // 1350秒でスクロールするための速度

        let topPosition = 0;
        let startTime = Date.now();

        // スクロールをスムーズに行う関数
        function autoScroll() {
            let elapsedTime = (Date.now() - startTime) / 1000; // 経過時間（秒）

            // 1350秒の時間内にスクロール
            if (elapsedTime < targetScrollTime) {
                topPosition = scrollSpeed * elapsedTime;  // 経過時間に基づいてスクロール位置を計算
                textContainer.style.transform = 'translateY(' + -topPosition + 'px)';
            }

            // スクロールが完了したら停止
            if (elapsedTime >= targetScrollTime) {
                return; // スクロールを停止
            }

            // 10ms間隔で次のスクロールを実行
            setTimeout(autoScroll, 10);  // 10ミリ秒ごとにスクロール更新
        }

        // スクロール開始
        autoScroll();
    }
</script>

</body>
</html>

kazam でキャプチャ

kazam で全画面をキャプチャします。

動画から静止画作成

ffmpeg を使って、動画から静止画を作成します。

ffmpeg -i aaa.mp4 -ss 5 -t 0.1 %06d.jpg

動画を crop する

静止画を Gimp で開いて、クロップする範囲を設定します。

その範囲で動画を crop。

ffmpeg -i aaa.MP4 -vf crop=w=294:h=471:x=885:y=585 output.mp4

shotcut で画像を重ねる

出来上がった動画を shotcut で開いて、動画の上にトラックを新規作成してそこに静止画を置いて、「+」を押して静止画の位置とサイズを変更します。フェードインもできます。

ただ、静止画がいくつもあるとそのたびにトラックを作るべきかどうかは今のところ不明です。

この辺はおそらく daVinci Resolve の方が優秀な気がします。

とても面倒ですが、chatGPT との無駄な 3 時間よりはずっとマシです。