当前位置:网站首页>Mini Program-Voice broadcast function

Mini Program-Voice broadcast function

2022-08-10 14:53:00 Yin qiu yi

功能需求

Implemented by passing in“Voice copy is automatically broadcast”,如:“Test broadcast”,Voice broadcast automatically“Test broadcast”

方案

  1. 使用wx.playVoice播放语音文件

优点:使用简单,Play recorded audio files directly

缺点:Only recorded voice files can be played

  1. Third-party voice services + wx.createInnerAudioContext

优点:功能强大,可定制,Can meet complex scenarios;

缺点:Server connection is required,付费

  1. 小程序插件 + wx.createInnerAudioContext

优点:简单快捷,适用于简单场景;

缺点:功能单一,无法定制,Uppercase English is not recognized,Some lowercase English pronunciations are inaccurate

Third-party voice platforms

语音平台

  1. 腾讯Ai
  2. 科大讯飞
  3. 百度Ai
  4. 阿里云

服务端

对接第三方平台,Give the converted voice data to the applet.

小程序

1.添加请求

wx.request({
  url: 'https://xxxx.com',
  data: { data: "The speech data to be synthesized"},
  method: "get",
  header: {
    'content-type''application/json' // 默认值
  },
  dataType: "json",
  success: function (res{
    const innerAudioContext = wx.createInnerAudioContext();
    innerAudioContext.src = res.filename;
    innerAudioContext.play();
  }
})

微信插件

  1. 添加 微信同声传译插件:Configured on the WeChat public platform,找到设置–第三方设置–插件管理–点击添加插件 微信同声传译
  2. 搜索 微信同声传译,点击添加 微信同声传译
  3. 引入插件:在项目根目录app.json文件中配置
"plugins": {   
    // 引入插件
    "WechatSI": {     //   自定义的名字
      "version""0.3.5",   // 引入插件的版本号
      "provider""wx069ba97219f66d99"    // 引入插件的appID
    }
  }
  1. 使用
const plugin = requirePlugin('WechatSI');

onReady() {
  this.innerAudioContext = wx.createInnerAudioContext();
  const that = this;
  plugin.textToSpeech({
    // 调用插件的方法
    lang: 'zh_CN',
    content: 'Test the voice broadcast',
    success: function (res) {
      that.playAudio(res.filename);
    }
  });
},

playAudio(e) {
  this.innerAudioContext.src = e;
  this.innerAudioContext.play();
},
  1. 封装优化
const plugin = requirePlugin('WechatSI');
import { trim, isLetter } from '@/shared/index';

class PluginService {
  innerAudioContext;

  audioBroadcast(content: string): Promise<any> {
    return new Promise((resolve, reject) => {
      this.innerAudioContext = wx.createInnerAudioContext();
      plugin.textToSpeech({
        // 调用插件的方法
        lang: 'zh_CN',
        content,
        success: res => {
          this.playAudio(res.filename, resolve, reject);
        },
        fail: reject
      });
    });
  }

  playAudio(e, resolve, reject) {
    this.innerAudioContext.src = e;
    this.innerAudioContext.play();

    this.innerAudioContext.onStop(() => {
      console.log('[ onStop ] >');
      resolve({
        type'stop'
      });
    });

    this.innerAudioContext.onEnded(() => {
      //播放结束,销毁该实例
      this.innerAudioContext.destroy();

      console.log('[ onEnded ] >');

      resolve({
        type'end'
      });
    });

    this.innerAudioContext.onError(error => {
      console.log('[ onError ] >', error);

      this.innerAudioContext.destroy();
      reject(error);
    });
  }

  stopAudio() {
    this.innerAudioContext.stop();
    this.innerAudioContext.destroy();
  }
}

export default new PluginService();

在shared/indexMedium utility function:

// 去掉字符串中所有空格(包括中间空格,需要设置第2个参数为:true)
export function trim(str: string, isGlobal = true{
  if (!str) {
    return str;
  }
  const result = str.replace(/(^\s+)|(\s+$)/g'');
  return isGlobal ? result.replace(/\s/g'') : result;
}

// 判断是否为字母
export function isLetter(str{
  const reg = /^[A-Za-z]+$/;
  return reg.test(str);
}

// Alphabet to Chinese
export function translateAlphabet(letters{
  if (!letters || !(letters.length > 0)) {
    return letters;
  }

  let tLetters = '';

  for (const key of letters) {
    tLetters += alphabetComparison(key);
  }

  return trim(tLetters);
}

// Alphabet Chinese reading
export function alphabetComparison(letter{
  if (!letter || !isLetter(letter)) {
    return letter;
  }

  const letterCase = letter.toUpperCase();
  const letterMap = {
    A: '诶',
    B: 'b',
    C: '西',
    D: '帝',
    E: '伊',
    F: 'f',
    G: 'g',
    H: 'h',
    I: 'i',
    J: 'j',
    K: 'k',
    L: 'l',
    M: 'm',
    N: 'n',
    O: '欧',
    P: 'p',
    Q: 'q',
    R: 'r',
    S: '爱死',
    T: 't',
    U: '优',
    V: 'v',
    W: 'w',
    X: 'x',
    Y: '歪',
    Z: 'z'
  };
  return letterMap[letterCase];
}

在页面中使用

import { pluginService, translateAlphabet } from '@util';
import { formatCabinetNo, getCacheCabinet } from '@/shared/index';

Page({

  ...
  
  onLoad(e) {
    // Get order result type
    this.autoPlay();
  },
  
  onUnload() {
    pluginService.stopAudio();
  },

  // Polling to play multiple times
  autoPlay(timerCount = 0, maxCount = 100) {
    const { address, lockerName } = this.data;

    console.log('timerCount:', timerCount);

    if (timerCount > maxCount) {
      return;
    }

    const tAddress = translateAlphabet(address);

    console.log('[ translateAlphabet ] >', tAddress);

    // 'Check the cabinet door number before storing,Don't save the wrong door'
    const message = `Your cabinet door number is${tAddress}${lockerName},Please check the cabinet door number for storage,Don't save the wrong door`;

    pluginService
      .audioBroadcast(message)
      .then(res => {
        if (res.type !== 'stop') {
          this.autoPlay(++timerCount);
        }
        console.log('audioBroadcast.complete', res);
      })
      .catch(err => {
        console.log('[ audioBroadcast.err ] >', err);
        this.autoPlay(timerCount);
      });
  }
});

注意:

  1. Voice input quota:每个小程序250条/分钟,3w条/天.
  2. Text translation quota:每个小程序500次/分钟,10w次/天.
  3. Speech synthesis quota:每个小程序100次/分钟,2w次/天.

问题归档

  1. 在小程序onHide,onUnload函数里调用 stop方法无效;需要同时调用 destroy方法
this.innerAudioContext.stop();
this.innerAudioContext.destroy();
  1. After testing, it was found that uppercase English letters in Chinese could not be recognized,Some lowercase English letters are pronounced incorrectly

参考

关注我

利用空闲时间免费兼职(无门槛,长期有效),请联系我(PS:关注公众号后,点击“联系我”获取联系方式)~ 吟秋知忆

原网站

版权声明
本文为[Yin qiu yi]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/222/202208101431162430.html