🧩 Plasmo Developers•4mo ago

How to record the mic

How do you allow access to record from the microphone from the extention its self? do you require special permissions when i try to access using the web audio api i get a permission error

repos/TheDAO/vizier/.plasmo/static/popup.tsx
popup.tsx:65 Error accessing microphone: DOMException: Permission dismissed
startRecording    @    popup.tsx:65

repos/TheDAO/vizier/.plasmo/static/popup.tsx
popup.tsx:65 Error accessing microphone: DOMException: Permission dismissed
startRecording    @    popup.tsx:65

2 Replies

finalboss•4mo ago

import React, { useState } from "react"
import { AudioProcessor } from "~AudioProcessor"

function IndexPopup() {
  const [currentUrl, setCurrentUrl] = useState<string | null>()

  const getCurrentUrl = async () => {
    const tabs = await chrome.tabs.query({ active: true, currentWindow: true })
    setCurrentUrl(tabs[0].url)
  }

  return (
    <div style={{ padding: 16, width: 160, height: 200 }}>
      <h2>You are at</h2>
      {currentUrl}
      <button onClick={getCurrentUrl}>Get Current URL</button>
      <AudioProcessor />
    </div>
  )
}

export default IndexPopup

import React, { useState } from "react"
import { AudioProcessor } from "~AudioProcessor"

function IndexPopup() {
  const [currentUrl, setCurrentUrl] = useState<string | null>()

  const getCurrentUrl = async () => {
    const tabs = await chrome.tabs.query({ active: true, currentWindow: true })
    setCurrentUrl(tabs[0].url)
  }

  return (
    <div style={{ padding: 16, width: 160, height: 200 }}>
      <h2>You are at</h2>
      {currentUrl}
      <button onClick={getCurrentUrl}>Get Current URL</button>
      <AudioProcessor />
    </div>
  )
}

export default IndexPopup

import React, { useEffect, useRef, useState } from "react"

export const AudioProcessor = () => {
  const [isRecording, setIsRecording] = useState(false)
  const [error, setError] = useState(null)
  const audioContextRef = useRef(null)
  const mediaRecorderRef = useRef(null)

  useEffect(() => {
    if (!audioContextRef.current) {
      audioContextRef.current = new (window.AudioContext ||
        window.webkitAudioContext)()
    }
  }, [])

  const handleStartRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      const audioContext = audioContextRef.current
      const source = audioContext.createMediaStreamSource(stream)
      const processor = audioContext.createScriptProcessor(1024, 1, 1)

      source.connect(processor)
      processor.connect(audioContext.destination)

      processor.onaudioprocess = (e) => {
        const audioData = e.inputBuffer.getChannelData(0)
        console.log("Audio data:", audioData)
      }

      mediaRecorderRef.current = new MediaRecorder(stream)
      mediaRecorderRef.current.start()

      mediaRecorderRef.current.ondataavailable = (e) => {
        const audioBlob = new Blob([e.data], { type: "audio/wav" })
        console.log("Audio Blob:", audioBlob)
      }

      setIsRecording(true)
    } catch (err) {
      console.error("Error accessing microphone:", err)
      setError(
        "Permission to access microphone was denied. Please allow access and try again."
      )
    }
  }

  const handleStopRecording = () => {
    if (mediaRecorderRef.current) {
      mediaRecorderRef.current.stop()
    }
    setIsRecording(false)
  }

  return (
    <div>
      <button
        onClick={isRecording ? handleStopRecording : handleStartRecording}>
        {isRecording ? "Stop Recording" : "Start Recording"}
      </button>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  )
}

import React, { useEffect, useRef, useState } from "react"

export const AudioProcessor = () => {
  const [isRecording, setIsRecording] = useState(false)
  const [error, setError] = useState(null)
  const audioContextRef = useRef(null)
  const mediaRecorderRef = useRef(null)

  useEffect(() => {
    if (!audioContextRef.current) {
      audioContextRef.current = new (window.AudioContext ||
        window.webkitAudioContext)()
    }
  }, [])

  const handleStartRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      const audioContext = audioContextRef.current
      const source = audioContext.createMediaStreamSource(stream)
      const processor = audioContext.createScriptProcessor(1024, 1, 1)

      source.connect(processor)
      processor.connect(audioContext.destination)

      processor.onaudioprocess = (e) => {
        const audioData = e.inputBuffer.getChannelData(0)
        console.log("Audio data:", audioData)
      }

      mediaRecorderRef.current = new MediaRecorder(stream)
      mediaRecorderRef.current.start()

      mediaRecorderRef.current.ondataavailable = (e) => {
        const audioBlob = new Blob([e.data], { type: "audio/wav" })
        console.log("Audio Blob:", audioBlob)
      }

      setIsRecording(true)
    } catch (err) {
      console.error("Error accessing microphone:", err)
      setError(
        "Permission to access microphone was denied. Please allow access and try again."
      )
    }
  }

  const handleStopRecording = () => {
    if (mediaRecorderRef.current) {
      mediaRecorderRef.current.stop()
    }
    setIsRecording(false)
  }

  return (
    <div>
      <button
        onClick={isRecording ? handleStopRecording : handleStartRecording}>
        {isRecording ? "Stop Recording" : "Start Recording"}
      </button>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  )
}

Arcane•4mo ago

@finalboss has reached level 1. GG!

Gaming

Programming

How to record the mic