1
任意の音声・映像ファイルをアップロード
任意のメディアファイルをドラッグ＆ドロップしてください。主要なすべてのフォーマットに対応し、字幕生成のための音声を抽出します。
- 全音声形式：MP3、WAV、M4A、AAC、OGG、FLAC、WMA
- 全映像形式：MP4、MOV、AVI、MKV、WebM、WMV
- 最大500MBのファイルに対応
WebVTT字幕を生成 — ウェブ動画のW3C標準
ドットタイムスタンプ区切り、WEBVTTヘッダー、HTML5の<track>要素、HLSストリーム、すべての最新ブラウザで動作するキュー構造を持つ適切にフォーマットされたVTTファイル。
ファイルをここにドロップするかクリックして参照
.mp3, .wav, .m4a, .aac, .ogg, .flac, .mp4, .mov, .avi, .mkv, .webm·最大500MB
WebVTT：ウェブが実際に使用する字幕フォーマット
WebVTT（Web Video Text Tracks）はHTML5動画の字幕用W3C標準です。SRTとは異なり、VTTは::cue疑似要素によるCSSスタイリング、キューの配置と整列設定、NOTEコメントブロック、チャプターマーカーをサポートします。HLS（HTTP Live Streaming）の必須字幕フォーマットです — 映像をストリーミングするなら、SRTではなくVTTが必要です。Vocovaはあらゆる音声・映像ソースから仕様準拠のWebVTTファイルを生成します。
使い方
2
AIが文字起こしとVTTフォーマット変換
音声を文字起こしし、適切なタイミング、必須のWEBVTTヘッダー、W3C仕様に準拠したドット区切りタイムスタンプでWebVTTキューにセグメント化します。
- オプションのメタデータ領域を含むWEBVTTヘッダー
- ドット区切りのミリ秒（HH:MM:SS.mmm）
- 自然な読みの流れにセグメント化されたキュー
3
VTTファイルの確認とダウンロード
各キューをプレビューし、必要に応じてテキストを編集して、HTML5動画プレーヤー、HLSストリーム、ウェブプラットフォーム対応のVTTファイルをダウンロードできます。
- エクスポート前にキューテキストを編集
- 全体にわたるW3C準拠の構造
- 全言語対応のUTF-8エンコーディング
機能
CSS ::cueスタイリングサポート
WebVTT字幕は::cue疑似要素を使用してCSSでスタイリングできます。フォント、色、サイズ、背景、透明度を変更できます。::cue(b)、::cue(i)、ボイスセレクターで要素ごとのスタイリングも使用できます。これはSRTに対する主要な利点であり、SRTには標準的なスタイリングメカニズムがありません。
キューの配置と整列
VTTキューは位置、整列、サイズ、行配置の設定をサポートします。話者識別字幕を画面上部に配置したり、説明を左に配置したり、標準的な対話をセンターに配置できます。これらの配置コントロールはVTT仕様の一部であり、ハックではありません。
メタデータ用NOTEブロック
WebVTTはNOTEコメントブロックをサポートします — ファイル内に表示されますが画面には表示されないメタデータ。翻訳者のメモ、編集者へのコンテキスト、言語情報、バージョン追跡に使用できます。SRTには同等の機能がありません。
HLSストリーミング必須フォーマット
AppleのHLS仕様は字幕にWebVTTを要求しています — SRTはHLSマニフェストではサポートされません。HLS経由で映像を配信する場合（ほとんどのiOS動画、Apple TV、多くのCDNを含む）、VTTを使用する必要があります。当社のファイルはHLS統合に対応しています。
正しいMIMEタイプの処理
VTTファイルはMIMEタイプtext/vttで提供される必要があります。多くのウェブサーバーは.vttファイルをデフォルトでtext/plainとし、ブラウザが字幕トラックとして拒否する原因になります。この点を出力に記載しているため、サーバーを正しく設定できます — 字幕を無音で壊す一般的な落とし穴です。
Vocovaを選ぶ理由
HTML5動画にキャプションを追加
<video>タグ内の<track>要素を使用してネイティブにキャプションを追加できます。WebVTTはHTML5の<track>要素がサポートする唯一の字幕フォーマットです — SRTはここでは動作しません。1行のHTMLで動画にキャプションが付きます。
HLS動画ストリームに字幕を付ける
HLSは字幕にWebVTTを義務付けています。AWS MediaConvert、Cloudflare Stream、Mux、またはいずれかのHLSパイプラインを使用している場合、VTTファイルが必要です。ソースメディアから生成し、HLSマニフェストに含めましょう。
ブランドのCSSで字幕をスタイリング
::cue疑似要素を使用して、ブランドのフォント、色、背景処理でWebVTT字幕をスタイリングできます。デフォルトの黒い背景ボックスを削除、テキスト色を変更、フォントサイズを調整 — すべて標準CSSで可能です。
ウェブアクセシビリティ基準を満たす
WCAG 2.1はウェブ動画キャプションにWebVTTを推奨しています。映像コンテンツからVTTファイルを生成し、WCAGレベルA（録画メディアのキャプション）およびレベルAA要件を満たしましょう。
活用できる方
ウェブ開発者
サイト上のHTML5動画プレーヤーにWebVTTトラックを追加。kind='captions'またはkind='subtitles'で<track>要素を使用。CSS ::cueでスタイリングしてネイティブなキャプション体験を実現。
ストリーミングインフラエンジニア
HLSとDASHの字幕トラック用にVTTファイルを生成。アダプティブビットレートマニフェスト用にVTTファイルをセグメント化。WebVTTはHLSがネイティブでサポートする唯一の字幕フォーマットです。
eラーニングプラットフォーム開発者
LMSプラットフォームのコース動画にキャプションを追加。ほとんどの最新LMSシステム（Canvas、Moodle、Blackboard）はHTML5動画を使用し、キャプショントラックにWebVTTを期待しています。
ウェブに公開するコンテンツクリエイター
ブログ、ポートフォリオ、メディアサイトに埋め込まれた動画用にVTT字幕ファイルを生成。WebVTTはプラグインやJavaScriptライブラリなしですべての最新ブラウザで動作します。
よくある質問
どのブラウザがWebVTT ::cueスタイリングをサポートしていますか？
Chrome、Edge、Safari、Firefoxはすべて基本的な::cueスタイリング（フォント、色、背景、透明度）をサポートしています。ChromeとEdgeは::cue(v[voice='Speaker'])、配置、要素ごとのスタイリングなどの高度な機能について最も広いサポートがあります。FirefoxとSafariはコアスタイリングプロパティをサポートしていますが、ボイスセレクターと配置にはいくつかの制限があります。ターゲットブラウザで特定のスタイリングをテストしてください。
VTTのNOTEとチャプターマーカーとは何ですか？
NOTEブロックはファイル内に表示されますが画面には表示されないコメントセクションです。翻訳者の指示、バージョン情報、コンテキストに使用します。チャプターマーカーはkind='chapters'のキューで、動画の名前付きセクションを定義します — ブラウザはチャプターナビゲーションUIとして表示できます。両方ともSRTでは再現できないVTT専用の機能です。
HLSがSRTではなくVTTを要求するのはなぜですか？
AppleのHLS仕様（RFC 8216）は字幕トラックにWebVTTを義務付けています。技術的な理由は、VTTが最初からウェブ配信向けに設計されたためです — W3Cウェブ標準であり、SRTはDVDリッピング時代のデスクトップフォーマットです。HLSマニフェストはVTTセグメントファイルを参照し、iOS/SafariはVTTのみを<track>要素で解析します。HLSマニフェストでSRTを使用しようとすると、無視されます。
字幕の背後のデフォルトの黒い背景ボックスを削除するにはどうすればよいですか？
黒い背景はブラウザのデフォルト字幕スタイリングによって追加されます。CSSでオーバーライドしてください：'::cue { background-color: transparent; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }'。text-shadowが背景ボックスの代わりに微妙な影を追加し、あらゆる映像コンテンツ上でテキストを読みやすく保ちます。注意：このスタイリングアプローチはChromeとEdgeで動作しますが、Safariでは異なる対応が必要です。
VTTファイルがローカルでは動作するのにサーバー上では動作しません。なぜですか？
ほぼ確実にMIMEタイプの問題です。VTTファイルはContent-Type 'text/vtt'で提供される必要があります。多くのウェブサーバーは.vttファイルをデフォルトで'text/plain'として提供し、ブラウザが字幕トラックとして無音で拒否します。サーバー設定で修正してください：Nginxでは'types { text/vtt vtt; }'を追加、Apacheでは'AddType text/vtt .vtt'を追加、またはCDN設定でContent-Typeヘッダーを設定してください。
VTTとSRTの技術的な違いは何ですか？
明らかな違い（VTTはタイムスタンプにドット、SRTはカンマ）以外に：VTTには必須の'WEBVTT'ヘッダーがあり、::cueによるCSSスタイリングをサポートし、キューの配置/整列設定を許可し、NOTEコメントブロックを含み、ボイスタグ（<v Speaker>）をサポートし、字幕配置用のリージョンを定義できます。SRTにはこれらの機能がありません。VTTはウェブ標準（W3C）です；SRTは公式仕様のない非公式フォーマットです。
Premiere ProなどのデスクトップビデオエディターでVTTファイルを使用できますか？
ほとんどのデスクトップエディターはVTTファイルをインポートしますが、サポートは異なります。Premiere ProとDaVinci ResolveはVTTインポートをうまく処理します。Final Cut ProはSRTを好みますがVTTでも動作できます。ワークフローが主にデスクトップ編集であれば、SRTの方が普遍的にサポートされている場合があります。ワークフローがウェブ配信、HLS、HTML5動画を含む場合、VTTが正しい選択です。
音声をテキストに変換する準備はできましたか？
ファイルをアップロードするか、YouTube、Podcast、クラウドストレージ、1,000以上のプラットフォームのリンクを貼り付けるだけで、数分で高精度な文字起こしを取得できます。クレジットカードは不要です。