We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Cookie Settings
Only Essential Cookies
Accept All
MaterialsConsole

Quick App

输入关键字搜索
HMS Core
AppGallery Connect
HUAWEI HiAI
CTRL+K
quickApp GuidesQuick AppQuick App DevelopmentDeveloping Your Quick AppIntegrating ML KitText to Speech

Text to Speech

Last updated: 2023-07-14 09:12
Content overview
Expand

Overview

Text to speech (TTS) can convert text into speech. Rich timbres, and volume and speed options are supported to produce more natural sounds. This service uses the deep neural network (DNN) synthesis mode and can be quickly integrated through the on-device SDK to generate audio data in real time. In the current version, two standard male voices and six standard female voices are available. (For details, please refer to Timbres.) This service has been deployed globally.

Before You Start

Before integrating this capability into your app, you'll need to complete the following preparations:

Integration Guide

NOTICE
  • Currently, TTS for French, Spanish, German, and Italian is available only on Huawei and Honor phones; TTS for Chinese and English is available on all phones.
  • The text in a single request can contain a maximum of 500 characters and must be encoded using UTF-8.
  • Currently, TTS in French, Spanish, German, and Italian is deployed only in Asia, Africa, Latin America, and Europe.
  • TTS depends on on-cloud APIs. During commissioning and usage, ensure that the device can access the Internet.
  • Default specifications of the real-time output audio data are as follows: PCM mono, 16-bit depth, and 16 kHz audio sampling rate.

Starting TTS and Playback

Call the mltts.speak API to implement TTS and playback, and set callback and fail for returning the callback result. During TTS, callback listens to callback in real time, determines the event type based on the returned eventName, and performs related service operations.

Pausing Playback

You can call the mltts.pausePlay API to pause playback.

Resuming Playback

You can call the mltts.resumerPlay API to resume playback.

Stopping TTS

You can call the mltts.stop API to stop TTS.

Demo

Watch video

Collapse
Word wrap
Dark theme
Copy code
  1. <template>
  2.     <div class="container">
  3.         <text class="title">{{ title }}</text>
  4.         <textarea class="sourceText" placeholder="Please input" @change="update_sourceText">{{ sourceText }}</textarea>
  5.         <div class="selector">
  6.             <select class="source_language" @change="update_language">
  7.                 <option value="zh-Hans" selected="true">chinese</option>
  8.                 <option value="en-US" selected="false">english</option>
  9.                 <option value="fr-FR" selected="false">french</option>
  10.                 <option value="it-IT" selected="false">Italian</option>
  11.                 <option value="de-DE" selected="false">genman</option>
  12.                 <option value="es-ES" selected="false">spanish</option>
  13.             </select>
  14.             <select class="source_speaker" @change="update_speaker">
  15.                 <option value="zh-Hans-st-1" selected="true">Chinese - female voice</option>
  16.                 <option value="zh-Hans-st-2" selected="false">Chinese male voice</option>
  17.                 <option value="en-US-st-1" selected="false">English - female voice</option>
  18.                 <option value="en-US-st-2" selected="false">English male voice</option>
  19.                 <option value="fr-FR-st-1" selected="false">French female voice</option>
  20.                 <option value="it-IT-st-1" selected="false">Italian female voice</option>
  21.                 <option value="de-DE-st-1" selected="false">German - female voice</option>
  22.                 <option value="es-ES-st-1" selected="false">Spanish - female voice</option>
  23.             </select>
  24.             <select class="queueMode" @change="update_queueMode">
  25.                 <option value="0" selected="true">Queuing mode</option>
  26.                 <option value="1" selected="false">Clear mode</option>
  27.             </select>
  28.         </div>
  29.         <div class="label-item">
  30.             <label>Playback speed :</label>
  31.             <input class="flex" value="{{ speed }}"  @change="update_speed" type="number" />
  32.             <label>Playback volume:</label>
  33.             <input class="flex" value="{{ volume }}"  @change="update_volume" type="number" />
  34.         </div>
  35.         <input type="button" class="btn_clear" value="Clear content" @click="clear_sourceText" />
  36.         <input type="button" class="btn" value="Start speech synthesis" @click="mltts_speak" />
  37.         <input type="button" class="btn" value="Stop speech synthesis" @click="mltts_stop" />
  38.         <input type="button" class="btn" value="Pause play" @click="mltts_pausePlay" />
  39.         <input type="button" class="btn" value="Continue playing" @click="mltts_resumePlay" />
  40.     </div>
  41. </template>
  42. <style>
  43.     .container {
  44.         flex-direction: column;
  45.     }
  46.     .title{
  47.         font-size: 50px;
  48.         color: #000000;
  49.         text-align: center;
  50.         margin-bottom: 30px
  51.     }
  52.     .sourceText {
  53.         margin: 0 auto;
  54.         width: 90%;
  55.         height: 350px;
  56.         border: 1px solid #000000;
  57.     }
  58.     .selector {
  59.         width: 90%;
  60.         margin: 60px auto;
  61.         justify-content: space-around;
  62.     }
  63.     .selector select {
  64.         border: 1px solid #000000;
  65.     }
  66.     .label-item{
  67.         width: 90%;
  68.         justify-content: space-between;
  69.         margin: 0 auto;
  70.     }
  71.     .flex{
  72.         border:1px solid #000000;
  73.         margin: 15px auto;
  74.         width: 25%;
  75.         height: 70px
  76.     }
  77.     label{
  78.         font-size: 36px;
  79.     }
  80.     .btn {
  81.         width: 400px;
  82.         height: 120px;
  83.         background-color: #00bfff;
  84.         border-radius: 10px;
  85.         margin: 20px auto;
  86.     }
  87.     .btn:active{
  88.         background-color: rgb(154, 230, 233);
  89.     }
  90.     .btn_clear {
  91.         width: 145px;
  92.         height: 70px;
  93.         font-size: 28px;
  94.         background-color: #00bfff;
  95.         margin: 35px 0 20px 570px;
  96.         border-radius: 5px;
  97.     }
  98. </style>
  99. <script>
  100.     import mltts from "@service.ml.tts";
  101.     import prompt from "@system.prompt";
  102.     export default {
  103.         data: {
  104.             title: "Voice synthesis service",
  105.             sourceText: "This is a test",
  106.             language: "",
  107.             speaker: "",
  108.             queueMode: "",
  109.             speed: "",
  110.             volume: ""
  111.         },
  112.         mltts_speak() {
  113.             mltts.speak({
  114.                 appId: "103913469", 
  115.                 apiKey: "CgB6e3x9805WIU1KE8lnMBc+ka/A5sJ5DBKsSzGGkYuV7E/GxY18tAdAM5Zc5hg48CKW4kzmfarv75bRdiDe4RhK", 
  116.                 language: this.language, 
  117.                 speaker: this.speaker, 
  118.                 speed: this.speed, 
  119.                 volume: this.volume, 
  120.                 queueMode: this.queueMode, 
  121.                 sourceText: this.sourceText, 
  122.                 callback: (eventName, taskId, ...data) => {
  124.                     console.log(eventName, taskId, ...data);
  125.                     console.log(this.sourceText);
  126.                     switch (eventName) {
  127.                         case "onWarn": 
  128.                             let mlTtsWarn = data[0]; 
  129.                             break;
  130.                         case "onRangeStart": 
  131.                             let start = data[0]; 
  132.                             let end = data[1]; 
  133.                             break;
  134.                         case " onPlayStart": 
  135.                             break;
  136.                         case " onPlayResume": 
  137.                             break;
  138.                         case "onPlayPause": 
  139.                             break;
  140.                         case "onPlayStop": 
  141.                             break;
  142.                         case "onSynthesisStart": 
  143.                             break;
  144.                         case "onSynthesisEnd": 
  145.                             break;
  146.                     }
  147.                 },
  148.                 fail: (errMsg, errCode) => {
  150.                     console.log("error:", errMsg);
  151.                     prompt.showToast({
  152.                         message: "errCode:" + errCode + "-" + errMsg
  153.                     });
  154.                 }
  155.             });
  156.         },
  157.         mltts_stop() {
  158.             mltts.stop(); 
  159.             console.log("Speech synthesis stopped");
  160.             prompt.showToast({
  161.                 message: "Speech synthesis stopped"
  162.             });
  163.         },
  164.         mltts_pausePlay() {
  165.             mltts.pausePlay(); 
  166.             console.log("Pause play");
  167.             prompt.showToast({
  168.                 message: "Pause play"
  169.             });
  170.         },
  171.         mltts_resumePlay() {
  172.             mltts.resumePlay(); 
  173.             console.log("Continue playing");
  174.             prompt.showToast({
  175.                 message: "Continue playing"
  176.             });
  177.         },
  178.         update_sourceText(e) {
  179.             let value = e.newValue ? e.newValue : e.text;
  180.             this.sourceText = value;
  181.             console.log(this.sourceText);
  182.         },
  183.         update_language(e) {
  184.             let value = e.newValue ? e.newValue : e.text;
  185.             this.language = value;
  186.         },
  187.         update_speaker(e) {
  188.             let value = e.newValue ? e.newValue : e.text;
  189.             this.speaker = value;
  190.         },
  191.         update_queueMode(e) {
  192.             let value = e.newValue ? e.newValue : e.text;
  193.             this.queueMode = value;
  194.         },
  195.         clear_sourceText: function () {
  196.             this.sourceText = "";
  197.             this.speed = "";
  198.             this.volume = "";
  199.         },
  200.         update_speed(e) {
  201.             let value = e.newValue ? e.newValue : e.text;
  202.             this.speed = value;
  203.             if (this.speed > 5) {
  204.                 prompt.showToast({
  205.                     message: "The effective value of speech speed is 0-5"
  206.                 });
  207.                 this.speed = "";
  208.             }
  209.         },
  210.         update_volume(e) {
  211.             let value = e.newValue ? e.newValue : e.text;
  212.             this.volume = value;
  213.             if (this.volume > 2) {
  214.                 prompt.showToast({
  215.                     message: "The effective value of speech speed is 0-2"
  216.                 });
  217.                 this.volume = "";
  218.             }
  219.         },
  221.         onBackPress() {
  222.             mltts.stop();
  223.             console.info(`Triggered: onBackPress`);
  224.         }
  225.     };
  226. </script>
Text Translation
Introduction
English
©2026 HUAWEI Developers. All rights reserved.
Terms of Use
Statement About HUAWEI Developers and Privacy
Cookies
Cookie Settings
Open-Source Software Notice