微信小程式語音同步智能識別的實作案例

• 一、背景
• 二、同聲傳譯插件介紹
  • 1、 微信小程式后臺添加插件
  • 2、 微信小程式啟用插件
• 三、語音同步轉換的前端實作
  • 1、界面UI與操作
  • 2、代碼實作
• 四、后端SpringBoot實作語音檔案上傳webApi
  • 1、SpringBoot專案API相關結構樹
  • 2、檔案上傳工具類的實作
  • 3、小程式上傳檔案介面的實作
  • 4、小程式上傳檔案介面的查看
• 五、實際測驗

一、背景

在小程式的一些應用場景中，會有語音轉文字的需求，原有的做法一般是先通過小程式的錄音功能錄下語音檔案，然后再通過呼叫語音智能識別WebApi（比如百度云AI平臺，科大訊飛平臺）將語音檔案轉成文字資訊，以上的做法比較繁瑣且用戶的體驗性較差，
為解決此問題，微信直接開放了同聲傳譯的插件，小程式作者可以直接使用該插件進行語音同聲傳譯的開發，此文章將通過前后端整合應用的完整案例完成語音的實時轉換，并將語音上傳到服務端后臺備份，

二、同聲傳譯插件介紹

微信同聲傳譯由微信智聆語音團隊、微信翻譯團隊與公眾平臺聯合推出的同傳開放介面，首期開放語音轉文字、文本翻譯、語音合成介面，為開發者賦能，

1、 微信小程式后臺添加插件

進入微信小程式后臺-->進入設定-->第三方設定-->添加插件->搜索同聲傳譯-->完成添加，

2、 微信小程式啟用插件

在小程式app.json檔案中增加插件版本等資訊：

"plugins": {
    "WechatSI": {
      "version": "0.3.3",
      "provider": "wx069ba97219f66d99"
    }
  },

在頁面程式檔案中引入插件：

/* index.js */

const plugin = requirePlugin("WechatSI")

// 獲取**全域唯一**的語音識別管理器**recordRecoManager**
const manager = plugin.getRecordRecognitionManager()

recordRecoManager 物件的方法串列：

官方開發檔案：插件的語音識別管理器

三、語音同步轉換的前端實作

1、界面UI與操作

UI參考微信官方的DEMO：長按按鈕進行錄音，松開按鈕實時將錄音轉換為文字，

用戶可對同步轉換的文字進行編輯，同時可將原始語音檔案與文字上傳后臺服務端，

2、代碼實作

語音同步轉換的主要代碼：

//匯入插件
const plugin = requirePlugin("WechatSI");
// 獲取**全域唯一**的語音識別管理器**recordRecoManager**
const manager = plugin.getRecordRecognitionManager();

/**
   * 加載進行初始化
   */
 onl oad: function () {
 	//獲取錄音權限
	app.getRecordAuth();
	//初始化語音識別回呼
    this.initRecord();
  },

 ...
 
/**
   * 初始化語音識別回呼
   * 系結語音播放開始事件
   */
  initRecord: function () {
    //有新的識別內容回傳，則會呼叫此事件
    manager.onRecognize = (res) => {
      let currentData = https://www.cnblogs.com/zhuhuix/p/Object.assign({}, this.data.currentTranslate, {
        text: res.result,
      });
      this.setData({
        currentTranslate: currentData,
      });
      this.scrollToNew();
    };

    // 識別結束事件
    manager.onStop = (res) => {
      let text = res.result;

      console.log(res.tempFilePath);

      if (text =="") {
        this.showRecordEmptyTip();
        return;
      }

      let lastId = this.data.lastId + 1;

      let currentData = https://www.cnblogs.com/zhuhuix/p/Object.assign({}, this.data.currentTranslate, {
        text: res.result,
        translateText:"正在識別中",
        id: lastId,
        voicePath: res.tempFilePath,
        duration: res.duration
      });

      this.setData({
        currentTranslate: currentData,
        recordStatus: 1,
        lastId: lastId,
      });
      //將當前識別內容與語音檔案加入串列
      this.addRecordFile(currentData, this.data.dialogList.length);
      //重繪串列
	  this.scrollToNew();
    };

    // 識別錯誤事件
    manager.onError = (res) => {
      this.setData({
        recording: false,
        bottomButtonDisabled: false,
      });
    };

  },

  /**
   * 按住按鈕開始語音識別
   */
  streamRecord: function (e) {
    let detail = e.detail || {};
    let buttonItem = detail.buttonItem || {};
    //開始中文錄音
    manager.start({
      lang: buttonItem.lang,
    });

    this.setData({
      recordStatus: 0,
      recording: true,
      currentTranslate: {
        // 當前語音輸入內容
        create: util.recordTime(new Date()),
        text: "正在聆聽中",
        lfrom: buttonItem.lang,
        lto: buttonItem.lto,
      },
    });
    //重繪串列
    this.scrollToNew();
  },

  /**
   * 松開按鈕結束語音識別
   */
  streamRecordEnd: function (e) {
    let detail = e.detail || {}; // 自定義組件觸發事件時提供的detail物件
    let buttonItem = detail.buttonItem || {};

    // 防止重復觸發stop函式
    if (!this.data.recording || this.data.recordStatus != 0) {
      console.warn("has finished!");
      return;
    }

    manager.stop();

    this.setData({
      bottomButtonDisabled: true,
    });
  },

編輯識別文字并完上傳的主要代碼：

 /**
   * 頁面的初始資料
   */
  data: {
    edit_text_max: 200,
    remain_length: 200,
    edit_text: "",
    is_focus: false,
    tips: "",
    index: -1,
    voicePath: "",
    
  },

/**
   * 加載初始化
   */
 onl oad: function (options) {
    //根據傳入的文字內容填充編輯框
    this.setEditText(options.content)
    
    this.setData({
        index: index,
        oldText:options.content,
        voicePath: options.voicePath
    })
    
  },

 /**
   * 編輯文字
   */
  editInput: function (event) {
    console.log(event)
    if (event.detail.value.length > this.getEditTextMax()) {

    } else {
      this.data.edit_text = event.detail.value
      this.updateRemainLength(this.data.edit_text)
    }
  },

 /**
   * 上傳文字與語音檔案
   */
  editConfirm: function (event) {
    let json=this.data.edit_text
    //呼叫微信上傳檔案api將資訊上傳至服務端webApi
    wx.uploadFile({
      url: api.wxFileUploadUrl,
      filePath: this.data.voicePath,
      name: "file",
      header: {
        Authorization: wx.getStorageSync("loginFlag"),
        "Content-Type": "multipart/form-data",
      },
      formData: {
        openId: app.globalData.userInfo.openId,
        realName: "語音檔案",
        json: JSON.stringify(json),
      },
      success: (result) => {
        console.log("success:", result);
        if (result.statusCode == "200") {
          let data = https://www.cnblogs.com/zhuhuix/p/JSON.parse(result.data);
          console.log("data", data);
          if (data.success == true) {
            let module = data.module;
            console.log("module", module);
            app.showInfo("上傳成功");            
            setTimeout( ()=>{
              wx.navigateBack();
            }, 2000)
                      
          } else {
            app.showInfo("例外錯誤" + data.errMsg + ",請重新進入");
            wx.navigateTo({
              url: "/pages/index/index",
            });
          }
        } else {
          app.showInfo("訪問后臺例外,重新進入系統");
          wx.navigateTo({
            url: "/pages/index/index",
          });
        }
      },
      fail: (result) => {
        console.log("fail", result);
        wx.navigateTo({
          url: "/pages/index/index",
        });
      },
      complete: () => {},
    });

  },

四、后端SpringBoot實作語音檔案上傳webApi

1、SpringBoot專案API相關結構樹

2、檔案上傳工具類的實作

tools工具類包中主要存檔案通用的檔案上傳工具類，該工具類會將檔案上傳至配置指定的檔案夾下，并將檔案資訊寫入upload_file表中，

• 檔案資訊物體類：與資料庫中表upload_file對應；
• 檔案存盤倉庫類：通過Spring Data JPA介面實作資料的CRUD；
• 檔案上傳工具介面：對外統一封裝檔案上傳方法；
• 檔案上傳工具實作類：實作檔案上傳方法介面，

檔案資訊物體類：UploadFile.java

/**
 * 檔案資訊表
 *
 * @author zhuhuix
 * @date 2020-04-20
 */
@Entity
@Getter
@Setter
@Table(name = "upload_file")
public class UploadFile {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @NotNull(groups = Update.class)
    private Long id;

    /**
     * 檔案實際名稱
     */
    @Column(name = "real_name")
    private String realName;

    /**
     * 檔案名
     */
    @NotNull
    @Column(name = "file_name")
    private String fileName;

    /**
     * 檔案主名稱
     */
    @NotNull
    @Column(name = "primary_name")
    private String primaryName;

    /**
     * 檔案擴展名
     */
    @NotNull
    private String extension;

    /**
     * 存放路徑
     */
    @NotNull
    private String path;

    /**
     * 檔案型別
     */
    private String type;

    /**
     * 檔案大小
     */
    private Long size;

    /**
     * 上傳人
     */
    private String uploader;

    @JsonIgnore
    @Column(name = "create_time")
    @CreationTimestamp
    private Timestamp createTime;

    public UploadFile(String realName, @NotNull String fileName, @NotNull String primaryName, @NotNull String extension, @NotNull String path, String type, Long size, String uploader) {
        this.realName = realName;
        this.fileName = fileName;
        this.primaryName = primaryName;
        this.extension = extension;
        this.path = path;
        this.type = type;
        this.size = size;
        this.uploader = uploader;
    }

    @Override
    public String toString() {
        return "UploadFile{" +
                "fileName='" + fileName + '\'' +
                ", uploader='" + uploader + '\'' +
                ", createTime=" + createTime +
                '}';
    }
}

檔案存盤倉庫類:UploadFileRepository.java

/**
 * 上傳檔案DAO介面層
 *
 * @author zhuhuix
 * @date 2020-04-03
 */
public interface UploadFileRepository extends JpaRepository<UploadFile, Long>, JpaSpecificationExecutor<UploadFile> {
//該介面繼承JpaRepository及CrudRepository介面，已實作了如findById,save,delete等CRUD方法
}

UploadFileRepository 介面繼承JpaRepository及CrudRepository介面，已實作了如findById,save,delete等CRUD方法

檔案上傳工具介面：UploadFileTool.java

/**
 * 檔案上傳介面定義
 *
 * @author zhuhuix
 * @date 2020-04-20
 */
public interface UploadFileTool {

    /**
     * 檔案上傳
     * @param multipartFile 檔案
     * @return 上傳資訊
     */
   UploadFile upload(String uploader,String realName,MultipartFile multipartFile);
}

檔案上傳工具實作類:UploadFileToolImpl.java

/**
 * 檔案上傳實作類
 *
 * @author zhuhuix
 * @date 2020-04-20
 */
@Service
@Transactional(propagation = Propagation.SUPPORTS, readOnly = true, rollbackFor = Exception.class)
public class UploadFileToolImpl implements UploadFileTool {

    private final UploadFileRepository uploadFileRepository;

    @Value("${uploadFile.path}")
    private String path;

    @Value("${uploadFile.maxSize}")
    private long maxSize;

    public UploadFileToolImpl(UploadFileRepository uploadFileRepository) {
        this.uploadFileRepository = uploadFileRepository;
    }

    @Override
    @Transactional(rollbackFor = Exception.class)
    public UploadFile upload(String uploader, String realName, MultipartFile multipartFile) {
        //檢查檔案大小
        if (multipartFile.getSize() > maxSize * Constant.MB) {
            throw new RuntimeException("超出檔案上傳大小限制" + maxSize + "MB");
        }
        //獲取上傳檔案的主檔案名與擴展名
        String primaryName = FileUtil.mainName(multipartFile.getOriginalFilename());
        String extension = FileUtil.extName(multipartFile.getOriginalFilename());
        //根據檔案擴展名得到檔案型別
        String type = getFileType(extension);
        //給上傳的檔案加上時間戳
        LocalDateTime date = LocalDateTime.now();
        DateTimeFormatter format = DateTimeFormatter.ofPattern("yyyyMMddhhmmssS");
        String nowStr = "-" + date.format(format);
        String fileName = primaryName + nowStr + "." + extension;

        try {
            String filePath = path + type + File.separator + fileName;
            File dest = new File(filePath).getCanonicalFile();
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
            }
            multipartFile.transferTo(dest);
            if (ObjectUtil.isNull(dest)) {
                throw new RuntimeException("上傳檔案失敗");
            }

            UploadFile uploadFile = new UploadFile(realName, fileName, primaryName, extension, dest.getPath(), type, multipartFile.getSize(), uploader);
            return uploadFileRepository.save(uploadFile);

        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e.getMessage());
        }

    }

    /**
     * 根據檔案擴展名給檔案型別
     *
     * @param extension 檔案擴展名
     * @return 檔案型別
     */
    private static String getFileType(String extension) {
        String document = "txt doc pdf ppt pps xlsx xls docx csv";
        String music = "mp3 wav wma mpa ram ra aac aif m4a";
        String video = "avi mpg mpe mpeg asf wmv mov qt rm mp4 flv m4v webm ogv ogg";
        String image = "bmp dib pcp dif wmf gif jpg tif eps psd cdr iff tga pcd mpt png jpeg";
        if (image.contains(extension)) {
            return "image";
        } else if (document.contains(extension)) {
            return "document";
        } else if (music.contains(extension)) {
            return "music";
        } else if (video.contains(extension)) {
            return "video";
        } else {
            return "other";
        }
    }
}

注意，該程式代碼中用到了@Value注解獲取組態檔中的uploadFile.path及uploadFile.maxsize引數，一般在專案靜態組態檔中按如下書寫（yml組態檔），

# 測驗環境檔案存盤路徑
uploadFile:
  path: C:\startup\file\
  # 檔案大小 /M
  maxSize: 50

3、小程式上傳檔案介面的實作

wx-miniprogram包定義了小程式CRM webApi的介面，小程式呼叫webApi實作檔案的上傳及其他功能，

• 微信小程式 webApi：對外提供小程式上傳檔案webApi；
• 微信小程式服務介面：封裝小程式上傳檔案服務介面;
• 微信小程式服務實作：小程式上傳檔案服務的實作，該服務實作中會呼叫tools包中的UploadFile介面進行檔案的上傳，

微信小程式CRM webApi：WxMiniCrmController.java

/**
 * 微信小程式Crm webApi
 *
 * @author zhuhuix
 * @date 2020-03-30
 */
@Slf4j
@RestController
@RequestMapping("/api/wx-mini")
@Api(tags = "微信小程式Crm介面")
public class WxMiniCrmController {

    private final WxMiniCrm wxMiniCrm;

    public WxMiniCrmController(WxMiniCrm wxMiniCrm) {
        this.wxMiniCrm = wxMiniCrm;
    }

    @ApiOperation(value = "https://www.cnblogs.com/zhuhuix/p/微信小程式端上傳檔案")
    @PostMapping(value = "https://www.cnblogs.com/fileUpload")
    public ResponseEntity fileUpload(HttpServletRequest request) {
        MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;

        MultipartFile multipartFile = req.getFile("file");
        String openId = req.getParameter("openId");
        String realName = req.getParameter("realName");
        String json = req.getParameter("json");

        return ResponseEntity.ok(wxMiniCrm.uploadFile(json, openId,realName, multipartFile));

    }
}

微信小程式CRM服務介面:WxMiniCrm.java

/**
 * 微信小程式CRM服務介面定義
 *
 * @author zhuhuix
 * @date 2020-04-20
 */
public interface WxMiniCrm {

    /**
     * 將微信小程式傳入的json物件寫入資料庫，并同時將檔案上傳至服務端
     *
     * @param json          微信端傳入json物件
     * @param openId        上傳人
     * @param realName      檔案實際名稱
     * @param multipartFile 上傳檔案
     * @return 回傳上傳資訊
     */
    Result<UploadFile> uploadFile(String  json, String openId, String realName,MultipartFile multipartFile);
}

微信小程式CRM服務實作:WxMiniCrmImpl.java

/**
 * 微信小程式CRM實作類
 *
 * @author zhuhuix
 * @date 2020-04-20
 */
@Slf4j
@Service
@Transactional(propagation = Propagation.SUPPORTS, readOnly = true, rollbackFor = Exception.class)
public class WxMiniCrmImpl implements WxMiniCrm {

    private final UploadFileTool uploadFileTool;

    public WxMiniCrmImpl(UploadFileTool uploadFileTool) {
        this.uploadFileTool = uploadFileTool;
    }

    @Override
    @Transactional(rollbackFor = Exception.class)
    public Result<UploadFile> uploadFile(String  json, String openId,String realName, MultipartFile multipartFile) {
        return new Result<UploadFile>().ok(uploadFileTool.upload(openId,realName, multipartFile));
    }
}

4、小程式上傳檔案介面的查看

訪問Swagger2可查看該介面，Swagger2與SpringBoot的集成可參考SpringBoot JWT認證機制專案集成Swagger2

五、實際測驗

語音測驗正常

上傳檔案至后臺：

上傳的日志資訊查看：

標籤：Java

上一篇：Java中方法多載和方法覆寫的異同

下一篇：推薦一款 MyBatis 開發神器，為簡化而生！