Xây dựng giao diện người dùng được kiểm soát bằng giọng nói

 & lt; liên kết href = "https://fonts.geogleapis.com/cs?family=noto+serif" rel = "stylesheet" & gt;
& lt; link rel = "stylesheet" href = "css / style.css" & gt; 

 & lt; div id = "wrapper" & gt;
& lt; span id = "Lớp" không được hỗ trợ = "Hỗ trợ ẩn" & gt; API lời nói không được hỗ trợ & lt; / span & gt;
& lt; h2 & gt; thông điệp của bạn: & lt; / h2 & gt; 

 & lt; div id = "typeOfinput" & gt;
& lt; span & gt; kết quả: & lt; / span & gt;
& lt; nhãn & gt;
& lt; loại đầu vào = tên vô tuyến = giá trị loại nhận dạng = cuối cùng & gt; Bài phát biểu cuối cùng & lt; / nhãn & gt; 

 & lt; nhãn & gt;
& lt; loại đầu vào = tên radio = giá trị loại nhận dạng = kiểm tra tạm thời & gt; Khi bạn nói & lt; / nhãn & gt;
& lt; / div & gt; 

 & lt; textarea id = "phiên mã" readonly & gt;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; nút id = "xóa tất cả" lớp = "nút" & gt; xóa văn bản & lt; / nút & gt; 

& lt; div class = "nút-wrapper" & gt;
    & lt; div id = "speechbutton" class = "start" & gt; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "log" & gt; nhấp để bắt đầu nói & lt; / div & gt;
& lt; / div & gt; 

 & lt; script & gt;
var phiên mã = ​​document.getelementById ('phiên mã');
var log = document.getelementById ('log');
& lt; / script & gt; 

 var start = document.getelementbyId ('speechbutton');
var clear = document.getelementbyId ('rõ ràng tất cả');
var nói = sai; 

 window.speechrecognition = window.speechrecognit ||
window.webkitspeechrecogn | |
vô giá trị;
if (window.speechrecognition === null) {
tài liệu.getelementbyId ('không được hỗ trợ'). ClassList.Remove ('ẩn');
start. classlist.add ('ẩn');
} other {

 var advice = cửa sổ mới.
Nhận dạng giọng nói();
nhận dạng. Liên tục = Đúng;
advice.onresult = hàm (sự kiện) {
phiên mã.TextContent = '';
cho (var i = event.resultindex; i & lt; sự kiện.
kết quả.length; I ++) {

 if (event.results [i] .isfinal) {
phiên mã.TextContent = event.results [i] 
 .transcript;
} other {
phiên mã.TextContent + = event.results [i] 
 .transcript;
Không thể
Không thể
}; 

 adioizer.onerror = hàm (sự kiện) {
log.innerhtml = 'Lỗi nhận dạng:' +
sự kiện.message + '& lt; br / & gt;' + log.innerhtml;
}; 

 start.addeventlistener ('nhấp', hàm () {
Nếu (! Nói) {
nói = đúng;
start. classlist.Toggle ('stop');
advice.interimresults = tài liệu.
QuerySelector ('đầu vào [tên = "nhận dạng
"Loại"] [Giá trị = "tạm thời"] '). Đã kiểm tra; 

 thử {
advice.start ();
log.innerhtml = 'Bắt ​​đầu nói ngay bây giờ
& lt; br / & gt; nhấp để dừng ';
} bắt (ví dụ) {
log.innerhtml = 'Lỗi nhận dạng:
& lt; br / & gt; ' + Ex.Message;
} 

} other {
advice.stop ();
start. classlist.Toggle ('stop');
log.innerhtml = 'Nhận dạng dừng lại
& lt; br / & gt; bấm để nói ';
Nói = Sai;
Không thể
}); 

 Clear.addeventlistener ('nhấp', hàm () {phiên mã.TextContent = '';
});
} 

 & lt; H1 & GT; Đánh giá sản phẩm & LT; / H1 & GT;
& lt; div id = "đánh giá" & gt; & lt; / div & gt; 

 & lt; nút id = "Gửi" class = "nút" & gt; gửi đánh giá & lt; / nút & gt; 

 var Gửi = document.getelementbyId ('gửi');
var Đánh giá = document.getelementById ('đánh giá'); 

 Gửi.addeventlistener ('nhấp', hàm () {
Đặt p = document.createase ('p');
var textnode = document.creatTextNode
(phiên mã.Value);
p.appendchild (Textnode);
Xem lại.appendchild (p);
Hãy để hôm nay = ngày mới ();
hãy để s = document.createase ('nhỏ'); 

 Textnode = document.creatTextNode (hôm nay);
s.appendchild (textnode);
Đánh giá.appendchild (s);
hãy để Hr = document.createase ('hr');
Xem lại.appendchild (HR);
phiên mã.TextContent = '';
}); 

Cách - Các bài báo phổ biến nhất

21 bước để JavaScript siêu tốc độ

Cách Sep 12, 2025

[số 8] (Tín dụng hình ảnh: pexels.com) Thoạt nhìn, xử lý song song nghe có vẻ như một lời mời ..

---

Giải quyết tranh chân dung với dầu

Cách Sep 12, 2025

[số 8] Hội thảo này là về việc tạo ra một bức tranh sơn dầu chân dung với ý nghĩa. Cũng về ý tưởn..

---

14 mẹo quy trình làm việc Zbrush

Cách Sep 12, 2025

[số 8] Tất cả các nghệ sĩ có quy trình làm việc độc đáo của riêng họ khi tạo nghệ thuật 3D trong Zb..

---

10 mẹo để thành thạo ứng dụng Ảnh của Apple

Cách Sep 12, 2025

[số 8] Ứng dụng hình ảnh MacOS bắt đầu cuộc sống như iPhoto: một ứng dụng tiêu dùng để quản lý c�..

---

Tạo khung kiểu trong Photoshop

Cách Sep 12, 2025

[số 8] Trang 1/2: trang 1 trang 1 Trang..

---

Xây dựng các thành phần đáp ứng có thể mở rộng

Cách Sep 12, 2025

[số 8] Bất cứ khi nào chúng ta nói về việc xây dựng các trang web có thể duy trì và có thể mở rộng, c..

---

Tạo môi trường trò chơi trong Unreal Engine 4

Cách Sep 12, 2025

[số 8] Sử dụng Project 4 Project của tôi, điểm dừng cuối cùng như một ví dụ, tôi muốn hiển thị cho b..

---

15 mẹo để tối ưu hóa thiết bị chéo

Cách Sep 12, 2025

[số 8] Thiết kế cho tất cả các thiết bị! Anna Dahlström. sẽ nói về t�..

---

Thể loại

• AI & Machine Learning
• Airpods
• Amazon
• Amazon Alexa & Amazon Echo
• Amazon Alexa & Amazon Echo
• Amazon Fire TV
• Video Prime Của Amazon
• Android
• Điện Thoại & Máy Tính Bảng Android
• Điện Thoại & Máy Tính Bảng Android
• TV Android
• Apple
• Apple App Store
• Homekit & Homepod Apple
• Táo Nhạc
• Apple TV
• Apple Watch
• Ứng Dụng & Ứng Dụng Web
• Ứng Dụng & Ứng Dụng Web
• Âm Thanh
• Chromebook & Chrome OS
• Chromebook & Chrome OS
• Chromecast
• Cloud & Internet
• Đám Mây & Internet
• Đám Mây Và Internet
• Phần Cứng Máy Tính
• Lịch Sử Máy Tính
• Cắt Dây & Truyền Phát
• Cắt Dây Và Phát Trực Tuyến
• Discord
• Disney +
• DIY
• Xe điện
• EREADERS
• Những điều Cần Thiết
• Người Giải Thích
• Facebook
• Chơi Game
• Chung
• Gmail
• Google
• Google Assistant & Google Nest
• Google Assistant & Google Nest
• Google Chrome
• Google Docs
• Google Drive
• Google Maps
• Google Play Store
• Google Tấm
• Google Slide
• Google TV
• Phần Cứng
• HBO Max
• Cách
• Hulu
• Instagram
• Tiếng Lóng Internet & Viết Tắt
• IPhone Và IPad
• Kindle
• Linux
• Mac
• Bảo Trì Và Tối ưu Hóa
• Microsoft Edge
• Microsoft Excel
• Microsoft Office
• Microsoft Outlook
• Microsoft PowerPoint
• ​​Các đội Microsoft
• Microsoft Word
• Mozilla Firefox
• Netflix
• Nintendo Switch
• Paramount +
• Chơi Game PC
• Peacock
• Nhiếp ảnh
• Photoshop
• Playstation
• Quyền Riêng Tư & Bảo Mật
• Quyền Riêng Tư & Bảo Mật
• Quyền Riêng Tư Và Bảo Mật
• Roundup Sản Phẩm
• Lập Trình
• Raspberry Pi
• Reddit
• Roku
• Safari
• Samsung Điện Thoại & Máy Tính Bảng
• Điện Thoại & Máy Tính Bảng Samsung
• Slack
• Nhà Thông Minh
• Snapchat
• Phương Tiện Truyền Thông Xã Hội
• Không Gian
• Spotify
• Tinder
• Xử Lý Sự Cố
• TV
• Twitter
• Trò Chơi Video
• Thực Tế ảo
• VPN
• Trình Duyệt Web
• WhatsApp
• WiFi & Bộ định Tuyến
• WiFi & Bộ định Tuyến
• Windows
• Windows 10
• Windows 11
• Windows 7
• Xbox
• TV YouTube & YouTube
• YouTube & YouTube TV
• Thu Phóng
• Người Giải Thích