WeChat applet implements speech synthesis function

Call WeChat Tencent Cloud Intelligent Voice to realize intelligent voice broadcast

Applicable scenario: When the applet needs to implement text synthesis and voice broadcasting

通过调用腾讯云智能语音实现

Concrete implementation steps

  1. The mini program logs into the WeChat public platform
  2. Click Settings –> Third Party Settings –> Plugin Management –> Add Plugin
  3. Search 腾讯云智能语音, as shown below
    insert image description here
  4. Add plugins to your own applet (pages.json or app.json):
"plugins": {
    
       // 引入插件
		"QCloudAIVoice": {
    
    
			"version": "1.3.4", //请于文档顶部【版本更新能力】中获取最新版本号
			"provider": "wx3e17776051baf153"
		}
	}
  1. Introduce the plug-in on the page that needs to use the plug-in
let plugin = requirePlugin("QCloudAIVoice");// 引入插件
plugin.setQCloudSecret(appid, secretid, secretkey, openConsole); //设置腾讯云账号信息,其中appid是数字,secret是字符串,openConsole是布尔值(true/false),为控制台打印日志开关

  • Business code writing, the following is the sample code:
<scriprt>
// 创建音频组件
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;
innerAudioContext.src = '';
// 音频播放方法
play(id){
    
    
		var that = this;
		if(that.oldId == id && that.currentTime > 0){
    
    // 控制是否是当前已经播报过,现在处于暂停的文章
			//暂停之后点击播放继续播放
			innerAudioContext.play();
			innerAudioContext.onEnded((res) => {
    
    
			})
		}else{
    
    //新文章
			var extras = that.content;// 要播报的文本
			var lastExtras;
			// 提取汉字(由于笔者要播报的来自富文本,所以需要提取文字)
			if(extras != null && extras != ''){
    
    
				// 去掉html标签
				lastExtras = extras.replace(/<[^>]+>/g,"");
				// 只留汉字和数字
				lastExtras = lastExtras.replace(/[^\u4e00-\u9fa5_0-9]/gi,"");
			}
			if(lastExtras.length > 100){
    
    
				lastExtras = lastExtras.substr(0,100);
			}
			var encoded = encodeURI(lastExtras);
				plugin.textToSpeech({
    
    
					content: lastExtras,
					speed: 0,
					volume: 0,
					voiceType: 0,
					language: 1,
					projectId: 0,
					sampleRate: 16000,
					success: function(data) {
    
    
						let url = data.result.filePath;
						if(url && url.length > 0){
    
    
							innerAudioContext.autoplay = true;
							innerAudioContext.src = url;
							innerAudioContext.onPlay(() => {
    
    
							});
							innerAudioContext.onError((res) => {
    
    
								console.log(res.errMsg)
							});
						}
					},
					fail: function(error){
    
    
						console.log(error);
					}
				})
		}
		that.oldId = id;
	},
</script>

Summarize

The above are the steps to achieve text synthesis by calling the Tencent Cloud Smart Voice plug-in, and the article code is just a sample code.

  • For specific usage, please refer to the official documentation (you need to log in, and you will see it after the third step)
  • Since only 100 Chinese characters are supported to synthesize speech, if you need to synthesize an article with more than 100 characters, you need to intercept and process it. For specific operations, please check my next article!
    insert image description here

Guess you like

Origin blog.csdn.net/Shiny_boy_/article/details/125932009