use wavesurfer, extend class, improve front

2025-12-20 20:29:06 +00:00 · 2023-07-19 01:44:36 -05:00
parent 68899bd9bf
commit acaaec0c40
8 changed files with 170 additions and 132 deletions
--- a/app/components/CustomRecordPlugin.js
+++ b/app/components/CustomRecordPlugin.js
@@ -0,0 +1,44 @@
+// Override the startRecording method so we can pass the desired stream
+// Checkout: https://github.com/katspaugh/wavesurfer.js/blob/fa2bcfe/src/plugins/record.ts
+
+import RecordPlugin from "wavesurfer.js/dist/plugins/record"
+
+const MIME_TYPES = ['audio/webm', 'audio/wav', 'audio/mpeg', 'audio/mp4', 'audio/mp3']
+const findSupportedMimeType = () => MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType))
+
+class CustomRecordPlugin extends RecordPlugin {
+  static create(options) {
+    return new CustomRecordPlugin(options || {})
+  }
+  startRecording(stream) {
+    this.preventInteraction()
+    this.cleanUp()
+
+    const onStop = this.render(stream)
+    const mediaRecorder = new MediaRecorder(stream, {
+      mimeType: this.options.mimeType || findSupportedMimeType(),
+      audioBitsPerSecond: this.options.audioBitsPerSecond,
+    })
+    const recordedChunks = []
+
+    mediaRecorder.addEventListener('dataavailable', (event) => {
+      if (event.data.size > 0) {
+        recordedChunks.push(event.data)
+      }
+    })
+
+    mediaRecorder.addEventListener('stop', () => {
+      onStop()
+      this.loadBlob(recordedChunks, mediaRecorder.mimeType)
+      this.emit('stopRecording')
+    })
+
+    mediaRecorder.start()
+
+    this.emit('startRecording')
+
+    this.mediaRecorder = mediaRecorder
+  }
+}
+
+export default CustomRecordPlugin;
--- a/app/components/audioVisualizer.js
+++ b/app/components/audioVisualizer.js
@@ -1,63 +0,0 @@
-import React, { useRef, useEffect } from "react";
-
-function AudioVisualizer(props) {
-  const canvasRef = useRef(null);
-
-  useEffect(() => {
-    let animationFrameId;
-
-    const canvas = canvasRef.current;
-    const context = canvas.getContext("2d");
-    const analyser = new AnalyserNode(new AudioContext());
-
-    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
-      const audioContext = new (window.AudioContext ||
-        window.webkitAudioContext)();
-      const source = audioContext.createMediaStreamSource(stream);
-      const analyser = audioContext.createAnalyser();
-      analyser.fftSize = 2048;
-      source.connect(analyser);
-
-      const bufferLength = analyser.frequencyBinCount;
-      const dataArray = new Uint8Array(bufferLength);
-      const barWidth = (canvas.width / bufferLength) * 2.5;
-      let barHeight;
-      let x = 0;
-
-      function renderFrame() {
-        x = 0;
-        analyser.getByteFrequencyData(dataArray);
-        context.fillStyle = "#000";
-        context.fillRect(0, 0, canvas.width, canvas.height);
-
-        for (let i = 0; i < bufferLength; i++) {
-          barHeight = dataArray[i];
-
-          const red = 255;
-          const green = 250 * (i / bufferLength);
-          const blue = barHeight + 25 * (i / bufferLength);
-
-          context.fillStyle = `rgb(${red},${green},${blue})`;
-          context.fillRect(
-            x,
-            canvas.height - barHeight / 2,
-            barWidth,
-            barHeight / 2,
-          );
-
-          x += barWidth + 1;
-        }
-        animationFrameId = requestAnimationFrame(renderFrame);
-      }
-      renderFrame();
-    });
-
-    return () => cancelAnimationFrame(animationFrameId);
-  }, []);
-
-  return (
-    <canvas className="w-full h-16" ref={canvasRef} />
-  );
-}
-
-export default AudioVisualizer;
--- a/app/components/record.js
+++ b/app/components/record.js
@@ -1,36 +1,106 @@
-import AudioVisualizer from "./audioVisualizer.js";
+import React, { useRef, useEffect, useState } from "react";
+
+import WaveSurfer from "wavesurfer.js";
+
+import Dropdown from 'react-dropdown'
+import 'react-dropdown/style.css'
+
+import CustomRecordPlugin from './CustomRecordPlugin'
+

 export default function Recorder(props) {
-  let mediaRecorder = null; // mediaRecorder instance
+  const waveformRef = useRef()
+  const [wavesurfer, setWavesurfer] = useState(null)
+  const [record, setRecord] = useState(null)
+  const [isRecording, setIsRecording] = useState(false)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [deviceId, setDeviceId] = useState(null)
+  const [ddOptions, setDdOptions] = useState([])

-  const startRecording = () => {
-    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
-      mediaRecorder = new MediaRecorder(stream);
-      mediaRecorder.start();
-      props.onRecord(true);
-    });
-  };
+  useEffect(() => {
+    document.getElementById('play-btn').disabled = true

-  const stopRecording = () => {
-    if (mediaRecorder) {
-      mediaRecorder.stop();
-      props.onRecord(false);
+    navigator.mediaDevices.enumerateDevices().then(devices => {
+      const audioDevices = devices
+        .filter(d => d.kind === 'audioinput')
+        .map(d => ({value: d.deviceId, label: d.label}))
+      
+      if (audioDevices.length < 1) return console.log("no audio input devices")
+
+      setDdOptions(audioDevices)
+      setDeviceId(audioDevices[0].value)
+    })
+
+    if(waveformRef.current) {
+      const _wavesurfer = WaveSurfer.create({
+        container: waveformRef.current,
+        waveColor: "#333",
+        progressColor: "#0178FF",
+        cursorColor: "OrangeRed",
+        hideScrollbar: true,
+        autoCenter: true,
+        barWidth: 2,
+      })
+      const wsWrapper = _wavesurfer.getWrapper()
+      wsWrapper.style.cursor = 'pointer'
+      wsWrapper.style.backgroundColor = 'lightgray'
+      wsWrapper.style.borderRadius = '15px'
+
+      _wavesurfer.on('play', () => {
+        setIsPlaying(true)
+      })
+      _wavesurfer.on('pause', () => {
+        setIsPlaying(false)
+      })
+
+      setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create()))
+      setWavesurfer(_wavesurfer)
+      return () => {
+        _wavesurfer.destroy()
+        setIsRecording(false)
+        setIsPlaying(false)
+      }
    }
-  };
+  }, [])
+
+  const handleRecClick = async () => {
+    if (!record) return console.log("no record")
+
+    if(record?.isRecording()) {
+      record.stopRecording()
+      setIsRecording(false)
+      document.getElementById('play-btn').disabled = false
+    } else {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId } })
+      await record.startRecording(stream)
+      props.setStream(stream)
+      setIsRecording(true)
+    }
+  }
+
+  const handlePlayClick = () => {
+    wavesurfer?.playPause()
+  }
+
+  const handleDropdownChange = (e) => {
+    setDeviceId(e.value)
+  }

  return (
-      <div className="flex flex-col items-center justify-center">
-        {props.isRecording && <AudioVisualizer />}
-
-        {props.isRecording ? (
-          <button onClick={stopRecording} data-color="red">
-            Stop
-          </button>
-        ) : (
-          <button onClick={startRecording} data-color="blue">
-            Record
-          </button>
-        )}
+    <div className="flex flex-col items-center justify-center max-w-[90vw] w-full">
+      <div className="flex my-2 mx-auto">
+        <Dropdown options={ddOptions} onChange={handleDropdownChange} value={ddOptions[0]} />
+        &nbsp;
+        <button onClick={handleRecClick} data-color={isRecording ? "red" : "blue"}>
+          {isRecording ? "Stop" : "Record"}
+        </button>
+        &nbsp;
+        <button id="play-btn" onClick={handlePlayClick} data-color={isPlaying ? "orange" : "green"}>
+          {isPlaying ? "Pause" : "Play"}
+        </button>
      </div>
-  );
+      <div ref={waveformRef} className="w-full"></div>
+      {/* TODO: Download audio <a> tag */}
+    </div>
+  )
 }
--- a/app/globals.css
+++ b/app/globals.css
@@ -11,8 +11,8 @@
@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background-start-rgb: 32, 32, 32;
+    --background-end-rgb: 32, 32, 32;
  }
 }

--- a/app/page.js
+++ b/app/page.js
@@ -1,39 +1,16 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Recorder from "./components/record.js";
 import { Dashboard } from "./components/dashboard.js";
 import useWebRTC from "./components/webrtc.js";
 import "../public/button.css";

 const App = () => {
-  const [isRecording, setIsRecording] = useState(false);
-  const [splashScreen, setSplashScreen] = useState(true);
-
-  const handleRecord = (recording) => {
-    console.log("handleRecord", recording);
-
-    setIsRecording(recording);
-    setSplashScreen(false);
-
-    if (recording) {
-      navigator.mediaDevices
-        .getUserMedia({ audio: true })
-        .then(setStream)
-        .catch((err) => console.error(err));
-    } else if (!recording) {
-      if (stream) {
-        const tracks = stream.getTracks();
-        tracks.forEach((track) => track.stop());
-        setStream(null);
-      }
-
-      setIsRecording(false);
-    }
-  };
-
  const [stream, setStream] = useState(null);
+
+  // This is where you'd send the stream and receive the data from the server.
+  // transcription, summary, etc
  const serverData = useWebRTC(stream);
-  console.log(serverData);

  return (
    <div className="flex flex-col items-center h-[100svh]">
@@ -42,17 +19,8 @@ const App = () => {
        <p className="text-gray-500">Capture The Signal, Not The Noise</p>
      </div>

-      <Recorder
-        isRecording={isRecording}
-        onRecord={(recording) => handleRecord(recording)}
-      />
-
-      {!splashScreen && (
-        <Dashboard
-          isRecording={isRecording}
-          onRecord={(recording) => handleRecord(recording)}
-        />
-      )}
+      <Recorder setStream={setStream}/>
+      <Dashboard serverData={serverData} />

      <footer className="w-full bg-gray-800 text-center py-4 mt-auto text-white">
        Reflector © 2023 Monadical
--- a/package.json
+++ b/package.json
@@ -15,9 +15,11 @@
    "postcss": "8.4.25",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-dropdown": "^1.11.0",
    "simple-peer": "^9.11.1",
    "supports-color": "^9.4.0",
-    "tailwindcss": "^3.3.2"
+    "tailwindcss": "^3.3.2",
+    "wavesurfer.js": "^7.0.3"
  },
  "main": "index.js",
  "repository": "https://github.com/Monadical-SAS/reflector-ui.git",
--- a/public/button.css
+++ b/public/button.css
@@ -45,7 +45,7 @@ button.block {
 input[type="button"][disabled],
 button[disabled] {
  border-color: #ccc;
-  background-color: #eee;
+  background: #b8b8b8 !important;
  cursor: not-allowed;
 }

--- a/yarn.lock
+++ b/yarn.lock
@@ -232,6 +232,11 @@ chokidar@^3.5.3:
  optionalDependencies:
    fsevents "~2.3.2"

+classnames@^2.2.3:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 client-only@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
@@ -674,6 +679,13 @@ react-dom@^18.2.0:
    loose-envify "^1.1.0"
    scheduler "^0.23.0"

+react-dropdown@^1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/react-dropdown/-/react-dropdown-1.11.0.tgz#b9576de17efd28e5684d101b3f58dfe784af242c"
+  integrity sha512-E2UWetRPxNdIhQahXw6b984ME7WmcgDj9AEAjrtS/oyLCFVo+2qkCfcS06C22JR0Zj+YLnygwv0Ozf6VKKDq7g==
+  dependencies:
+    classnames "^2.2.3"
+
 react@^18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -877,6 +889,11 @@ watchpack@2.4.0:
    glob-to-regexp "^0.4.1"
    graceful-fs "^4.1.2"

+wavesurfer.js@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/wavesurfer.js/-/wavesurfer.js-7.0.3.tgz#d3e0b07056c08d43db19d4950d2de68681f48606"
+  integrity sha512-gJ3P+Bd3Q4E8qETjjg0pneaVqm2J7jegG2Cc6vqEF5YDDKQ3m8sKsvVfgVhJkacKkO9jFAGDu58Hw4zLr7xD0A==
+
 wrappy@1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"