# MVoiceToText 语音转文字

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/voice-to-text/freepass)
- 平台：移动端
- 维护者：熊相超
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MVoiceToText]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Input } from "@weapp/ui";
import { MVoiceToText } from "@weapp/ui";
import { Component } from "react";

interface State {
  value: string;
}

export default class MVoiceToTextDemo extends Component<any, State> {

  constructor(props: any) {
    super(props);
    this.state = {
      value: ""
    }
  }

  onChange = (value: string) => {
    console.log(value)
    this.setState({ value })
  }

  render() {
    return (
      <div style={{ paddingTop: 60, textAlign: "center" }}>
        <div style={{marginBottom: 50}}>
          <div>voice content：</div>
          <div>{this.state.value}</div>
        </div>
        <MVoiceToText
         
          onChange={this.onChange}
        />
      </div>
    )
  }
}
```

### 外部打开弹出框

```jsx
import { MButton } from "@weapp/ui";
import { MVoiceToText } from "@weapp/ui";
import { Component } from "react";

interface State {
  value: string;
  visible: boolean;
}

export default class MVoiceToTextDemo extends Component<any, State> {

  constructor(props: any) {
    super(props);
    this.state = {
      value: "",
      visible: false
    }
  }

  onChange = (value: string) => {
    console.log(value)
    this.setState({ value })
  }

  handleClick = () => {
    this.setState({ visible: true });
  }

  handleClose = () => {
    this.setState({ visible: false });
  }

  render() {
    return (
        <div style={{paddingTop: 60, textAlign: "center"}}>
          <MButton onClick={this.handleClick}>打开语音转文字</MButton>
          <MVoiceToText
             
              showMask
              onChange={this.onChange}
              showIcon={false}
              onClose={this.handleClose}
              visible={this.state.visible}
          />

          <div style={{marginTop: 50}}>
            <div>voice content：</div>
            <div>{this.state.value}</div>
          </div>
        </div>
    )
  }
}
```

### 实时识别语音

```jsx
import { Icon, MButton } from "@weapp/ui";
import { MVoiceToText } from "@weapp/ui";
import { Component } from "react";

interface State {
  value: string;
  visible: boolean;
}

export default class MVoiceToTextDemo extends Component<any, State> {

  constructor(props: any) {
    super(props);
    this.state = {
      value: "",
      visible: false
    }
  }

  onChange = (value: string) => {
    console.log(value)
    this.setState({ value })
  }

  handleClick = () => {
    this.setState({ visible: true });
  }

  handleClose = () => {
    this.setState({ visible: false });
  }

  iconStyle = {
    backgroundColor: 'var(--primary)',
    color: 'var(--base-white)',
    width: 46,
    height: 46,
    borderRadius: '50%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer',
  }
  render() {
    return (
        <div style={{textAlign: "center"}}>
          <div style={{marginBottom: 50}}>
            <div>voice content：</div>
            <div>{this.state.value}</div>
          </div>
          <div style={this.iconStyle} onClick={this.handleClick}>
            <Icon name="Icon-Voice-input" size="lg"/>
          </div>
          <MVoiceToText
             
              showMask
              onChange={this.onChange}
              showIcon={false}
              onClose={this.handleClose}
              visible={this.state.visible}
              newVersion
              startRecordingTip={"点击或长按下方继续录音"}
              stopRecordingTip={"点击或松开下方停止录音"}
              editable
              realTimeRecigning
              value={this.state.value}
          />
        </div>
    )
  }
}
```

### 无弹框模式

```jsx
import { Icon, IconProps, MButton } from "@weapp/ui";
import { MVoiceToText, constants } from "@weapp/ui";
import { Component } from "react";

interface State {
  value: string;
  visible: boolean;
}

const { uiPcClsPrefix } = constants;

export default class MVoiceToTextDemo extends Component<any, State> {

  constructor(props: any) {
    super(props);
    this.state = {
      value: "",
      visible: false
    }
  }

  onChange = (value: string) => {
    console.log(value)
    this.setState({ value })
  }

  handleClick = () => {
    this.setState({ visible: true });
  }

  handleClose = () => {
    this.setState({ visible: false });
  }

  render() {
    const showCls = this.state.visible ? 'keyboard hide' : 'keyboard show';
    return (
      <div className={`${uiPcClsPrefix}-demo-voice-to-text-noDialog`}>
        <div className="mask"/>
        <div className="container">
          {
            !this.state.visible && (
              <div className="top">
                智能填单:
                <br/>
                {this.state.value}
              </div>
            )
          }
          <div className="bottom">
            <Icon name="Icon-keyboard" size="lg" className={showCls} />
            <MVoiceToText
              onChange={this.onChange}
              showIcon
              onClose={this.handleClose}
              visible={this.state.visible}
              newVersion
              startRecordingTip={"点击或长按下方继续录音"}
              stopRecordingTip={"点击或松开下方停止录音"}
              editable
              realTimeRecigning
              noDialog
              value={this.state.value}
              onOpen={this.handleClick}
            />
            <div/>
          </div>
        </div>
      </div>
    )
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| icon | 按钮icon | IconNames | 否 |  |
| iconProps | Icon组件Props | IconProps | 否 |  |
| children | 自定义按钮 | React.ReactNode | 否 |  |
| onChange | 识别数据返回 | (value: string) => void | 否 |  |
| showIcon | 是否显示组件内部点击按钮 | boolean | 否 |  |
| showMask | 是否显示弹出框的蒙层 | boolean | 否 | false |
| visible | 弹出框显示受控 | boolean | 否 |  |
| onClose | 弹出框关闭回调 | () => void | 否 |  |
| dialogProps | 弹出框Props属性 | MDialogProps | 否 |  |
| newVersion | 新版UI | boolean | 否 |  |
| realTimeRecigning | 实时转文字 | boolean | 否 |  |
| noDialog | 无弹框模式 | boolean | 否 |  |
| editable | 文字可编辑 | boolean | 否 |  |
| longPressTime | 长按时间设置 | number | 否 |  |
