Javascript 使事件點擊和語音識別與多個按鈕一起工作

Question

所以我正在使用 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/

Answer 1

似乎在您的 HTML 中您多次使用 ID； ID 對於某個頁面或框架應該是唯一的。

然后在您的腳本中，識別對象和您的事件都無法正確獲取和分配值，因為他們嘗試訪問的 ID 已被多次聲明。

我所做的是；

1. 刪除所有 ID 以使用類

2. 添加一個全局var activeButton

3. 將談話事件綁定到整個文檔並在點擊.talk_button時觸發。

4. 單擊.talk_button ，將圍繞該按鈕設置上下文。 這是通過activeButton = $(this); . 您會注意到我使用了.parent() 、 .find()來查找該按鈕的上下文或容器中的元素。

在 jsfiddle 上運行演示。 使用起來很有趣，不知道瀏覽器上有一個現成的語音 api。

https://jsfiddle.net/1pvqx2am/2/