SpeechRecognition实现实时麦克风输入声音转文字效果代码
代码语言:html
所属分类:其他
代码描述:SpeechRecognition实现实时麦克风输入声音转文字效果代码
代码标签: SpeechRecognition 实时 麦克风 输入 声音 转 文字
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap"); body { margin: 0; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: "Quicksand", sans-serif; width: 100%; height: 100vh; background-color: #fafafa; overflow: hidden; } h3 { font-weight: 600; color: #666; font-size: 22px; } #accuracy { font-weight: 400; color: #777; font-size: 16px; } .output-container { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; border-radius: 15px; margin: 3rem; width: 40%; position: absolute; height: auto; box-shadow: 0 6px 6px 0 rgb(0 0 0 / 0%), 0 6px 6px -2px rgb(0 0 0 / 12%), 0 2px 10px 0 rgb(0 0 0 / 9%); } .output-container #output { text-align: center; padding: 2rem; } .button { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; color: #fff; background-color: #6cb1dd; border: none; margin: 3rem; padding: 15px; font-size: 18px; font-weight: 200; cursor: pointer; outline: none; letter-spacing: 1px; transition: box-shadow 0.5s ease; box-shadow: 0 6px 6px 0 rgb(0 0 0 / 0%), 0 6px 6px -2px rgb(0 0 0 / 12%), 0 2px 10px 0 rgb(0 0 0 / 9%); } .button:hover { box-shadow: none; } .pulse { background-color: #dd6a85e0; animation: PulseInOut 1.5s ease-in-out infinite; } @keyframes PulseInOut { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } </style> </head> <body> <div class="output-container"> <h3 id="output">点击下面的麦克风图标开始说话</h3> <p id="accuracy">你说的话将以文字的形式显示出来</p> <button class="button"> <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#fafafa"> <g> <rect fill=&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0