如何将字符打印与声音同步？

Question

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

我是 JavaScript 新手。执行此操作的首选方法是什么？我应该为此查看 jQuery 吗？还是这很简单？

我在某些网络浏览器上看到了像这样触发声音文件的问题，是否有最适合这种事情的音频文件格式？

我找到了这个，但问题是，它不适用于所有网络浏览器： 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/）