语音合成服务支持将文字信息转换为语音输出,提供丰富的音色以及可通过调整音量、语速从而使发音达到更加真实自然的效果。该服务采用深度神经网络合成方式,可通过端侧SDK快速集成,能够实时输出音频数据。当前版本有2种标准男声发音人,以及6种标准女声发音人可供选择(详细发音人信息请参见音色试听)。该服务已在全球部署。
调用mltts.speak接口,实现语音合成并播放,然后通过设置callback和fail回调获取返回结果。语音合成过程中,callback会实时监听回调,通过返回的eventName判断事件类型,从而进行相关业务操作。
<template>
<div class="container">
<text class="title">{{ title }}</text>
<textarea class="sourceText" placeholder="Please input" @change="update_sourceText">{{ sourceText }}</textarea>
<div class="selector">
<select class="source_language" @change="update_language">
<option value="zh-Hans" selected="true">chinese</option>
<option value="en-US" selected="false">english</option>
<option value="fr-FR" selected="false">french</option>
<option value="it-IT" selected="false">Italian</option>
<option value="de-DE" selected="false">german</option>
<option value="es-ES" selected="false">spanish</option>
</select>
<select class="source_speaker" @change="update_speaker">
<option value="zh-Hans-st-1" selected="true">Chinese - female voice</option>
<option value="zh-Hans-st-2" selected="false">Chinese male voice</option>
<option value="en-US-st-1" selected="false">English - female voice</option>
<option value="en-US-st-2" selected="false">English male voice</option>
<option value="fr-FR-st-1" selected="false">French female voice</option>
<option value="it-IT-st-1" selected="false">Italian female voice</option>
<option value="de-DE-st-1" selected="false">German - female voice</option>
<option value="es-ES-st-1" selected="false">Spanish - female voice</option>
</select>
<select class="queueMode" @change="update_queueMode">
<option value="0" selected="true">Queuing mode</option>
<option value="1" selected="false">Clear mode</option>
</select>
</div>
<div class="label-item">
<label>Playback speed :</label>
<input class="flex" value="{{ speed }}" @change="update_speed" type="number" />
<label>Playback volume:</label>
<input class="flex" value="{{ volume }}" @change="update_volume" type="number" />
</div>
<input type="button" class="btn_clear" value="Clear content" @click="clear_sourceText" />
<input type="button" class="btn" value="Start speech synthesis" @click="mltts_speak" />
<input type="button" class="btn" value="Stop speech synthesis" @click="mltts_stop" />
<input type="button" class="btn" value="Pause play" @click="mltts_pausePlay" />
<input type="button" class="btn" value="Continue playing" @click="mltts_resumePlay" />
</div>
</template>
<style>
.container {
flex-direction: column;
}
.title{
font-size: 50px;
color: #000000;
text-align: center;
margin-bottom: 30px
}
.sourceText {
margin: 0 auto;
width: 90%;
height: 350px;
border: 1px solid #000000;
}
.selector {
width: 90%;
margin: 60px auto;
justify-content: space-around;
}
.selector select {
border: 1px solid #000000;
}
.label-item{
width: 90%;
justify-content: space-between;
margin: 0 auto;
}
.flex{
border:1px solid #000000;
margin: 15px auto;
width: 25%;
height: 70px
}
label{
font-size: 36px;
}
.btn {
width: 400px;
height: 120px;
background-color: #00bfff;
border-radius: 10px;
margin: 20px auto;
}
.btn:active{
background-color: rgb(154, 230, 233);
}
.btn_clear {
width: 145px;
height: 70px;
font-size: 28px;
background-color: #00bfff;
margin: 35px 0 20px 570px;
border-radius: 5px;
}
</style>
<script>
import mltts from "@service.ml.tts";
import prompt from "@system.prompt";
export default {
data: {
title: "Voice synthesis service",
sourceText: "This is a test",
language: "",
speaker: "",
queueMode: "",
speed: "",
volume: ""
},
mltts_speak() {
mltts.speak({
appId: "103913469",
apiKey: "CgB6e3x9805WIU1KE8lnMBc+ka/A5sJ5DBKsSzGGkYuV7E/GxY18tAdAM5Zc5hg48CKW4kzmfarv75bRdiDe4RhK",
language: this.language,
speaker: this.speaker,
speed: this.speed,
volume: this.volume,
queueMode: this.queueMode,
sourceText: this.sourceText,
callback: (eventName, taskId, ...data) => {
console.log(eventName, taskId, ...data);
console.log(this.sourceText);
switch (eventName) {
case "onWarn":
let mlTtsWarn = data[0];
break;
case "onRangeStart":
let start = data[0];
let end = data[1];
break;
case " onPlayStart":
break;
case " onPlayResume":
break;
case "onPlayPause":
break;
case "onPlayStop":
break;
case "onSynthesisStart":
break;
case "onSynthesisEnd":
break;
}
},
fail: (errMsg, errCode) => {
console.log("error:", errMsg);
prompt.showToast({
message: "errCode:" + errCode + "-" + errMsg
});
}
});
},
mltts_stop() {
mltts.stop();
console.log("Speech synthesis stopped");
prompt.showToast({
message: "Speech synthesis stopped"
});
},
mltts_pausePlay() {
mltts.pausePlay();
console.log("Pause play");
prompt.showToast({
message: "Pause play"
});
},
mltts_resumePlay() {
mltts.resumePlay();
console.log("Continue playing");
prompt.showToast({
message: "Continue playing"
});
},
update_sourceText(e) {
let value = e.newValue ? e.newValue : e.text;
this.sourceText = value;
console.log(this.sourceText);
},
update_language(e) {
let value = e.newValue ? e.newValue : e.text;
this.language = value;
},
update_speaker(e) {
let value = e.newValue ? e.newValue : e.text;
this.speaker = value;
},
update_queueMode(e) {
let value = e.newValue ? e.newValue : e.text;
this.queueMode = value;
},
clear_sourceText: function () {
this.sourceText = "";
this.speed = "";
this.volume = "";
},
update_speed(e) {
let value = e.newValue ? e.newValue : e.text;
this.speed = value;
if (this.speed > 5) {
prompt.showToast({
message: "The effective value of speech speed is 0-5"
});
this.speed = "";
}
},
update_volume(e) {
let value = e.newValue ? e.newValue : e.text;
this.volume = value;
if (this.volume > 2) {
prompt.showToast({
message: "The effective value of speech speed is 0-2"
});
this.volume = "";
}
},
onBackPress() {
mltts.stop();
console.info(`Triggered:onBackPress`);
}
};
</script>