javascript - SpeechSynthesisUtterance 语音文本的多个实例

Question

(编辑:我自己想出了更简单的答案，发布在下面，希望对其他人有帮助。)

我正在构建一个网页，该网页使用 voiceSynthesisUntterance 来读取文本字符串的多个实例。

这是我正在使用的 JavaScript 代码

/*
 * Check for browser support
 */
var supportMsg = document.getElementById('msg');
var supportMsg = '';
var textnumber = document.getElementById('formid');

if ('speechSynthesis' in window) {
	supportMsg.innerHTML = 'Your browser <strong>supports</strong> speech synthesis.';
} else {
	supportMsg.innerHTML = 'Sorry your browser <strong>does not support</strong> speech synthesis.<br>Try this in <a href="http://www.google.co.uk/intl/en/chrome/browser/canary.html">Chrome Canary</a>.';
	supportMsg.classList.add('not-supported');
}


// Get the 'speak' button
var button = document.getElementById('speak');

// Get the text input element.
var speechMsgInput = document.getElementById('speech-msg');

// Get the voice select element.
var voiceSelect = document.getElementById('voice');

// Get the attribute controls.
var volumeInput = document.getElementById('volume');
var rateInput = document.getElementById('rate');
var pitchInput = document.getElementById('pitch');


// Fetch the list of voices and populate the voice options.
function loadVoices() {
  // Fetch the available voices.
	var voices = speechSynthesis.getVoices();
  
  // Loop through each of the voices.
	voices.forEach(function(voice, i) {
    // Create a new option element.
		var option = document.createElement('option');
    
    // Set the options value and text.
		option.value = voice.name;
		option.innerHTML = voice.name;
		  
    // Add the option to the voice selector.
		voiceSelect.appendChild(option);
	});
}

// Execute loadVoices.
loadVoices();

// Chrome loads voices asynchronously.
window.speechSynthesis.onvoiceschanged = function(e) {
  loadVoices();
};


// Create a new utterance for the specified text and add it to
// the queue.
function speak(text) {
  // Create a new instance of SpeechSynthesisUtterance.
	var msg = new SpeechSynthesisUtterance();
  
  // Set the text.
	msg.text = text;
  
  // Set the attributes.
	msg.volume = parseFloat(volumeInput.value);
	msg.rate = parseFloat(rateInput.value);
	msg.pitch = parseFloat(pitchInput.value);
  
  // If a voice has been selected, find the voice and set the
  // utterance instance's voice attribute.
	if (voiceSelect.value) {
		msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == voiceSelect.value; })[0];
	}
  
  // Queue this utterance.
	window.speechSynthesis.speak(msg);
}


// Set up an event listener for when the 'speak' button is clicked.
button.addEventListener('click', function(e) {
	if (speechMsgInput.value.length > 0) {
		speak(speechMsgInput.value);
	}
});

这是我用来创建输入值/字段的 PHP 函数:

  <input type="hidden" name="speech-msg" id="speech-msg" x-webkit-speech value="<?php echo $thetext; ?>">
	<input type="hidden" name="formid" id="formid" value="<?php echo $formid;?>"
		<input type="hidden" name="voice" id="voice<?php echo $formid;?>" value="1">
		<input type="hidden" name="volume" id="volume<?php echo $formid;?>" value="1">
		<input type="hidden" name="rate" id="rate<?php echo $formid;?>" value="1">
		<input type="hidden"  name="pitch" id="pitch<?php echo $formid;?>" value="1">
	<button id="speak<?php echo $formid;?>" class="small fa fa-play">&nbsp;Listen</button>

$formid 变量是一个数值。每个 $formid 对应于一个单独的文本 block ，我想在按下按钮时朗读该文本 block 。

该过程适用于一个文本 block ($formid=1)，但添加第二个文本 block ($formid = 2) 会出现错误

TypeError: Constructor SpeechSynthesisUtterance requires 'new'

如何调整代码以允许多个单独的语音文本 block 实例？

(以上代码基于http://blog.teamtreehouse.com/getting-started-speech-synthesis-api)

谢谢(对代码片段格式表示歉意)。

Answer 1

我自己的答案:

事实证明我太想把事情复杂化了。我找到了更好的方法；它仅使用文本转语音功能的基础知识。以下代码基于这篇文章:

<script type="text/javascript">
function speakthis(msg) {
    var speechMessage = new SpeechSynthesisUtterance(msg);
    window.speechSynthesis.speak(speechMessage);
}
</script>
<p><?php speak_button('this is button one'); ?>&nbsp;this is button 1</p>
<p><?php speak_button('this is button two'); ?>&nbsp;this is button 2</p>
</body>
</html>

<?php 
function speak_button($msg) {
    ?>
<button onclick="speakthis('<?php echo $msg; ?>')" value="Click Me">
<?php
return;
}

speak_button()函数创建一个调用speakthis() JavaScript的按钮。您可以根据需要在页面上多次调用spoke_button()函数，让每个按钮“说出”不同的文本。

它使用 SpeechSyntehsisUtterance 的默认语音等参数。但它对于我的目的来说已经足够好了，而且听起来并不“机器人”。