재생되는 오디오와 함께 시간이 표시된 사본을 표시하는 방법

오디오 대본은 말하기의 텍스트 버전으로, 녹음 된 강의, 세미나 등과 같은 유용한 자료를 청각 장애인에게 제공하는 데 유용합니다. 또한 인터뷰, 법원 청문회 및 회의와 같은 사건에 대한 텍스트 기록을 보관하는 데 사용됩니다..

청각 장애가 있거나 전혀들을 수없는 사람들을 위해 일반적으로 웹 페이지의 음성 오디오 (예 : Podcast)에는 성적표가 동봉됩니다. 그들은 할 수있다 오디오와 함께 "재생"텍스트보기. 오디오 녹음 사본을 만드는 가장 좋은 방법은 수작업으로 해석하고 녹음하는 것입니다..

이 게시물에서 우리는 실행중인 오디오 녹음 사본을 오디오와 함께 표시하는 방법. 시작하려면 성적표를 준비해야합니다. 이 게시물에서는 샘플 오디오 및 해당 사본을에서 다운로드했습니다. 복스.

HTML을 사용합니다. ul 목록을 클릭하면 아래와 같은 웹 페이지에 대화 상자가 표시됩니다.

 
 
저스틴: 내가 말하는 것은 항소와 합의가 분리되어 있다는 것입니다..
 
알리 스테 어: 귀하는 내부 및 외부의 의사 소통 및 공지 사항이 이의 제기 프로세스에 참여하게된다는 것을 의미합니다..
 
저스틴: 그들이 항소에 연결하기 때문에, 맞습니다..
... 
 
 

다음으로 모든 사용 가능한 텍스트를 흐리게 처리하고 싶습니다. 오디오 녹음으로 재생중인 현재 음성과 일치하는 대화 상자 만 흐리게 표시 해제. 따라서 대화 상자를 제거하려면 CSS 필터를 사용합니다. "blur".

#transcript> li -webkit-filter : blur (3px) 필터 : blur (3px); 전환 : 모두 .8s 완화; ...

IE 10 이상에서는 다음을 추가 할 수 있습니다. 텍스트 그림자 흐린 효과를 만들 수 있습니다. 이 코드를 사용하여 CSS 흐림이 적용되었는지 여부를 감지하고 IE 특정 스타일 시트를로드 할 수 있습니다. 일단 텍스트가 흐려지면, 나는 진행하여 성적표에 몇 가지 스타일을 추가했다..

 filter === "none") var headEle = document.querySelector ( 'head'), linkEle = document.createElement (텍스트가 포함 된 텍스트) ('링크'); linkEle.type = '텍스트 / CSS'; linkEle.rel = 'stylesheet'; 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에서 시작하고 두 번째 대화는 4에서 두 번째 대화 등이 시작됩니다.. previousDialogueTime 대화 변경 사항을 추적하는 데 사용됩니다..

드디어 함수에 연결하자. ontimeupdate, "playTranscript"라는 이름입니다. 이후 놀이 대본 오디오가 재생되는 거의 매 초마다 해고되면, 우리는 먼저 어느 대화가 현재 재생되고 있는지를 식별 할 필요가있다. 오디오가 0:14에 있다고 가정하면 0:11에 시작된 대화가 재생됩니다 ( dialogueTimings 배열), 현재 시간이 오디오에서 0:30 인 경우 0:29에 시작된 대화입니다..

따라서 현재 대화가 시작된시기를 알아 내기 위해 먼저 dialogueTimings 배열은 현재 오디오 시간보다 낮습니다. 현재 시간이 0시 14 분이면 우리는 모든 nos를 필터링합니다. 배열에서 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)];   

강조 할 대화를 찾으면 (즉, 현재 대화 상자), 우리는 transcriptWrapper (화면 이동 가능한 경우)까지 현재 대화 상자 래퍼 상단에서 50 픽셀 아래에 있으면 이전에 강조 표시된 대화를 찾아 클래스를 제거합니다. 말하기 그것을에서 추가하고에 현재 대화 상자.

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 : 흐림 (0 픽셀) 필터 : 흐림 (0 픽셀); 

전체 코드 HTML 및 JS 코드는 다음과 같습니다..

 
 
저스틴: 내가 말하는 것은 항소와 합의가 분리되어 있다는 것입니다..
 
알리 스테 어: 귀하는 내부 및 외부의 의사 소통 및 공지 사항이 이의 제기 프로세스에 참여하게된다는 것을 의미합니다..
 
저스틴: 그들이 항소에 연결하기 때문에, 맞습니다..
... 
 
 
  
  

데모

아래의 데모를 확인하여 모든 코드가 함께 사용될 때 어떻게 작동하는지 확인하십시오..