开发一个 Streamlit 录音组件

<template>
  <div class="button-container">
    <button @mousedown="startRecording" @mouseup="stopRecording" @mouseleave="stopRecording" class="red-round-button"></button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const mediaRecorder = ref<MediaRecorder | null>(null);
  const audioChunks = ref<Blob[]>([]);


async function startRecording() {
  if (!navigator.mediaDevices || !window.MediaRecorder) {
    alert('Media Devices API or MediaRecorder API not supported in this browser.');
    return;
  }

  const audioConstraints = {
    audio: {
      sampleRate: 16000,
      channelCount: 1,
      volume: 1.0
    }
  };

  try {
    const stream = await navigator.mediaDevices.getUserMedia(audioConstraints);
    mediaRecorder.value = new MediaRecorder(stream);
    audioChunks.value = [];

    mediaRecorder.value.ondataavailable = (event) => {
      audioChunks.value.push(event.data);
    };

    mediaRecorder.value.start();
  } catch (error) {
    console.error('Error accessing the microphone', error);
  }
}

function stopRecording() {
  if (mediaRecorder.value && mediaRecorder.value.state !== 'inactive') {
    mediaRecorder.value.stop();
    mediaRecorder.value.onstop = async () => {
      const audioBlob = new Blob(audioChunks.value, { type: 'audio/wav' });
      const audioUrl = URL.createObjectURL(audioBlob);
      const audio = new Audio(audioUrl);
      await audio.play();
    };
  }
}

onMounted(() => {
  // You can perform actions after the component has been mounted
});

onUnmounted(() => {
  // Perform cleanup tasks, such as stopping the media recorder if it's still active
  if (mediaRecorder.value) {
    mediaRecorder.value.stop();
  }
});
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* This assumes you want to center the button vertically in the viewport */
}

.red-round-button {
  background-color: red;
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 50%; /* This creates the round shape */
  cursor: pointer;
  outline: none;
  font-size: 16px;
  /* Adjust width and height to make the button round, they must be equal */
  width: 50px;
  height: 50px;
  /* Optional: Add some transition for interactions */
  transition: background-color 0.3s;
}

.red-round-button:hover {
  background-color: darkred;
}
</style>

<template>
  <div class="button-container">
    <button @mousedown="startRecording" @mouseup="stopRecording" @mouseleave="stopRecording" class="record-button" :style="dynamicStyles"></button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted , computed } from 'vue';
import { Streamlit } from "streamlit-component-lib"
import { useStreamlit } from "./streamlit"

const props = defineProps(['args'])

const dynamicStyles = computed(() => {
  return {
    width: props.args.width,
    height: props.args.height,
  };
});

useStreamlit();

const mediaRecorder = ref(null);
const audioChunks = ref([]);

async function startRecording() {
  if (!navigator.mediaDevices || !window.MediaRecorder) {
    alert('Media Devices API or MediaRecorder API not supported in this browser.');
    return;
  }

  try {
    const stream = await navigator.mediaDevices.getUserMedia({audio: true});
    mediaRecorder.value = new MediaRecorder(stream);
    audioChunks.value = [];

    mediaRecorder.value.ondataavailable = (event) => {
      audioChunks.value.push(event.data);
    };

    mediaRecorder.value.start();
  } catch (error) {
    console.error('Error accessing the microphone', error);
  }
}

function stopRecording() {
  if (mediaRecorder.value && mediaRecorder.value.state !== 'inactive') {
    mediaRecorder.value.stop();
    mediaRecorder.value.onstop = async function() {
      const audioBlob = new Blob(audioChunks.value, { type: 'audio/wav' });
      const reader = new FileReader();
      reader.onload = function(event) {
        if (event.target && event.target.result) {
          const dataUrl = event.target.result;
          const base64 = dataUrl.split(',')[1]; // Extract the base64 part
          Streamlit.setComponentValue(base64);
        } else {
          console.log('Failed to read Blob as base64');
        }
      };
      reader.readAsDataURL(audioBlob);
    };
    
  }
}

onMounted(() => {
  // You can perform actions after the component has been mounted
});

onUnmounted(() => {
  // Perform cleanup tasks, such as stopping the media recorder if it's still active
  if (mediaRecorder.value) {
    mediaRecorder.value.stop();
  }
});
</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* center the button vertically in the viewport */
}

.record-button {
  background-color: rgb(255, 100, 100);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 50%; /* This creates the round shape */
  cursor: pointer;
  outline: none;
  font-size: 16px;
  width: 80px;
  height: 80px;
  /* Optional: Add some transition for interactions */
  transition: background-color 0.3s;
}

.record-button:active {
  background-color: darkred;
}
</style>

import base64
import os
import streamlit.components.v1 as components

_RELEASE = True

if not _RELEASE:
    _component_func = components.declare_component(
        "record_button",
        url="http://localhost:5173",
    )
else:
    parent_dir = os.path.dirname(os.path.abspath(__file__))
    build_dir = os.path.join(parent_dir, "frontend/dist")
    _component_func = components.declare_component(
        "record_button",
        path=build_dir
    )


def record_button(size, key=None):
    component_value = _component_func(size=size, key=key, default=None)
    if component_value:
        component_value = base64.b64decode(component_value)
    return component_value

python3 -m build # 打包
python3 -m twine upload --repository testpypi dist/* # 上传