위 챗 애플 릿 음성 동기 화 스마트 인식 실현 사례 코드 분석

18028 단어 애플 릿음성식별
배경
작은 프로그램의 일부 응용 장면 에서 음성 문자 전환 에 대한 수요 가 있 을 수 있다.기 존의 방법 은 보통 애플 릿 의 녹음 기능 을 통 해 음성 파일 을 녹음 한 다음 에 음성 스마트 인식 WebApi(예 를 들 어 바 이 두 클 라 우 드 AI 플랫폼,과대 통신 플랫폼)를 호출 하여 음성 파일 을 문자 정보 로 전환 하 는 것 이다.이상 의 방법 은 비교적 번 거 롭 고 사용자 의 체험 성 이 떨어진다.
이 문 제 를 해결 하기 위해 위 챗 은 동시통역 플러그 인 을 직접 열 었 습 니 다.애플 릿 작성 자 는 이 플러그 인 을 직접 사용 하여 음성 동시통역 개발 을 할 수 있 습 니 다.이 글 은 앞 뒤 통합 애플 리 케 이 션 의 전체 사례 를 통 해 음성 을 실시 간 으로 변환 하고 음성 을 서버 백 엔 드 백업 에 업로드 할 예정 이다.
2.동시통역 플러그 인 소개
위 챗 동시통역 은 위 챗 지 에서 음성 팀,위 챗 번역 팀 과 공공 플랫폼 이 공동으로 내 놓 은 동시통역 개방 인터페이스 로 음성 변환 문자,텍스트 번역,음성 합성 인 터 페 이 스 를 첫 번 째 로 개방 하여 개발 자 에 게 에 너 지 를 부여 합 니 다.
1.위 챗 애플 릿 배경 에 플러그 인 추가
위 챗 애플 릿 배경 에 들 어가 기->설정 에 들 어가 기->제3자 설정->플러그 인 추가->동시통역 검색->추가 완료.


2.위 챗 애플 릿 에서 플러그 인 사용
애플 릿 app.json 파일 에 플러그 인 버 전 추가 등 정보:

"plugins": {
 "WechatSI": {
 "version": "0.3.3",
 "provider": "wx069ba97219f66d99"
 }
 },
페이지 프로그램 파일 에 플러그 인 도입:

/* index.js */

const plugin = requirePlugin("WechatSI")

//   **    **        **recordRecoManager**
const manager = plugin.getRecordRecognitionManager()
recordRecoManager 대상 의 방법 목록:
방법.
매개 변수
설명 하 다.
start
options
식별 시작
stop
종료 식별
onStart
callback
정상적으로 녹음 인식 을 시작 할 때 이 사건 을 호출 합 니 다.
onRecognize
callback
새로운 식별 내용 이 돌아 오 면 이 사건 을 호출 합 니 다.
onStop
callback
식별 종료 이벤트
onError
callback
식별 오류 이벤트
공식 개발 문서:플러그 인의 음성 인식 관리자
3.음성 동기 화 전환 의 전단 실현
1.인터페이스 UI 와 조작
UI 는 위 챗 공식 DEMO:버튼 을 길 게 눌 러 녹음 하고 버튼 을 풀 어 실시 간 으로 녹음 을 문자 로 변환 합 니 다.

사용 자 는 동기 화 된 텍스트 를 편집 할 수 있 으 며,원본 음성 파일 과 텍스트 를 백 엔 드 서버 에 업로드 할 수 있 습 니 다.

2.코드 구현
음성 동기 화 변환 의 주요 코드:

//    
const plugin = requirePlugin("WechatSI");
//   **    **        **recordRecoManager**
const manager = plugin.getRecordRecognitionManager();

/**
 *        
 */
 onLoad: function () {
 	//      
	app.getRecordAuth();
	//         
 this.initRecord();
 },

 ...
 
/**
 *          
 *           
 */
 initRecord: function () {
 //         ，       
 manager.onRecognize = (res) => {
 let currentData = 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 = 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: "",
 
 },

/**
 *      
 */
 onLoad: 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 = 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: () => {},
 });

 },
4.백 엔 드 SpringBoot 음성 파일 업로드 webApi
1.SpringBoot 프로젝트 API 관련 구조 트 리

2.파일 업로드 도구 류 의 실현
tools 도구 패키지 에 서 는 파일 이 통용 되 는 파일 업로드 도구 류 를 저장 합 니 다.이 도구 류 는 설정 이 지정 한 폴 더 에 파일 을 업로드 하고 파일 정 보 를 upload 에 기록 합 니 다.file 표 에 있 습 니 다.
  • 파일 정보 실체 류:데이터베이스 에 표 upload파일 대응;
  • 파일 저장 창고 류: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.max size 인 자 를 가 져 옵 니 다.일반적으로 프로젝트 정적 설정 파일 에 다음 과 같이 쓰 입 니 다(yml 설정 파일).
    
#           
uploadFile:
 path: C:\startup\file\
 #      /M
 maxSize: 50
    3.애플 릿 업로드 파일 인터페이스의 실현
    wx-miniprogram 패 키 지 는 애플 릿 CRM webApi 의 인 터 페 이 스 를 정의 하고 애플 릿 은 webApi 를 호출 하여 파일 업로드 및 기타 기능 을 실현 합 니 다.
  • 위 챗 애플 릿 webApi:대외 적 으로 애플 릿 업로드 파일 webApi 를 제공 합 니 다
  • 위 챗 애플 릿 서비스 인터페이스:패키지 애플 릿 업로드 파일 서비스 인터페이스;
  • 위 챗 애플 릿 서비스 실현:애플 릿 업로드 파일 서비스의 실현,이 서 비 스 는 tools 패키지 의 UploadFile 인 터 페 이 스 를 호출 하여 파일 을 업로드 합 니 다
    • 위 챗 애플 릿 CRM webApi:Wx MiniCrmController.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 = "          ")
 @PostMapping(value = "/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.자바
    
/**
 *      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 서비스 구현:Wx MiniCrmImpl.자바
    
/**
 *      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.애플 릿 업로드 파일 인터페이스 보기
    Swagger 2 를 방문 하면 이 인 터 페 이 스 를 볼 수 있 습 니 다.Swagger 2 와 SpringBoot 의 통합 은 참고 할 수 있 습 니 다SpringBoot JWT 인증 메커니즘 프로젝트 통합 Swagger 2

    5.실제 테스트
    음성 테스트 정상

    배경 으로 파일 업로드:

    업로드 한 로그 정보 보기:

    총결산
    위 챗 애플 릿 음성 동기 화 스마트 인식 실현 사례 코드 분석 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 음성 동기 화 스마트 인식 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!
    asp HTTP_X_FORWARDED_FOR 와 REMOTEADDR
    ASP 코드 80040 e14 오류 해결 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage