annyang实现浏览器识别语音命令的效果-html代码-BFW代码库

annyang实现浏览器识别语音命令的效果

代码语言：html

所属分类：其他

代码描述：annyang实现浏览器识别语音命令的效果，请在https下或localhost中运行，并允许使用麦克风

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.p-text {
  color: #fffffd;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.55rem;
  letter-spacing: 2px;
  line-height: 1.5;
  text-align: center;
  text-transform: lowercase;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.p-flex-hzt-center {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}

body {
  height: 100vh;
  background-color: hotpink;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.tooltip {
  width: 100%;
  position: absolute;
  bottom: 26px;
  left: 0;
  z-index: 90;
}
.tooltip:focus .tooltip__title, .tooltip:hover .tooltip__title {
  color: hotpink;
  text-transform: uppercase;
}
.tooltip:focus .tooltip__txt, .tooltip:hover .tooltip__txt {
  display: block;
  text-transform: none;
}
.tooltip__content {
  background-color: #000;
  line-height: 1.8;
  padding: 5px 11px 5px 13px;
}
.tooltip__txt {
  display: none;
}

.credit {
  width: 100%;
  position: absolute;
  bottom: 5px;
  left: 0;
}
.credit__link {
  color: rgba(255, 255, 253, 0.6);
  padding: 6px 15px 8px;
  text-decoration: none;
}
</style>

</head>
<body translate="no">
<div id="elastic-circles"></div>
<div class="tooltip p-flex-hzt-center">
<p class="tooltip__content p-text">
<span class="tooltip__title">在Chrome中与我说话</span><br>
<span class="tooltip__txt">
运行在https下或在localhost允许chrome使用麦克风<br>
<span class="tooltip__title">颜色</span><br>
blue / purple / pink<br>
<span class="tooltip__title">动作</span><br>
stop or wait / play or go
</span>
</p>
</div>

<script id="vertex" type="x-shader/x-vertex">
	void main() { gl_Position = vec4(position, 1.0); }
.........完整代码请登录后点击上方下载按钮下载查看