SpeechSynthesisUtterance 语音文本的多个实例

Question

（已编辑：我自己想出了更简单的答案，贴在下面，希望对其他人有所帮助。）

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

这是我正在使用的 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 函数 values/fields:

  <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 对应一个单独的文本块，我希望在按下按钮时说出该文本块。

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

TypeError: Constructor SpeechSynthesisUtterance requires 'new'

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

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

谢谢（对代码片段格式表示歉意）。

Answer 1

我自己的答案：

原来我是想把事情复杂化太多了。我找到了更好的方法；它仅使用文本到语音功能的基础知识。以下代码基于此post：

<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。您可以根据需要在页面上多次调用 speak_button() 函数，每个按钮 'speaking' 不同的文本。

它使用 SpeechSyntehsisUtterance 的默认语音等参数。但这对我的目的来说已经足够好了，而且听起来不 'robotic'。

SpeechSynthesisUtterance 语音文本的多个实例

Multiple instances of SpeechSynthesisUtterance spoken text

javascript

text-to-speech