再生されたオーディオと一緒に時限トランスクリプトを表示する方法

音声トランスクリプトはテキスト形式のスピーチで、録音された講義、セミナーなどの有用な資料を聴覚的に問題のある方に提供するのに役立ちます。インタビュー、法廷審問、会議などのイベントのテキスト記録を保管するためにも使用されます。.

（Podcastのように）Webページの音声は、聴覚障害のある人やまったく聞こえない人のために、通常はトランスクリプトを伴います。彼らはすることができます 音声の横に「再生」というテキストを表示する. 音声トランスクリプトを作成する最善の方法は、手動による解釈と録音によるものです。.

この記事では、見ていくつもりです 実行中の音声記録を音声と一緒に表示する方法. 始めるためには、トランスクリプトを用意する必要があります。この記事のために、私はサンプルオーディオとそのトランスクリプトをからダウンロードしました。 voxtab.

私はHTMLを使います ul 以下のようなWebページにダイアログを表示するためのリスト。

  ジャスティン：私が言おうとしているのは、上訴と和解は別のものであるということです.
 アリステア：あなたは、内外のコミュニケーションと発表が上訴プロセスに持ち込まれることを意味します.
 ジャスティン彼らは訴えにつながるから.
…

次に、利用可能なすべてのテキストをぼかして、 音声録音によって再生されている現在のスピーチに一致するダイアログだけをぼかします。. だから、ダイアログをぼかすために私はCSSフィルタ "blur"を使う.

#transcript> li -webkit-filter：blur（3px）filter：blur（3px）;移行：すべての.8は簡単です;…

IE 10以降の場合は追加できます テキスト影 ぼかし効果を作成します。このコードを使用して、CSSブラーが適用されているかどうかを検出し、IE固有のスタイルシートを読み込むことができます。テキストがぼやけたら、先に進み、トランスクリプトにスタイルを追加しました.

 if（getComputedStyle（dialogues [0]）。webkitFilter ===未定義&& getComputedStyle（dialogues [0]）。filter === "none"）var headEle = document.querySelector（ 'head'）、linkEle = document.createElement （'リンク'）; linkEle.type = 'text / css'; linkEle.rel = 'スタイルシート'; linkEle.href = 'ie.css'; headEle.appendChild（linkEle）;

それでは、ページに音声を追加しましょう。.

の ontimeupdate のイベント オーディオ 要素はそのたびに起動されます 現在の時刻 が更新されるので、そのイベントを使用してオーディオの現在の実行時間を確認し、トランスクリプトの対応するダイアログをハイライトします。まず必要となるグローバル変数をいくつか作成しましょう。.

dialogueTimings = [0,4,9,11,18,24,29,31,44,45,47]; dialogues = document.querySelectorAll（ '＃transcript> li'）; transcriptWrapper = document.querySelector（ '＃transcriptWrapper'）; audio = document.querySelector（ '＃audio'）; previousDialogueTime = -1。

dialogueTimings トランスクリプト内の各ダイアログが始まる秒数を表す数値の配列です。最初の対話は0秒、2番目は4秒というように続きます。. previousDialogueTime 対話の変更を追跡するために使用されます.

最後にフックした関数に移動しましょう ontimeupdate, これは "playTranscript"という名前です。から playTranscript 音声が再生されているほぼ毎秒ごとに発火します、私たちは最初にどの対話が現在再生されているかを特定する必要があります。音声が0:14にあるとすると、それは0:11に始まった対話を再生しています。 dialogueTimings もし現在の時刻が音声で0:30であれば、それは0:29に始まった対話です。.

したがって、現在の対話がいつ始まったのかを調べるために、最初にすべての時間をフィルター処理します。 dialogueTimings オーディオの現在時刻より下にある配列。現在の時刻が0:14の場合、すべての番号が除外されます。 14以下（0、4、9、11）の配列で、最大数を調べます。そのうち11です（したがって、対話は0:11に開始されます）。.

function playTranscript（）var currentDialogueTime = Math.max.apply（Math、dialogueTimings.filter（function（v）return v <= audio.currentTime));

一度 currentDialogueTime 計算されている、我々はそれがと同じかどうかを確認します previousDialogueTime（つまり、音声内のダイアログが変更されたかどうか）、それが一致しない場合（つまり、ダイアログが変更された場合）、 currentDialogueTime に割り当てられている previousDialogueTime.

function playTranscript（）var currentDialogueTime = Math.max.apply（Math、dialogueTimings.filter（function（v）return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;

それでは、のインデックスを使用しましょう。 currentDialogueTime の中に dialogueTimings トランスクリプトダイアログのリストのどのダイアログをハイライトする必要があるかを調べるための配列。たとえば、 currentDialogueTime は11で、次に11のインデックスは dialogueTimings 配列は3です。つまり、インデックス3のダイアログをハイライト表示する必要があります。 対話 アレイ.

function playTranscript（）var currentDialogueTime = Math.max.apply（Math、dialogueTimings.filter（function（v）return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];

ハイライトするダイアログが見つかったら（それが currentDialogue）スクロール transcriptWrapper （スクロール可能な場合） currentDialogue ラッパーのトップより50px下にあるなら、先にハイライトしたダイアログを見つけてクラスを削除します。 話し中 それから、それを追加します currentDialogue.

function playTranscript（）var currentDialogueTime = Math.max.apply（Math、dialogueTimings.filter（function（v）return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)]; transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50; var previousDialogue = document.getElementsByClassName('speaking')[0]; if(previousDialogue !== undefined) previousDialogue.className = previousDialogue.className.replace('speaking',"); currentDialogue.className +=' speaking';

クラスを持つ要素 話し中 ぼかされていないテキストを表示します.

.スピーチ-webkit-filter：blur（0px）フィルター：blur（0px）;

それだけです、これが完全なコードのHTMLとJSのコードです。.

  ジャスティン：私が言おうとしているのは、上訴と和解は別のものであるということです.
 アリステア：あなたは、内外のコミュニケーションと発表が上訴プロセスに持ち込まれることを意味します.
 ジャスティン彼らは訴えにつながるから.
…

デモ

以下のデモをチェックして、すべてのコードがまとめられたときにどのように機能するのかを理解してください。.