パーツ番号 07-03-12 ・ JavaScript使用

自動字幕表示プレーヤー

画面下部の字幕テキストが数秒ごとに自動で切り替わります。WordPressの動画マニュアルやセミナー動画に字幕サンプルとして添えられます。

autojs

プレビュー

ソースコード

HTML

<div class="d07-03-12-player">
          <div class="d07-03-12-screen">
            <svg viewBox="0 0 24 24" width="34" height="34" fill="rgba(255,255,255,.85)"><path d="M8 5v14l11-7z"/></svg>
            <div class="d07-03-12-cap"><span id="d07-03-12-capText">音声を認識しています…</span></div>
          </div>
        </div>

CSS

.prev.d07-03-12{background:#111827}
        .d07-03-12-player{width:100%;max-width:320px}
        .d07-03-12-screen{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#312e81,#7c3aed)}
        .d07-03-12-cap{position:absolute;left:0;right:0;bottom:10px;text-align:center;padding:0 14px}
        .d07-03-12-cap span{display:inline-block;background:rgba(0,0,0,.55);color:#fff;font-size:11.5px;line-height:1.5;padding:5px 12px;border-radius:6px}

JavaScript

(function(){
        var root=document.querySelector('#item-07-03-12');if(!root)return;
        var el=root.querySelector('#d07-03-12-capText');
        var lines=['音声を認識しています…','ようこそ、今回のセミナーへ。','まずは基本設定から解説します。','ご視聴ありがとうございました。'];
        var i=0;
        setInterval(function(){
          i=(i+1)%lines.length;
          el.textContent=lines[i];
        },2400);
      })();

クラス名 .d07-03-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。