在线录音+上传录音（react+hooks+ts）

需求：需要录音的文本可分为多段和单个，我们可以进行上传录音和在线录音的形式生成最终的录音。

在这里用到了自定义Audio，Audio代码在我的博客里有，博客地址是：https://blog.youkuaiyun.com/qq_40657321/article/details/120329405

其中在线录音用到了js-audio-recorder包，详情链接：https://www.npmjs.com/package/js-audio-recorder/v/0.2.3

在线录音参考文章：
1.在线录音演示地址：https://recorder.zhuyuntao.cn/
2.在线录音代码：https://github.com/2fps/recorder
3.在线录音实现：https://www.jb51.net/article/159849.htm

上传录音

1.1 上传录音（单个）

上传之前

上传后：生成录音并且可删除

flag是表示文件是否上传的标志

{
   
   
 !detailItem?.voiceItems[0]?.ossPath ?
 	<div className={
   
   styles.upload_btn}>
 //上传文件
       <Upload
          action={
   
   `url 上传接口`}
          headers={
   
   {
   
   
            _security_token:
              ((token || Cookie.get('token的key')) as string) ||
              getState().global.token,
          }}
          data={
   
   () => ({
   
   
          // 除了file额外的参数
            id: detail?.id,
            type: 1,
          })}
          showUploadList={
   
   false} // 不显示上传后的文件
          onChange={
   
   (data: any) => handleUpload(data, 0)}
          maxCount={
   
   1} // 最大上传个数1个
        >
          <Button className={
   
   styles.btn}>上传文件</Button>

        </Upload>
        <div className={
   
   styles.tit}>
          <span>支持拓展名：mp3/wav，大小不要超过10M</span>
        </div>
      </div> : detailItem?.voiceItems[0]?.flag ? <div className={
   
   styles.upload_btn}>
      //上传后
      //自定义Audio，代码在文章开头的链接里
        <Audio
          src={
   
   path} // 文件路径
          id={
   
   detailItem.id + '12'}
          type={
   
   'delete'}
          onClick={
   
   () => deleteRecord(0)}
          bg={
   
   '#F2F3F5'}
        />
      </div> : ''
    }
  </div>

1.2 上传录音（多个）

部分上传成功：生成录音并且可删除，其他未上传文件可继续上传

全部上传后：生成录音并且可逐个删除

在线录音

2.1 在线录音（单个）

录音初始状态：点击按钮可开始录音

录音中：点击按钮暂停录音并且生成录音

录音结束后：生成录音并且可删除

 <div className={
   
   styles.online_btn}>
   {
   
   
      (!detailItem?.voiceItems[0]?.audioFlag && !detailItem?.voiceItems[0]?.ossPath) ? <div className={
   
   styles.upload_btn}>
        <Button className={
   
   styles.btn} onClick={
   
   () => startRecording(0)}>
          <img src={
   
   play} className={
   
   styles.btn_img} />
          开始录音
        </Button>
      </div> : (detailItem?.voiceItems[0]?.audioFlag && !detailItem?.voiceItems[0]?.ossPath) ? <div className={
   
   styles.upload_btn}>
        <Button className={
   
   styles.btn} onClick={
   
   () => stopRecording(0)}>
          <img src={
   
   pause} className={
   
   styles.btn_img} ></img>
          {
   
   detailItem?.voiceItems[0].timeValue || '00:00'}
        </Button>
      </div> : detailItem?.voiceItems[0]?.ossPath ? <div className={
   
   styles.upload_btn}>
        <Audio
          src={
   
   detailItem?.voiceItems[0]?.ossPath}
          id={
   
   detailItem.id + '11'}
          type={
   
   'delete'}
          onClick={
   
   () => deleteRecord(0)}
          bg={
   
   '#F2F3F5'}
        />
      </div> : ''
    }
  </div>

2.2 在线录音（多个）

部分录音状态：点击按钮可开始录音，点击删除可删除录音，重新录音

全部录音完成：点击删除按钮，删除当前录音，可重新开始录音

多个分段（数字转汉字）

拿到的数据是一个数组，第0个录音数据，是第一段，依次递增展示。
所以需要把下标+1，并且转成汉字。例子如下：
1=》一
12=》一十二

上代码：

//将小数部分的数字转换为字符串的方法：
var chnNumChar = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
var chnUnitSection = ["", "万", "亿", "万亿", "亿亿"];
var chnUnitChar = ["", "十", "百", "千"];

  //定义在每个小节的内部进行转化的方法，其他部分则与小节内部转化方法相同
  const sectionToChinese = (section: number) => {
   
   
    var str = '', chnstr = '', zero = false, count = 0;   //zero为是否进行补零， 第一次进行取余由于为个位数，默认不补零
    while (section > 0) {
   
   
      var v = section % 10;  //对数字取余10，得到的数即为个位数
      if (v == 0) {
   
                       //如果数字为零，则对字符串进行补零
        if (zero) {
   
   
          zero = false;        //如果遇到连续多次取余都是0，那么只需补一个零即可
          chnstr = chnNumChar[v] + chnstr;
        }
      } else {
   
   
        zero = true;           //第一次取余之后，如果再次取余为零，则需要补零
        str = chnNumChar[v];
        str += chn