Question

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

我是JavaScript的新手。这样做的首选方法是什么？我应该为此查看jQuery吗？或者这件事情很简单吗？

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

我发现了这个，但问题是，它不适用于所有网络浏览器： https://rawgit.com/mehaase/js-typewriter/master/example3-typewriter/index.html

Answer 1

您可以尝试这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

缺点是没有办法预加载音频文件，Safari发出服务器请求并在每次播放时下载音频。我能想到的唯一（脏）方法是提供一个数据URI而不是audioURL ..如果回放速度真的很重要，你可以尝试一下（这可能会有所帮助：https://www.ibm.com/developerworks/library/wa-ioshtml5/）

如何同步声音字符打印？

1 个答案: