feat: 音声検知の実装例 (最初のコミット)

.gitignore

@@ -0,0 +1,80 @@
+### https://raw.github.com/github/gitignore/4a8e0a151becd5ccbb83e4aca6e6c195f3d506fd/Node.gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# FuseBox cache
+.fusebox/
+
+

README.md

@@ -0,0 +1,18 @@
+# Muze VAD
+
+- 音声検知
+  - 左右の音声を検知します
+
+## 前提条件
+
+- Yarn
+
+## 使い方
+
+```sh
+# 依存モジュールをインストール
+yarn
+# アプリを起動
+yarn next
+# http://localhost:3000 にアクセスする
+```

components/vad.jsx

@@ -0,0 +1,73 @@
+import { Component } from "react";
+import * as _VAD from "vad.js/lib/vad.js";
+
+export default class extends Component {
+  state = {
+    audioContext: new AudioContext(),
+    audioStream: null,
+    left: null,
+    right: null
+  };
+
+  componentDidMount() {
+    const setState = this.setState.bind(this);
+    const audioContext = this.state.audioContext;
+    const leftNode = audioContext.createGain();
+    const rightNode = audioContext.createGain();
+    const splitter = audioContext.createChannelSplitter(2);
+
+    splitter.connect(
+      leftNode,
+      0
+    );
+    splitter.connect(
+      rightNode,
+      1
+    );
+
+    const start = stream => {
+      setState({ audioStream: stream });
+      audioContext.createMediaStreamSource(stream).connect(splitter);
+
+      VAD.bind({})({
+        source: leftNode,
+        voice_stop() {
+          setState({ left: null });
+        },
+        voice_start() {
+          setState({ left: "喋り始めました" });
+        }
+      });
+
+      VAD.bind({})({
+        source: rightNode,
+        voice_stop() {
+          setState({ right: null });
+        },
+        voice_start() {
+          setState({ right: "喋り始めました" });
+        }
+      });
+    };
+
+    navigator.mediaDevices
+      .getUserMedia({ audio: { echoCancellation: false } }) // モノラル防ぐ
+      .then(start)
+      .catch(console.error);
+  }
+
+  componentWillUnmount() {
+    this.state.audioStream.getTracks().forEach(t => t.stop());
+  }
+
+  render() {
+    return (
+      <dl>
+        <dt>左</dt>
+        <dd>{this.state.left}</dd>
+        <dt>右</dt>
+        <dd>{this.state.right}</dd>
+      </dl>
+    );
+  }
+}

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "vad",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "next": "^7.0.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "vad.js": "kdavis-mozilla/vad.js"
+  }
+}

pages/index.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import dynamic from "next/dynamic";
+
+const VAD = dynamic(() => import("../components/vad"), { ssr: false });
+
+export default () => (
+  <div>
+    <VAD />
+  </div>
+);