音频定时播放软件_如何在播放的音频旁边显示定时字幕

语音记录是语音的文本版本，有助于向听觉上有挑战性的人提供有用的材料，例如录制的讲座 ，研讨会等。 它们还用于保存采访，法庭听证会和会议等事件的文本记录。

网页中的语音音频（例如Podcast中的语音音频）通常会附带成绩单，以使听力障碍或根本听不到的人受益。 他们可以在音频旁边查看文本“正在播放” 。 制作录音笔录的最佳方法是手动解释和录制。

在本文中，我们将看到如何在audio旁边显示正在运行的音频记录 。 首先，我们需要准备好成绩单。 对于这篇文章，我从voxtab下载了一个示例音频及其转录本 。

我使用HTML ul列表在网页上显示对话框，如下所示：

<div id="transcriptWrapper">
    <ul id="transcript">
        <li class="speaker1"><strong class="speakerName">Justin</strong>: What I am trying to say is that the appeal and the settlement are separate.</li>
        <li class="speaker2"><strong class="speakerName">Alistair</strong>: You mean that communications and announcements internal and external would be brought into the appeal process.</li>
        <li class="speaker1"><strong class="speakerName">Justin</strong>: Right, because they connect to the appeal.</li>
        ...
    </ul>
</div>

接下来，我希望所有可用的文本模糊不清，并且只取消模糊与将与音频录制中正在播放的当前语音匹配的对话 。 因此，要取消模糊对话，我使用CSS过滤器“模糊”。

#transcript > li{
     -webkit-filter: blur(3px)
    filter: blur(3px);
    transition: all .8s ease;
    ...
}

对于IE 10+，您可以添加text-shadow以创建模糊效果。 您可以使用此代码检测是否已应用CSS模糊，并加载IE特定的样式表。 文字模糊后，我继续为笔录添加了一些样式。

if( getComputedStyle(dialogues[0]).webkitFilter === undefined && getComputedStyle(dialogues[0]).filter === "none"){
    var headEle = document.querySelector('head'),
      linkEle = document.createElement('link');
      linkEle.type = 'text/css';
      linkEle.rel = 'stylesheet';
      linkEle.href = 'ie.css';
      headEle.appendChild(linkEle);
}

现在，我们将音频添加到页面上。

<audio id="audio" ontimeupdate="playTranscript()" controls>
    <source src="sample.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

ontimeupdate audio元素的currentTime更新时，都会触发该audio元素的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是一个数字数组，代表成绩单中每个对话开始的秒数。 第一个对话从0s开始，第二个对话从4s开始，依此类推。 previousDialogueTime将用于跟踪对话更改。

最后，让我们转到挂接到ontimeupdate的函数上，该函数名为“ playTranscript”。 由于playTranscript几乎每秒钟播放一次音频，因此我们首先需要确定当前正在播放哪个对话。 假设音频是在0:14，那么它打的是开始于0:11对话（请参dialogueTimings阵列），如果当前时间是在音频0:30然后就这么开始于0:29对话。

因此，为了找出当前对话何时开始，我们首先对所有dialogueTimings时间中低于音频当前时间的时间进行过滤。 如果当前时间是0:14，我们将滤除所有的no。 数组中小于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相同（即音频中的对话是否已更改），如果不匹配（即对话已更改），则将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中相应的对话该装置dialogues阵列。

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处，然后我们找到先前突出显示的对话框，并从中删除speaking的类并添加它到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';
    }
}

带班的元素speaking会显示不模糊的文字。

.speaking{
  -webkit-filter: blur(0px)
  filter:blur(0px);
}

就是这样，这里是完整的代码HTML和JS代码。

<div id="transcriptWrapper">
    <ul id="transcript">
        <li class="speaker1"><strong class="speakerName">Justin</strong>: What I am trying to say is that the appeal and the settlement are separate.</li>
        <li class="speaker2"><strong class="speakerName">Alistair</strong>: You mean that communications and announcements internal and external would be brought into the appeal process.</li>
        <li class="speaker1"><strong class="speakerName">Justin</strong>: Right, because they connect to the appeal.</li>
        ...
    </ul>
</div>

<br>

<audio id="audio" ontimeupdate="playTranscript()" controls>
    <source src="sample.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<br>

<script>
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;

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';
    }
}
</script>

演示版

查看下面的演示，以了解将所有代码组合在一起后的工作原理。

翻译自: https://www.hongkiat.com/blog/display-audio-transcript/