Rumah > Artikel > hujung hadapan web > Ketahui tentang pembantu maya dan pengecaman pertuturan dalam JavaScript
Untuk memahami pembantu maya dan pengecaman pertuturan dalam JavaScript, contoh kod khusus diperlukan
Dalam beberapa tahun kebelakangan ini, pembantu maya dan teknologi pengecaman pertuturan telah digunakan secara meluas dalam pelbagai bidang. Sebagai bahasa pengaturcaraan yang berkuasa, JavaScript juga boleh melaksanakan ciri ini melalui penggunaan perpustakaan dan API yang berkaitan.
Pembantu maya dilaksanakan dalam JavaScript menggunakan API Pertuturan Web. API Pertuturan Web ialah satu set API yang boleh melakukan pengecaman pertuturan dan sintesis pertuturan melalui JavaScript dalam pelayar web. Antaranya, pengecaman pertuturan boleh menukar suara pengguna kepada teks, manakala sintesis pertuturan boleh menukar teks kepada pertuturan. Berikut ialah contoh mudah:
<button id="startRecognition">开始语音识别</button> <script> // 获取按钮元素 var startRecognition = document.querySelector('#startRecognition'); // 创建SpeechRecognition对象 var recognition = new webkitSpeechRecognition(); recognition.lang = 'zh-CN'; // 设置语言为中文 // 绑定开始识别的事件 startRecognition.addEventListener('click', function() { recognition.start(); }); // 绑定识别结果返回的事件 recognition.addEventListener('result', function(event) { var result = event.results[0][0].transcript; console.log('识别结果:' + result); }); </script>
Kod di atas mencipta butang yang, apabila diklik, memulakan pengecaman pertuturan. Hasil pengecaman akan dikeluarkan melalui konsol. Dalam kod, elemen butang pertama kali diperoleh melalui kaedah querySelector
, kemudian objek webkitSpeechRecognition
dicipta dan bahasa ditetapkan kepada bahasa Cina. Seterusnya, acara mengklik butang dan mengembalikan hasil pengecaman terikat melalui pendengar acara. Apabila butang diklik, kaedah mula
dipanggil untuk memulakan pengecaman pertuturan. Selepas mendapat keputusan pengecaman, dapatkan hasil teks yang diiktiraf melalui event.results[0][0].transkrip
. querySelector
方法获取了按钮元素,然后创建了一个webkitSpeechRecognition
对象,并设置了语言为中文。接着,通过事件监听器绑定了点击按钮和识别结果返回的事件。当点击按钮时,调用start
方法开始语音识别。当获取到识别结果后,通过event.results[0][0].transcript
来获取识别的文本结果。
此外,还可以通过使用其他的库和框架来实现更复杂的虚拟助手功能。例如,使用Google的Dialogflow来建立对话模型,并通过JavaScript来实现与用户的交互。以下是一个简单的示例:
然后,我们可以使用JavaScript通过API来与Dialogflow进行交互:
<input type="text" id="input"> <button id="send">发送</button> <div id="output"></div> <script> // 获取输入框和按钮元素 var input = document.querySelector('#input'); var send = document.querySelector('#send'); var output = document.querySelector('#output'); // 绑定发送按钮的点击事件 send.addEventListener('click', function() { var message = input.value; output.innerHTML += '<p>用户:' + message + '</p>'; input.value = ''; // 发送用户的消息到Dialogflow sendMessageToDialogflow(message); }); // 向Dialogflow发送消息的函数 function sendMessageToDialogflow(message) { // 构建POST请求的参数 var params = { sessionId: 'your-session-id', queryInput: { text: { text: message, languageCode: 'zh-CN' } } }; // 发送请求到Dialogflow的API,获取回复 fetch('https://dialogflow.googleapis.com/v2/projects/your-project-id/agent/sessions/your-session-id:detectIntent', { method: 'POST', headers: { 'Authorization': 'Bearer your-access-token', 'Content-Type': 'application/json' }, body: JSON.stringify(params) }) .then(function(response) { return response.json(); }) .then(function(data) { // 解析回复的消息 var reply = data.queryResult.fulfillmentText; // 将回复显示在页面上 output.innerHTML += '<p>机器人:' + reply + '</p>'; }); } </script>
以上代码创建了一个包含输入框、发送按钮和输出框的简单对话界面。用户输入消息后,点击发送按钮,会通过sendMessageToDialogflow
rrreee
Kod di atas mencipta antara muka dialog ringkas yang mengandungi kotak input, butang hantar dan kotak output. Selepas pengguna memasukkan mesej dan mengklik butang hantar, mesej pengguna akan dihantar ke Dialogflow melalui fungsisendMessageToDialogflow
dan balasan akan diperolehi. Akhir sekali, paparkan balasan dalam kotak output. 🎜🎜Perlu diambil perhatian bahawa alamat API, parameter dan token kebenaran dalam contoh di atas perlu diganti dan dikonfigurasikan mengikut situasi sebenar. 🎜🎜Melalui contoh di atas, kita boleh belajar cara menggunakan JavaScript untuk melaksanakan pembantu maya dan fungsi pengecaman pertuturan. Sudah tentu, ini hanyalah contoh peringkat permulaan, dan aplikasi sebenar mungkin memerlukan logik dan pengalaman interaktif yang lebih kompleks. Walau bagaimanapun, melalui pembelajaran dan penerokaan berterusan, kami boleh menggunakan JavaScript untuk membina pembantu maya yang lebih pintar dan berkuasa. 🎜Atas ialah kandungan terperinci Ketahui tentang pembantu maya dan pengecaman pertuturan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!