实现效果:
语音搜索
微信同声传译插件地址:https://github.com/Tencent/Face2FaceTranslator
实现思路:
1.按钮跟随键盘出现,使用Taro.onKeyboardHeightChange获取键盘高度,修改按钮和底部的距离,适配在键盘顶部。
2.通过Taro中的requirePlugin引入“WechatSI”插件,在useEffect中初始化manager的各个事件。
3.通过onLongPress长按事件触发manager.start事件开始录音,onTouchEnd事件触发manager.stop事件结束录音。从manager.onStop回调中获取识别内容。
具体代码(只有语音搜索代码片段,无法直接运行):
import Taro, {
requirePlugin } from "@tarojs/taro";
// 引入微信同声传译插件
const plugin = requirePlugin("WechatSI");
let manager = plugin.getRecordRecognitionManager();
// 键盘高度
const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
// 是否正在识别标识
const [isRecognize, setIsRecognize] = useState<boolean>(false);
// 是否展示识别结果
const [showResult, setShowResult] = useState<boolean>(false);
// 初始化语音识别
const initRecord =