如何将字符的印刷与声音同步

Question

我需要模仿旧手动打字机在打印网页上键入的内容时所做的事情。我想开发JavaScript函数以将其传递为字符串，并且它将以延迟打印出每个字符，并且声音文件与每个字母同步。

我是JavaScript的新手。这样做的首选方法是什么？我应该为此看jQuery吗？还是这很简单？

我已经在某些Web浏览器上看到了声音文件的问题，是否有适用于此类内容的音频文件格式？

我已经找到了这个，但是问题是，它在所有Web浏览器上都无法使用：https://rawgit.com/mehaase/js-typewriter/master/example3-typewriter/index.html

Answer 1

您可以尝试这样的事情：

// 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);
            }
        }
    }  
}

* {
	font-family: Courier;
	font-size: 32px;
}
.btn {
	display: inline-block;
	border: 1px solid black;
	border-radius: 5px;
	padding: 10px;
	cursor: pointer;
	margin: 10px;
}

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

更新：在Safari上。看来音频必须由用户事件触发（例如：onclick ..），所以我添加了一个按钮，然后使打字机开始onclick。

不利的一面是，没有办法预订音频文件，Safari提出服务器请求并每次播放时都会下载音频。我能想到的唯一（肮脏的）方法是提供数据URI而不是Audiourl。如果播放速度确实很重要，可以尝试一下（这可能有帮助：https：//www.ibm.com/developerworks/library/wa-ioshtml5/）