shWave

KO | EN

gitlite — search

#hacktoberfest #typescript #llm #golang #rust #deep-learning #docker #java #windows #cli #security #pytorch #ios #open-source

(★ 14)

subtitles timeline and wave audio. 一个显示音频波形图并可编辑字幕的时间轴

shWave Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ShWave

![npm](https://img.shields.io/npm/v/shwave) ![NPM](https://img.shields.io/npm/l/shwave) ![npm](https://img.shields.io/npm/dt/shwave)

[![NPM](https://nodei.co/npm/shwave.png)](https://nodei.co/npm/shwave/)

## Introduction

> subtitles timeline and wave audio

![](https://raw.githubusercontent.com/Shirtiny/shWave/master/example.png)

Shwave is a subtitles timeline to help people build subtitles easily.

![](https://raw.githubusercontent.com/Shirtiny/shWave/master/example2.png)

It also support audio-only.

## Usage

`REACT`

```shell
npm i shwave -S
```

```jsx
import { ShWave } from "shwave";

<ShWave
  duration={15}
  backgroundColor={"#529393"}
  currentTime={currentTime}
  throttleWait={1}
  url={videoUrl}
  waveColor={"#fbf8f86b"}
  alterWaveColor={"#57e3e3"}
  waveScale={0.8}
  click={onWaveClick}
  contextmenu={onWaveContextmenu}
  subArray={subArray}
  onSubMove={onSubMove}
  onSubMoveError={onSubMoveError}
/>;
```

## Example

`REACT`

```jsx
import React, { Fragment, useState, useCallback } from "react";
/** @jsx jsx */
import { css, jsx } from "@emotion/core";
import ShWave from "./componets/shwave";
import VideoPlayer from "./componets/videoPlayer";

const handleVideoFile = useCallback(
    (e) => {
      URL.revokeObjectURL(url);
      const file = e.currentTarget.files[0];
      const videoUrl = URL.createObjectURL(file);
      setUrl(videoUrl);
      const videoRegx = /^video\/(mp4|x-(flv))+$/;
      const found = file.type.match(videoRegx);
      const videoType =
        found && found[2] ? found[2] + "Custom" : found ? found[1] : "";
      player.switchVideo({
        url: videoUrl,
        type: videoType,
      });
    },
    [url, setUrl, player]
  );

const contextmenu = useCallback(
    (time, event) => {
      if (!player) return;
      player.play();
      player.seek(time);
    },
    [player]
  );

const click = useCallback(
    (time, event) => {
      if (!player) return;
      player.pause();
      player.seek(time);
    },
    [player]
  );

const handleSubClick = useCallback((sub) => {
    console.log(sub);
  });

const handleSubMove = useCallback((originSub, translateSecond) => {
    const subs = [...subArray];
    const index = subs.indexOf(originSub);
    const sub = { ...subs[index] };
    sub.start += translateSecond;
    sub.end += translateSecond;
    subs[index] = sub;
    console.log("update subArray");
    setSubArray(subs);
  });

const handleSubMoveError = useCallback(() => {});

const handleDurationChange = useCallback((duration) => {
    setDuration(duration);
    //pause the video
  });

return (
    <Fragment>
      <div
        className="container"
        css={css`
          height: 600px;
          width: 600px;
        `}
      >
        <VideoPlayer
          url={url}
          player={player}
          setPlayer={setPlayer}
          setCurrentTime={setCurrentTime}
        />
        <input
          className="uploadVideo"
          type="file"
          name="file"
          onChange={handleVideoFile}
        />
        <input
          type="range"
          title={duration}
          value={duration}
          min="5"
          max="30"
          step="1"
          onChange={(e) => {
            handleDurationChange(Number(e.currentTarget.value));
          }}
        />
      </div>
      <div
        css={css`
          position: relative;
          height: 150px;
        `}
      >
        <ShWave
          duration={duration}
          backgroundColor="#529393"
          pointerColor="#ddd"
          pointerWidth={3}
          waveColor="#fbf8f86b"
          alterWaveColor="#57e3e3"
          waveScale={0.8}
          currentTime={currentTime}
          throttleWait={300}
          url={url}
          click={click}
          contextmenu={contextmenu}
          subArray={subArray}
          onSubClick={handleSubClick}
          onSubMove={handleSubMove}
          onSubMoveError={handleSubMoveError}
          ErrorWait={2000}
          ErrorColor="#f09b50d9"
          onSubResize={handleSubResize}
          subBlockClass="mySubBlockClass"
        />
      </div>
    </Fragment>
  );
};

export default App;
```

## build

```shell
yarn
# yarn start
yarn pro
```

shWave

shWave Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

shWave

shWave Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README