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); }
</script>
<script id="fragment" type="x-shader/x-vertex">
precision highp float;

uniform float u_anim;
uniform float u_color;
uniform vec2 u_resolution;
uniform float u_time;

void main() {
	vec2 st = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy;
	st += vec2(0.5); // Centerings

    float circle = distance(st, vec2(0.5)); // The dist from the pixel to the center
	float fr = 15.0;
	float anim = (sin(u_time*2.) + 1.2) + .35;
	float u_anim = u_anim == 1.0 ? u_anim : anim;
	float grad_anim = abs(sin(u_time/2.));  // Nice gradient anim to switch colors
	float u_color = u_color == 10.0 ? grad_anim : u_color;

	vec3 color = vec3(u_color, fract(circle*fr*u_anim), .71);
	gl_FragColor = vec4(color, 1.0);
}
</script>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.r118.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/annyang.min.js"></script>
<script>
/* 
 * ELASTIC CIRCLE HUES
 * Shader Exp XXXVII.........完整代码请登录后点击上方下载按钮下载查看