2与语音api格式相同的按钮

Question

我需要使用同一个页面中的两个按钮来控制两个不同的文本区域，当我单击该按钮以启用您在文本区域中键入的麦克风时，需要使用语音api；当单击另一个按钮以启用其他文本区域中的麦克风类型时，通过调用我所观察到的语音API来使用或getElementsByClassName，以启用另一个文本区域中的麦克风类型，但到目前为止，我还没有证明这一点。

​

showInfo('info_start');
var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;
if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  start_button.style.display = 'inline-block';

  
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = false;
  recognition.lang = "es-BO";
  recognition.onstart = function() {
    recognizing = true;
    showInfo('info_speak_now');
    start_img.src = 'mic-animate.gif';
  };
  recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
      start_img.src = 'mic.gif';
      showInfo('info_no_speech');
      ignore_onend = true;
    }
    if (event.error == 'audio-capture') {
      start_img.src = 'mic.gif';
      showInfo('info_no_microphone');
      ignore_onend = true;
    }
    if (event.error == 'not-allowed') {
      if (event.timeStamp - start_timestamp < 100) {
        showInfo('info_blocked');
      } else {
        showInfo('info_denied');
      }
      ignore_onend = true;
    }
  };
  recognition.onend = function() {
    recognizing = false;
    if (ignore_onend) {
      return;
    }
    start_img.src = 'mic.gif';
    if (!final_transcript) {
      showInfo('info_start');
      return;
    }
    showInfo('');
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
      var range = document.createRange();
      range.selectNode(document.getElementById('final_span'));
      window.getSelection().addRange(range);
    }

  };
  recognition.onresult = function(event) {
    var interim_transcript = '';
    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = final_transcript;
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    if (final_transcript || interim_transcript) {
      showButtons('inline-block');
    }
  };
}
function upgrade() {
  start_button.style.visibility = 'hidden';

  showInfo('info_upgrade');
}
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
  return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
var first_char = /\S/;

function startButton2(event) {
  if (recognizing) {
    recognition.stop();
    return;
  }
  final_transcript = '';
  recognition.lang ="es-BO";
  recognition.start();
  ignore_onend = false;
  final_span.innerHTML = '';
  interim_span.innerHTML = '';
  start_img.src = 'mic-slash.gif';
  showInfo('info_allow');
  showButtons('none');
  start_timestamp = event.timeStamp;
}


function showInfo(s) {
  if (s) {
    for (var child = info.firstChild; child; child = child.nextSibling) {
      if (child.style) {
        child.style.display = child.id == s ? 'inline' : 'none';
      }
    }
    info.style.visibility = 'visible';
  } else {
    info.style.visibility = 'hidden';
  }
}
var current_style;



function showButtons(style) {
  if (style == current_style) {
    return;
  }
  current_style = style;

}

<div >
  <p>
  <button id="start_button" onclick="startButton(event)">
    <img id="start_img" src="mic.gif" alt="Start"></button>
    <textarea id="final_span" class="final"></textarea>
  <span id="interim_span" class="interim"></span>
  </p>
</div>
<a>---------------------------------------------------</a>
<div >
  <p>
  <button id="start_button" onclick="startButton(event)">
    <img id="start_img" src="mic.gif" alt="Start"></button>
    <textarea id="final_span" class="final"></textarea>
  <span id="interim_span" class="interim"></span>
  </p>
</div>

​

Answer 1

您需要将第二个按钮的onclick更改为startButton2(事件)，以调用第二个函数。

<div >
 <p>
  <button id="start_button" onclick="startButton(event)">
  <img id="start_img" src="mic.gif" alt="Start"></button>
  <textarea id="final_span" class="final"></textarea>
  <span id="interim_span" class="interim"></span>
 </p>
</div>
 <a>---------------------------------------------------</a>
<div >
 <p>
  <button id="start_button" onclick="startButton2(event)">
  <img id="start_img" src="mic.gif" alt="Start"></button>
  <textarea id="final_span" class="final"></textarea>
  <span id="interim_span" class="interim"></span>
 </p>
</div>