JavaScript使事件单击在多个位置起作用

问题描述 投票:0回答:1

因此,我正在使用webkitSpeechRecognition,它可以很好地工作,但是问题是我想同时在多个地方使用它,当我将其添加到页面的另一部分时,它无法正常工作。

这里是它自己工作:

var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;

//get languages
// https://gist.githubusercontent.com/onigetoc/d5dc63320c4d08633eb7b7daf6c1ddeb/raw/e9c3da4a40db8edf4992db9219526617da811c4c/lang.json
$.get("//raw.githubusercontent.com/the-creature/language-json/master/data.json", function(data) {
  var cList = $('#language');
  var data = $.parseJSON(data);

  $.each(data, function(i) {
    var option = $('<option/>')
      .attr('value', data[i].code)
      .html(data[i].name)
      .appendTo(cList);
  });

  var userLang = navigator.language || navigator.userLanguage;
  $("#language").val(userLang);

});

// Speech Recognition
if (!('webkitSpeechRecognition' in window)) {
  message.innerHTML = 'Web Speech API is not supported by this browser. Upgrade to <a href="//www.google.com/chrome">Chrome</a> version 25 or later.';
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() {
    recognizing = true;
    message.innerHTML = 'Speak now.';
    talk_button.innerHTML = 'Listen';
  };

  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;
        vc_search(final_transcript);
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_span.innerHTML = final_transcript;
    interim_span.innerHTML = interim_transcript;
  };

  recognition.onend = function() {

    recognizing = false;
    if (ignore_onend) {
      return;
    }
    speechMyText(final_transcript);
    if (!final_transcript) {
      message.innerHTML = 'Click "Talk" and begin speaking.';
      talk_button.innerHTML = 'Talk';
      return;
    }
  };

  recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
      message.innerHTML = 'No speech was detected.';
      ignore_onend = true;
    }
    if (event.error == 'audio-capture') {
      message.innerHTML = 'No microphone was found. Ensure that a microphone is installed.';
      ignore_onend = true;
    }
    if (event.error == 'not-allowed') {
      if (event.timeStamp - start_timestamp < 100) {
        message.innerHTML = 'Permission to use microphone is blocked. To change, go to chrome://settings/contentExceptions#media-stream';
      } else {
        message.innerHTML = 'Permission to use microphone was denied.';
      }
      ignore_onend = true;
    }
  };

}

function talkWithApp(event) {
  if (recognizing) {
    recognition.stop();
    message.innerHTML = 'Click "Talk" and begin speaking.';
    talk_button.innerHTML = 'Talk';
    return;
  }
  final_transcript = '';
  recognition.lang = language.value;
  recognition.start();
  ignore_onend = false;
  final_span.innerHTML = '';
  interim_span.innerHTML = '';
  message.innerHTML = 'Click the "Allow" button above to enable your microphone.';
  start_timestamp = event.timeStamp;
}

// Speech Synthesis
function speechMyText(textToSpeech) {
  var u = new SpeechSynthesisUtterance();
  u.text = textToSpeech;
  u.lang = language.value;
  u.rate = 1.0;
  u.onend = function(event) {}
  speechSynthesis.speak(u);
}
.message {
    color:#999;
    padding: 1em 0;
}
.todo, .response {
    min-height:50px;
    background-color: #fff;
    margin-bottom: 0.5em;
    padding: 1px;
    color:#555;
    -webkit-box-shadow: 0 0px 3px #BDBDBD;
    box-shadow: 0 0px 3px #BDBDBD;
    transition: all 0.3s ease-in-out;
}
<div class="container">
  <div id="message" class="message">Click "Talk" and begin speaking.</div>
  <div class="todo"> <span id="final_span" class="final"></span>
    <span id="interim_span" class="interim"></span>
  </div>
  <div class="controls">
    <button id="talk_button" type="button" class="btn btn-default" onclick="talkWithApp(event)">Talk</button>
    
    <select id="language" class="select">
      <option selected="selected">Select Your Language</option>
    </select>
  </div>
</div>

这里是同一页中多次运行:

var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;

//get languages
// https://gist.githubusercontent.com/onigetoc/d5dc63320c4d08633eb7b7daf6c1ddeb/raw/e9c3da4a40db8edf4992db9219526617da811c4c/lang.json
$.get("//raw.githubusercontent.com/the-creature/language-json/master/data.json", function(data) {
  var cList = $('#language');
  var data = $.parseJSON(data);

  $.each(data, function(i) {
    var option = $('<option/>')
      .attr('value', data[i].code)
      .html(data[i].name)
      .appendTo(cList);
  });

  var userLang = navigator.language || navigator.userLanguage;
  $("#language").val(userLang);

});

// Speech Recognition
if (!('webkitSpeechRecognition' in window)) {
  message.innerHTML = 'Web Speech API is not supported by this browser. Upgrade to <a href="//www.google.com/chrome">Chrome</a> version 25 or later.';
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() {
    recognizing = true;
    message.innerHTML = 'Speak now.';
    talk_button.innerHTML = 'Listen';
  };

  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;
        vc_search(final_transcript);
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_span.innerHTML = final_transcript;
    interim_span.innerHTML = interim_transcript;
  };

  recognition.onend = function() {

    recognizing = false;
    if (ignore_onend) {
      return;
    }
    speechMyText(final_transcript);
    if (!final_transcript) {
      message.innerHTML = 'Click "Talk" and begin speaking.';
      talk_button.innerHTML = 'Talk';
      return;
    }
  };

  recognition.onerror = function(event) {
    if (event.error == 'no-speech') {
      message.innerHTML = 'No speech was detected.';
      ignore_onend = true;
    }
    if (event.error == 'audio-capture') {
      message.innerHTML = 'No microphone was found. Ensure that a microphone is installed.';
      ignore_onend = true;
    }
    if (event.error == 'not-allowed') {
      if (event.timeStamp - start_timestamp < 100) {
        message.innerHTML = 'Permission to use microphone is blocked. To change, go to chrome://settings/contentExceptions#media-stream';
      } else {
        message.innerHTML = 'Permission to use microphone was denied.';
      }
      ignore_onend = true;
    }
  };

}

function talkWithApp(event) {
  if (recognizing) {
    recognition.stop();
    message.innerHTML = 'Click "Talk" and begin speaking.';
    talk_button.innerHTML = 'Talk';
    return;
  }
  final_transcript = '';
  recognition.lang = language.value;
  recognition.start();
  ignore_onend = false;
  final_span.innerHTML = '';
  interim_span.innerHTML = '';
  message.innerHTML = 'Click the "Allow" button above to enable your microphone.';
  start_timestamp = event.timeStamp;
}

// Speech Synthesis
function speechMyText(textToSpeech) {
  var u = new SpeechSynthesisUtterance();
  u.text = textToSpeech;
  u.lang = language.value;
  u.rate = 1.0;
  u.onend = function(event) {}
  speechSynthesis.speak(u);
}
.message {
    color:#999;
    padding: 1em 0;
}
.todo, .response {
    min-height:50px;
    background-color: #fff;
    margin-bottom: 0.5em;
    padding: 1px;
    color:#555;
    -webkit-box-shadow: 0 0px 3px #BDBDBD;
    box-shadow: 0 0px 3px #BDBDBD;
    transition: all 0.3s ease-in-out;
}
<div class="container">
  <div id="message" class="message">Click "Talk" and begin speaking.</div>
  <div class="todo"> <span id="final_span" class="final"></span>
    <span id="interim_span" class="interim"></span>
  </div>
  <div class="controls">
    <button id="talk_button" type="button" class="btn btn-default" onclick="talkWithApp(event)">Talk</button>
    
    <select id="language" class="select">
      <option selected="selected">Select Your Language</option>
    </select>
  </div>
</div>

<div class="container">
  <div id="message" class="message">Click "Talk" and begin speaking.</div>
  <div class="todo"> <span id="final_span" class="final"></span>
    <span id="interim_span" class="interim"></span>
  </div>
  <div class="controls">
    <button id="talk_button" type="button" class="btn btn-default" onclick="talkWithApp(event)">Talk</button>
    
    <select id="language" class="select">
      <option selected="selected">Select Your Language</option>
    </select>
  </div>
</div>

如您所见,它在多次运行时都无法正常工作。我如何才能做到这一点,使其仅使用单击的部分?但仍然可以在页面上的多个位置使用。

这是两种不同的方式:

https://jsfiddle.net/k5cm8ypg/

https://jsfiddle.net/ygpbfLso/1/

javascript jquery html
1个回答
0
投票

似乎您的HTML中多次使用了ID; ID对于特定页面或框架应该是唯一的。

© www.soinside.com 2019 - 2024. All rights reserved.