Question

我正在尝试编写一个程序，它会接受一个句子并播放每个单词的声音片段。我是stackoverflow和javascript / html的新手，所以我很抱歉这种格式是垃圾。我遇到了一起播放的问题，为了解决这个问题，我添加了一个.onended（），但这只修复了前两个单词并使用循环无效。感谢您的任何帮助。这就是我目前所拥有的：

<body>
What would you like me to say?
<input type="text" id="words"/>
<script>
document.getElementById('words').addEventListener('keypress', function (e) {
    if (e.which === 13) {
		var sentence = document.getElementById("words").value;
		var splitted = sentence.split(" ");
		var length = splitted.length;
		var i = 1;
		var sp = new Audio (splitted[0] + '.m4a');
		sp.play();
		sp.onended=function(){
			if(i<length){
			var sp = new Audio (splitted[i] + '.m4a');
			sp.play();
			i++;
			}
		}
    }
});

这就是我之前所拥有的，当我把它们全部圈起来并且它们都在一起玩的时候：

for(i=0;i<length;i++){
var sp = new Audio(splitted[i] + 'm4a');
sp.play();
}

Answer 1

当您为下一个单词var sp = new Audio (splitted[i] + '.m4a')创建音频时，会创建一个新的原始音频实例。因此，第二个单词没有设置.onended处理程序。这就是为什么它只播放前两个单词。

要修复此问题，您必须为您创建的每个音频添加ended侦听器。

Answer 2

如果我是对的，你是否正在寻找文字对话。然后让我建议你responsiveVoiceJS。这个javascript库可以从您的输入字段中获取数据，并可以将其转换为语音，而无需为每个音节创建单独的语音。这是简单的方法。

资源：responsivevoice.org

Answer 3

我找到了一个使用递归函数的修复：

document.getElementById('words').addEventListener('keypress', function (e) {
    if (e.which === 13) {
		var sentence = document.getElementById("words").value;
		var splitted = sentence.split(" ");
		var length = splitted.length;
		var i = 0;
		testFunction();
		function testFunction(){
			if(i<length){
				var sp = new Audio (splitted[i] + '.m4a');
				sp.play();
				i++;
				sp.onended=function(){
					testFunction();
				}
			}
		}
    }
});

谢谢你的帮助！

一个接一个地播放音频

3 个答案: