intron_ts_widget

v1.1.3

Published

2 months ago

This is a simple and customizable widget to handle audio transcription, with support for different widget positions on the screen.

Downloads

0High
0Medium
0Low

mwanginelson

Transcribe Widget

A versatile and easy-to-use widget for transcribing audio, compatible with various JavaScript environments and frameworks.

Transcribe Widget

Features

Cross-Platform Compatibility: Works seamlessly with Node.js, browsers, and various frameworks like React and Vue.js.
Multiple Module Support: Available in CommonJS, ES Modules, and UMD formats.
Easy Integration: Simple API to initialize and configure the widget.
Customizable UI: Options to customize button text and position.

Installation

Install the package via npm:

npm install intron_ts_widget

Usage

General Usage

Import the initTranscribe function and initialize the widget with your configuration options. Import the css files to style the component too

import { initTranscribe } from "intron_ts_widget";
import "intron_ts_widget/dist/output.css";

initTranscribe({
  apiKey: "your-api-key-here",
  parentElement: document.getElementById("transcription-widget"),
  buttonText: "Start",
  position: "top-right",
});

In React

import React, { useEffect } from "react";
import { initTranscribe } from "intron_ts_widget";
import "intron_ts_widget/dist/output.css";

function App() {
  useEffect(() => {
    const parentElement = document.getElementById("transcription-widget");
    initTranscribe({
      apiKey: "your-api-key-here",
      parentElement,
      buttonText: "Start",
      position: "top-right",
    });
  }, []);

  return <div id="transcription-widget"></div>;
}

export default App;

In Vue.js

<template>
  <div ref="transcriptionWidget"></div>
</template>

<script>
import { initTranscribe } from "intron_ts_widget";
import "intron_ts_widget/dist/output.css";

export default {
  mounted() {
    initTranscribe({
      apiKey: "your-api-key-here",
      parentElement: this.$refs.transcriptionWidget,
      buttonText: "Start",
      position: "top-right",
    });
  },
};
</script>

In Plain HTML/JavaScript

Include the UMD build via a <script> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Transcribe Widget Test</title>
    <!-- Replace with the correct path to your UMD build -->
    <script src="node_modules/intron_ts_widget/dist/intron_ts_widget.umd.js"></script>
    <!-- Import the css files -->
    <link
      rel="stylesheet"
      href="node_modules/intron_ts_widget/dist/output.css"
    />
  </head>
  <body>
    <div id="transcription-widget"></div>
    <script>
      const { initTranscribe } = TranscribeWidget;
      window.onload = function () {
        initTranscribe({
          apiKey: "your-api-key-here",
          parentElement: document.getElementById("transcription-widget"),
          buttonText: "Start",
          position: "top-right",
        });
      };
    </script>
  </body>
</html>

API

`initTranscribe(options)`

Initializes the transcribe widget with the specified options.

Parameters

options Object: Configuration options.
- apiKey string: Required. Your API key for authentication.
- parentElement HTMLElement: Required. The DOM element where the widget will be rendered.
- buttonText string: Optional. Text displayed on the start button. Default is 'Start'.
- position string: Optional. Position of the widget. Options are 'top-right', 'top-left', 'bottom-right', 'bottom-left'. Default is 'top-right'.

Example

initTranscribe({
  apiKey: "your-api-key-here",
  parentElement: document.getElementById("transcription-widget"),
  buttonText: "Start Transcribing",
  position: "bottom-left",
});

License

This project is licensed under the MIT License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme