문자를 소리와 함께 인쇄하는 방법은 무엇입니까?

Question

웹 페이지에 입력 된 내용을 인쇄 할 때 오래된 수동 타자기가하는 일을 에뮬레이션해야합니다. 문자열을 전달하는 JavaScript 함수를 개발하고 각 문자를 지연 및 각 문자와 동기화 된 사운드 파일을 출력합니다.

JavaScript를 사용하고 있습니다. 이렇게하는 것이 바람직한 방법은 무엇입니까? 이걸 jQuery에서 볼 수 있을까요? 아니면이 일을 간단하게 할 수 있습니까?

일부 웹 브라우저에서 사운드 파일이 재생되는 것과 관련된 문제가 발생했습니다. 오디오 파일 형식이 가장 적합합니까?

내가 이걸 발견했지만, 문제는, 모든 웹 브라우저에서 작동하지 않을 수 있습니다 : https://rawgit.com/mehaase/js-typewriter/master/example3-typewriter/index.html

Answer 1

편집 : 지금은 사파리에서 작동합니다. 오디오는 사용자 이벤트 (예 : onclick ..)에 의해 트리거되어야하므로 버튼을 추가하고 타자기를 클릭하여 시작하도록했습니다.

추 신 : 오디오 파일을 미리로드 할 수있는 방법이 없다는 사파리는 서버 요청을하고 재생할 때마다 오디오를 다운로드합니다.

// The delay between each keystroke 
 
var delay = 300; 
 
    
 
// The typewriter sound file url 
 
var clickURL = "https://cdn.rawgit.com/halimb/res/6ffa798d/typewriter.wav"; 
 
    
 
// Get a reference to the container div 
 
var container = document.getElementById("container"); 
 
var sampleString = "Hello world!"; 
 
    
 
//get a reference to the start button and typewrite onclick 
 
var start = document.getElementById("btn"); 
 
start.onclick = function() { typewrite(sampleString); }; 
 
    
 
function typewrite(str) { 
 
    var i = 0; 
 
    container.innerHTML = ""; 
 
    type(); 
 
    
 
    function type() { 
 
     var click = new Audio(clickURL); 
 
     // This is triggered when the browser has enough of the file to play through 
 
     click.oncanplaythrough = function() { 
 
      click.play(); 
 
      // Add the character to the container div 
 
      container.innerHTML += str[i]; 
 
      i++; 
 
      if(i < str.length) { 
 
       window.setTimeout(type, delay); 
 
      } 
 
     } 
 
    } 
 
}

* { 
 
\t font-family: Courier; 
 
\t font-size: 32px; 
 
} 
 

 
.btn { 
 
\t display: inline-block; 
 
\t border: 1px solid black; 
 
\t border-radius: 5px; 
 
\t padding: 10px; 
 
\t cursor: pointer; 
 
\t margin: 10px; 
 
}

<div class="btn" id="btn">Start</div> 
 
<div id="container"></div>

을 : 나는 이것을 극복하는 생각할 수있는 유일한 (더러운) 방법은 재생 속도가 정말 중요한 경우 ( https://www.ibm.com/developerworks/library/wa-ioshtml5/를이 도움이 될 수있는) 것을 시도 할 수 있습니다 .. 데이터 대신 audioURL의 URI를 제공하는 것입니다