# 安装

使用 `npm` 进行安装

```bash
npm install @minto-ai/huoshan-mp-tts
```

# 使用

## 引入库

```javascript
import huoshanTts from '@minto-ai/huoshan-mp-tts'
```

## 初始化

```javascript
huoshanTts.config()
```

## 创建应用实例

详细配置可参考[参数基本说明](hhttps://www.volcengine.com/docs/6561/79823)。

```javascript
const ttsInstance = huoshanTts.create({
  // 音色
  voice_type: 'zh_female_daimengchuanmei_moon_bigtts'
})
```

## 可用方法

### 激活应用

可以发送文本进行语音播放

```javascript
ttsInstance.start()
```

### 发送文本

```javascript
ttsInstance.send('你好呀。')
```

### 结束应用

通知应用发送文本已经结束，但是不会销毁应用，剩余的文本将会继续播放。

```javascript
ttsInstance.end()
```

### 销毁应用

应用播放结束，应用将会被销毁。剩余的文本将会停止播放。

```javascript
ttsInstance.finish()
```

## 应用钩子

### `audioFirstStart`

```javascript
ttsInstance.on('audioFirstStart', () => {
  console.log('音频首次播放')
})
```

### `appError`

```javascript
ttsInstance.on('appError', (error) => {
  console.log('应用错误', error)
})
```

### `appFinish`

```javascript
ttsInstance.on('appFinish', () => {
  console.log('应用已销毁')
})
```

# 示例代码

```vue
<script>
import huoshanTts from '@minto-ai/huoshan-mp-tts'
huoshanTts.config()

let ttsInstance = null
let timer = null
export default {
  onLoad() {
    ttsInstance = huoshanTts.create()
    ttsInstance
      .on('appFinish', () => {
        console.log('appFinish')
      })
      .on('appError', (error) => {
        console.log('应用错误', error)
      })
      .on('audioFirstStart', () => {
        console.log('audioFirstStart')
      })
  },
  beforeUnmount() {
    if (ttsInstance) {
      ttsInstance.finish()
    }
  },
  methods: {
    handleStart() {
      clearTimeout(timer)
      const arrText = [
        `你要抱`,
        `抱我吗？`,
        `我好`,
        `喜欢你呀！`,
      ]
      ttsInstance.start()

      let index = 0
      timer = setInterval(() => {
        ttsInstance.send(arrText[index])
        index += 1
        if (index === arrText.length) {
          ttsInstance.end()
          clearInterval(timer)
        }
      }, 100)
    },
    handleFinish() {
      ttsInstance.finish()
      clearTimeout(timer)
    }
  }
}
</script>

<template>
  <view class="content">
    <button @click="handleStart">
      开启
    </button>
    <button @click="handleFinish" />
  </view>
</template>

```