L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Comment faire un éditeur de synthèse vocale
À propos de l'auteur
Knut Melvær est un technologue en sciences humaines qui travaille actuellement en tant que promoteur auprès de de Sanity.io . Il a déjà été consultant en technologie et développeur chez…
Pour en savoir plus sur Knut …
Ce n'est pas avant l'introduction de Siri, d'Amazon Echo et de Google Assistant d'Apple au milieu de 2015 que les interfaces vocales ont finalement trouvé leur place les foyers, les poignets et les poches du grand public. Nous sommes toujours dans une phase d’adoption, mais il semble que ces assistants vocaux sont là pour rester.
En d’autres termes, le Web n’est plus seulement du texte passif sur un écran . Les éditeurs Web et les concepteurs UX doivent s'habituer à créer du contenu et des services qui devraient être exprimés à voix haute.
Nous sommes déjà en train de rapidement utiliser des systèmes de gestion de contenu qui nous permettent de travailler avec notre contenu de manière autonome et via des API. Le dernier élément consiste à créer des interfaces éditoriales facilitant l’adaptation du contenu à la voix. C'est ce que nous faisons!
Qu'est-ce que SSML
Alors que les navigateurs Web utilisent la spécification W3C pour le langage HTML (HyperText Markup Language) afin de restituer des documents, la plupart des assistants vocaux utilisent le langage Speech Synthesis Markup Language (SSML) lors de la génération de discours.
Exemple minimal utilisant l'élément racine
) et de phrase (
Il s'agit de la première phrase du paragraphe.
Voici une autre phrase:
Lorsque SSML devient existant, nous introduisons des balises pour
Mettez un poids supplémentaire sur ces mots [1945] 19659015] Et dites ceci un peu plus haut et plus vite !
SSML possède davantage de fonctionnalités, mais cela suffit pour avoir une idée des bases. Examinons maintenant l'éditeur que nous allons utiliser pour créer l'interface d'édition de synthèse vocale.
L'éditeur de texte portable
Pour créer cet éditeur, nous allons utiliser l'éditeur de Portable Text. qui figure dans Sanity.io. Portable Text est une spécification JSON pour l'édition de texte enrichi, pouvant être sérialisée dans n'importe quel langage de balisage, tel que SSML. Cela signifie que vous pouvez facilement utiliser le même extrait de texte à plusieurs endroits en utilisant différents langages de marquage.
Installation de Sanity
Sanity.io est une plate-forme pour le contenu structuré fournie avec un environnement de montage à code source ouvert créé avec React.js. Cela prend deux minutes pour que tout soit opérationnel.
Tapez npm i -g @ sanity / cli && sanity init dans votre terminal et suivez les instructions. Choisissez "vide" lorsque vous êtes invité à saisir un modèle de projet.
Si vous ne souhaitez pas suivre ce tutoriel et créer cet éditeur à partir de zéro, vous pouvez également cloner le code de ce tutoriel et suivre. instructions de README.md .
Une fois l’éditeur téléchargé, vous exécutez sanity start dans le dossier du projet pour le démarrer. Il va démarrer un serveur de développement qui utilise Hot Module Reloading pour mettre à jour les modifications lors de la modification de ses fichiers.
Procédure de configuration des schémas dans Sanity Studio
Création des fichiers de l'éditeur
Commençons par créer un dossier appelé ssml-editor dans le dossier / schemas . Dans ce dossier, nous allons placer des fichiers vides:
/ ssml-tutorial / schemas / ssml-editor
├── alias.js
├── emphasis.js
├── annotations.js
├── preview.js
├── prosody.js
├── sayAs.js
├── blocksToSSML.js
├── speech.js
ML SSMLeditor.css
└── SSMLeditor.js
Nous pouvons maintenant ajouter des schémas de contenu dans ces fichiers. Les schémas de contenu définissent la structure de données du texte enrichi et sont utilisés par Sanity Studio pour générer l'interface éditoriale. Ce sont de simples objets JavaScript qui nécessitent le plus souvent un nom et un type .
Nous pouvons également ajouter un titre et une description . ] pour rendre un peu plus agréable pour les éditeurs. Par exemple, il s'agit d'un schéma pour un champ de texte simple pour un titre :
export default
nom: 'titre',
type: 'chaîne',
titre: 'Titre',
description: "Les titres doivent être courts et descriptifs"
}
Le texte portable est construit sur l'idée de riche texte en tant que données. Ceci est puissant car il vous permet d'interroger votre texte enrichi et de le convertir en pratiquement tout balisage souhaité.
Il s'agit d'un tableau d'objets appelés «blocs» que vous pouvez considérer comme des «paragraphes». Dans un bloc, il y a un éventail d'enfants. Chaque bloc peut avoir un style et un ensemble de définitions de marques, décrivant les structures de données réparties sur les étendues des enfants.
Sanity.io est livré avec un éditeur capable de lire et d'écrire sur du texte portable, et est activé en plaçant le . ] block dactylographier dans un champ array ainsi:
// speech.js
défaut d'exportation {
nom: 'speech',
type: 'tableau',
titre: 'Editeur SSML',
de: [
{ type: 'block' }
]
}
Un tableau peut être de plusieurs types. Pour un éditeur SSML, il peut s'agir de blocs pour fichiers audio, mais cela sort du cadre de ce didacticiel.
La dernière chose que nous souhaitons faire est d'ajouter un type de contenu où cet éditeur peut être utilisé. La plupart des assistants utilisent un modèle de contenu simple «d'intentions» et «d'accomplissements»:
- Intents
Habituellement, une liste de chaînes utilisées par le modèle d'IA pour définir ce que l'utilisateur veut faire. - Fulfillments
Cela se produit lorsqu'une «intention» est identifiée. Un accomplissement est souvent, ou du moins, accompagné d’une sorte de réponse.
Créons donc un type de contenu simple appelé accomplissement qui utilise l’éditeur de synthèse de parole. Créez un nouveau fichier nommé accomplissement.js et enregistrez-le dans le dossier / schema :
// accomplissement.js
défaut d'exportation {
nom: 'accomplissement',
type: 'document',
titre: 'Fulfillment',
de: [
{
name: 'title',
type: 'string',
title: 'Title',
description: 'Titles should be short and descriptive'
},
{
name: 'response',
type: 'speech'
}
]
}
Enregistrez le fichier et ouvrez le schema.js . Ajoutez-le à votre studio comme ceci:
// schema.js
importer createSchema de 'part: @ sanity / base / schema-creator'
importer schemaTypes depuis 'all: part: @ sanity / base / schema-type'
importer le remplissage de './fullfillment'
importer le discours de './speech'
export par défaut createSchema ({
nom: 'default',
types: schemaTypes.concat ([
fullfillment,
speech,
])
})
Si vous exécutez maintenant sanity start dans votre interface de ligne de commande dans le dossier racine du projet, le studio démarrera localement et vous pourrez ajouter des entrées pour les réalisations. Vous pouvez laisser le studio en fonction tant que nous continuerons, car il sera automatiquement rechargé avec les nouvelles modifications lorsque vous enregistrez les fichiers.
Ajout de SSML à l'éditeur
Par défaut, le type de bloc sera vous fournit un éditeur standard pour les textes riches orientés visuellement avec des styles de titre, des styles de décorateur pour accentuer et fort, des annotations pour des liens et des listes. Maintenant, nous voulons remplacer ceux avec les concepts d'audial trouvés dans SSML.
Nous commençons par définir les différentes structures de contenu, avec des descriptions utiles pour les éditeurs, que nous ajouterons au bloc dans SSMLeditorSchema.js en tant que configurations pour annotations . Celles-ci sont «emphase», «alias», «prosodie» et «dire comme».
Emphase
Commençons par «emphase», qui contrôle le poids accordé au texte marqué. Nous le définissons comme une chaîne avec une liste de valeurs prédéfinies parmi lesquelles l'utilisateur peut choisir:
// emphasis.js
défaut d'exportation {
nom: 'emphase',
type: 'objet',
titre: 'Emphasis',
la description:
"La force de l'accent mis sur le texte contenu",
champs: [
{
name: 'level',
type: 'string',
options: {
list: [
{ value: 'strong', title: 'Strong' },
{ value: 'moderate', title: 'Moderate' },
{ value: 'none', title: 'None' },
{ value: 'reduced', title: 'Reduced' }
]
}
}
]
}
Alias
Parfois, le terme écrit et le terme parlé diffèrent. Par exemple, vous voulez utiliser l'abréviation d'une phrase dans un texte écrit, mais la phrase entière doit être lue à voix haute. Par exemple:
Il s'agit d'un tutoriel SSML
Le champ de saisie de l'alias est une chaîne simple:
// alias.js
défaut d'exportation {
nom: 'alias',
type: 'objet',
titre: 'Alias (sub)',
la description:
'Remplace le texte contenu pour la prononciation. Cela permet à un document de contenir à la fois une forme parlée et écrite. ',
champs: [
{
name: 'text',
type: 'string',
title: 'Replacement text',
}
]
}
Prosody
La propriété prosody permet de contrôler différents aspects de la prononciation d'un texte, tels que la hauteur, la vitesse et le volume. Le balisage correspondant à ceci peut ressembler à ceci:
Dites-le avec un ton très grave et ce à haute vitesse
Cette entrée comportera trois champs avec des options de chaîne prédéfinies:
// prosody.js
défaut d'exportation {
nom: 'prosody',
type: 'objet',
titre: 'Prosody',
description: 'Contrôle du ton, de la vitesse de lecture et du volume',
champs: [
{
name: 'pitch',
type: 'string',
title: 'Pitch',
description: 'The baseline pitch for the contained text',
options: {
list: [
{ value: 'x-low', title: 'Extra low' },
{ value: 'low', title: 'Low' },
{ value: 'medium', title: 'Medium' },
{ value: 'high', title: 'High' },
{ value: 'x-high', title: 'Extra high' },
{ value: 'default', title: 'Default' }
]
}
},
{
nom: 'taux',
type: 'chaîne',
titre: 'Taux',
la description:
"Changement du taux de parole du texte contenu",
options: {
liste: [
{ value: 'x-slow', title: 'Extra slow' },
{ value: 'slow', title: 'Slow' },
{ value: 'medium', title: 'Medium' },
{ value: 'fast', title: 'Fast' },
{ value: 'x-fast', title: 'Extra fast' },
{ value: 'default', title: 'Default' }
]
}
},
{
nom: 'volume',
type: 'chaîne',
titre: 'Volume',
description: 'Le volume du texte contenu.',
options: {
liste: [
{ value: 'silent', title: 'Silent' },
{ value: 'x-soft', title: 'Extra soft' },
{ value: 'medium', title: 'Medium' },
{ value: 'loud', title: 'Loud' },
{ value: 'x-loud', title: 'Extra loud' },
{ value: 'default', title: 'Default' }
]
}
}
]
}
Say As
Le dernier que nous voulons inclure est
Dois-je frakking épeler pour vous?!
// sayAs.js
défaut d'exportation {
nom: 'sayAs',
type: 'objet',
titre: 'Dis comme ...',
description: 'Permet d'indiquer des informations sur le type de construction de texte contenu dans l'élément. Cela permet également de spécifier le niveau de détail pour le rendu.
le texte contenu. ',
champs: [
{
name: 'interpretAs',
type: 'string',
title: 'Interpret as...',
options: {
list: [
{ value: 'cardinal', title: 'Cardinal numbers' },
{
value: 'ordinal',
title: 'Ordinal numbers (1st, 2nd, 3th...)'
},
{ value: 'characters', title: 'Spell out characters' },
{ value: 'fraction', title: 'Say numbers as fractions' },
{ value: 'expletive', title: 'Blip out this word' },
{
value: 'unit',
title: 'Adapt unit to singular or plural'
},
{
value: 'verbatim',
title: 'Spell out letter by letter (verbatim)'
},
{ value: 'date', title: 'Say as a date' },
{ value: 'telephone', title: 'Say as a telephone number' }
]
}
},
{
nom date',
type: 'objet',
titre: 'Date',
champs: [
{
name: 'format',
type: 'string',
description: 'The format attribute is a sequence of date field character codes. Supported field character codes in format are {y, m, d} for year, month, and day (of the month) respectively. If the field code appears once for year, month, or day then the number of digits expected are 4, 2, and 2 respectively. If the field code is repeated then the number of expected digits is the number of times the code is repeated. Fields in the date text may be separated by punctuation and/or spaces.'
},
{
name: 'detail',
type: 'number',
validation: Rule =>
Rule.required()
.min(0)
.max(2),
description: 'The detail attribute controls the spoken form of the date. For detail='1' only the day fields and one of month or year fields are required, although both may be supplied'
}
]
}
]
}
Nous pouvons maintenant les importer dans un fichier annotations.js ce qui rend les choses un peu plus ordonnées.
// annotations.js
exporter {default as alias} de './alias'
exporter {par défaut comme souligné} de './emphasis'
exporter {default as prosody} de './prosody'
exporter {default as sayAs} de './sayAs'
Nous pouvons maintenant importer ces types d'annotation dans nos schémas principaux:
// schema.js
importer createSchema de "part: @ sanity / base / schema-creator"
importer schemaTypes de "all: part: @ sanity / base / schema-type"
importation de './fulfillment'
importer le discours de './ssml-editor/speech'
importer {
alias,
accentuation,
prosodie,
dit
} de './annotations'
export par défaut createSchema ({
nom: "défaut",
types: schemaTypes.concat ([
fulfillment,
speech,
alias,
emphasis,
prosody,
sayAs
])
})
Enfin, nous pouvons maintenant les ajouter à l'éditeur comme ceci:
// speech.js
défaut d'exportation {
nom: 'speech',
type: 'tableau',
titre: 'Editeur SSML',
de: [
{
type: 'block',
styles: [],
listes: [],
des notes: {
décorateurs: [],
annotations: [
{type: 'alias'},
{type: 'emphasis'},
{type: 'prosody'},
{type: 'sayAs'}
]
}
}
]
}
Notez que nous avons également ajouté des tableaux vides aux styles et décorateurs . Cela désactive les styles et les décorateurs par défaut (comme gras et gras) car ils n'ont pas beaucoup de sens dans ce cas particulier.
Personnalisation de l'aspect et de la sensation
Nous avons maintenant la fonctionnalité en place, mais Si vous n’avez spécifié aucune icône, chaque annotation utilisera l’icône par défaut, ce qui rend l’éditeur difficile à utiliser pour les auteurs.
Avec l’éditeur pour Portable Text, il est possible d’injecter des composants React à la fois pour les icônes et pour la manière dont le texte marqué doit être restitué. Ici, nous allons laisser quelques emoji faire le travail pour nous, mais vous pouvez évidemment aller loin avec cela, en les rendant dynamiques, etc. Pour prosody nous allons même faire changer l’icône en fonction du volume sélectionné. Notez que j’ai omis les champs de ces extraits pour des raisons de concision, vous ne devez pas les les supprimer dans vos fichiers locaux.
// alias.js
importer Réagir de 'réagir'
défaut d'exportation {
nom: 'alias',
type: 'objet',
titre: 'Alias (sub)',
description: 'Remplace le texte contenu pour la prononciation. Cela permet à un document de contenir à la fois une forme parlée et écrite. ',
champs: [
/* all the fields */
],
éditeur de bloc: {
icône: () => '?',
render: ({children}) => {children} ,
},
};
// emphasis.js
importer Réagir de 'réagir'
défaut d'exportation {
nom: 'emphase',
type: 'objet',
titre: 'Emphasis',
description: "La force de l'accent mis sur le texte contenu",
champs: [
/* all the fields */
],
éditeur de bloc: {
icône: () => '?',
render: ({children}) => {children} ,
},
};
// prosody.js
importer Réagir de 'réagir'
défaut d'exportation {
nom: 'prosody',
type: 'objet',
titre: 'Prosody',
description: 'Contrôle du ton, de la vitesse de lecture et du volume',
champs: [
/* all the fields */
],
éditeur de bloc: {
icône: () => '?',
render: ({enfants, volume}) => (
{enfants} {['x-loud', 'loud'] .includes (volume)? '': '?'}
),
},
};
// sayAs.js
importer Réagir de 'réagir'
défaut d'exportation {
nom: 'sayAs',
type: 'objet',
titre: 'Dis comme ...',
description: 'Permet d'indiquer des informations sur le type de construction de texte contenu dans l'élément. Cela permet également de spécifier le niveau de détail pour le rendu du texte contenu. ',
champs: [
/* all the fields */
],
éditeur de bloc: {
icône: () => '?',
render: props => {props.children} ,
},
};
Vous disposez maintenant d'un éditeur permettant d'éditer du texte pouvant être utilisé par des assistants vocaux.
Ajout d’un bouton de prévisualisation à l’aide de la synthèse vocale de Google
Les navigateurs sont actuellement pris en charge par la synthèse vocale native. Mais dans ce didacticiel, nous allons utiliser l’API de Google Text-to-Speech qui prend en charge SSML. La création de cette fonctionnalité de prévisualisation sera également une démonstration de la sérialisation du texte portable en SSML dans le service pour lequel vous souhaitez l'utiliser.
Emballage de l'éditeur dans un composant React
Commençons par ouvrir l'éditorial SSML . js et ajoutez le code suivant:
// SSMLeditor.js
importer Réagir, {Fragment} de 'réagir';
importer {BlockEditor} de 'part: @ sanity / form-builder';
fonction par défaut d'exportation SSMLeditor (props) {
revenir (
);
}
Nous avons maintenant intégré l'éditeur dans notre propre composant React. Tous les accessoires dont il a besoin, y compris les données qu'il contient, sont transmis en temps réel. Pour utiliser réellement ce composant, vous devez l'importer dans votre fichier speech.js :
// speech.js.
importer Réagir de 'réagir'
importer SSMLeditor depuis './SSMLeditor.js'
défaut d'exportation {
nom: 'speech',
type: 'tableau',
titre: 'Editeur SSML',
inputComponent: SSMLeditor,
de: [
{
type: 'block',
styles: [],
listes: [],
des notes: {
décorateurs: [],
annotations: [
{ type: 'alias' },
{ type: 'emphasis' },
{ type: 'prosody' },
{ type: 'sayAs' },
],
},
},
],
}
Lorsque vous sauvegardez ceci et que le studio est rechargé, il devrait ressembler à peu près à la même chose, mais c'est parce que nous n'avons pas encore commencé à peaufiner l'éditeur.
Convertir du texte portable en SSML
L'éditeur sauvegarde le content comme Portable Text un tableau d'objets en JSON facilitant la conversion de texte enrichi dans le format de votre choix. Lorsque vous convertissez du texte portable en une autre syntaxe ou un autre format, nous appelons cela la «sérialisation». Par conséquent, les «sérialiseurs» sont les recettes permettant de convertir le texte enrichi. Dans cette section, nous ajouterons des sérialiseurs pour la synthèse de la parole.
Vous avez déjà créé le fichier blocksToSSML.js . Nous devons maintenant ajouter notre première dépendance. Commencez par exécuter la commande de terminal npm init -y dans le dossier de l'éditeur ssml . Cela ajoutera un package.json où seront répertoriées les dépendances de l'éditeur.
Une fois que cela est fait, vous pouvez exécuter npm install @ sanity / block-content-to-html à Obtenez une bibliothèque qui facilite la sérialisation du texte portable. Nous utilisons la bibliothèque HTML parce que SSML a la même syntaxe XML avec les balises et les attributs.
Il s’agit d’un paquet de code, n'hésitez donc pas à le copier-coller. Je vais expliquer le motif situé juste en dessous de l’extrait:
// blocksToSSML.js
importer blockToHTML, {h} de '@ sanity / block-content-to-html'
sérialiseurs const = {
des notes: {
prosodie: ({enfants, note: {rate, pitch, volume}}) =>
h ('prosody', {attrs: {rate, pitch, volume}}, enfants),
alias: ({enfants, marque: {text}}) =>
h ('sub', {attrs: {alias: text}}, enfants),
sayAs: ({children, mark: {interprétAs}}) =>
h ('say-as', {attrs: {'interprète-as': interprète comme}}, enfants),
break: ({enfants, note: {temps, force}}) =>
h ('pause', {attrs: {heure: '$ {heure} ms', force}}, enfants),
emphase: ({enfants, marque: {niveau}}) =>
h ('emphasis', {attrs: {level}}, enfants)
}
}
exportation const blocksToSSML = blocks => blocksToHTML ({blocks, serializers})
Ce code exportera une fonction qui prend le tableau de blocs et les parcourt en boucle. Lorsqu'un bloc contient une marque il recherche un sérialiseur pour le type. Si vous avez marqué du texte sur en mettant l'accent sur il remplit cette fonction à partir de l'objet sérialiseurs:
en soulignant: ({enfants, marque: {niveau}}) =>
h ('emphasis', {attrs: {level}}, enfants)
Peut-être reconnaissez-vous le paramètre d'où nous avons défini le schéma? La fonction h () nous permet de définir un élément HTML, autrement dit, nous «trichons» et lui fait renvoyer un élément SSML appelé level si c'est défini, et y plaçons les éléments enfants – qui sera dans la plupart des cas le texte que vous avez marqué avec . .
{
"_type": "block",
"_key": "f2c4cf1ab4e0",
"style": "normal",
"markDefs": [
{
"_type": "emphasis",
"_key": "99b28ed3fa58",
"level": "strong"
}
],
"enfants": [
{
"_type": "span",
"_key": "f2c4cf1ab4e01",
"text": "Say this strongly!",
"marks": [
"99b28ed3fa58"
]
}
]
}
Voici comment la structure ci-dessus dans Portable Text est sérialisée en SSML:
Dites-le fermement
Si vous souhaitez prendre en charge davantage de balises SSML, vous pouvez ajouter davantage d'annotations dans le schéma et ajouter les types d'annotation à la section Marques des sérialiseurs.
Nous avons maintenant une fonction qui renvoie Balisage SSML à partir de notre texte enrichi balisé. La dernière partie consiste à créer un bouton permettant d'envoyer ce balisage à un service de synthèse vocale.
Ajout d'un bouton d'aperçu qui vous répond
Idéalement, nous aurions dû utiliser le discours du navigateur . fonctions de synthèse dans l'API Web . De cette façon, nous aurions pu nous passer de moins de code et de dépendances.
Cependant, début 2019, la prise en charge du navigateur natif pour la synthèse vocale en était encore à ses débuts. Il semble que la prise en charge de SSML soit imminente et les concepts de implémentation de JavaScript côté client sont valides.
Il est fort probable que vous utiliserez ce contenu avec un assistant vocal de toute façon. . Les assistants Google et Amazon Echo (Alexa) prennent en charge SSML en tant que réponses à une exécution. Dans ce didacticiel, nous allons utiliser l’API de synthèse vocale de Google, qui sonne bien également et prend en charge plusieurs langues.
Commencez par obtenir une clé API en vous inscrivant à Google Cloud Platform (ce sera gratuit pour le premier million de caractères que vous traitez). Une fois inscrit, vous pouvez créer une nouvelle clé API sur la page cette page .
Vous pouvez maintenant ouvrir votre fichier PreviewButton.js et y ajouter ce code:
// PreviewButton.js
importer Réagir de 'réagir'
bouton d'importation de 'part: @ sanity / components / buttons / default'
importer {blocksToSSML} de './blocksToSSML'
// Vous devriez faire attention avec le partage de cette clé
// je le mets ici pour garder le code simple
const API_KEY = ''
const GOOGLE_TEXT_TO_SPEECH_URL = 'https://texttospeech.googleapis.com/v1beta1/text:synthesize?key=' + API_KEY
const speak = blocs asynchrones => {
// Sérialiser des blocs en SSML
const ssml = blocksToSSML (blocks)
// Préparer la configuration de synthèse vocale de Google
const corps = JSON.stringify ({
entrée: {ssml},
// Sélectionnez le code de langue et le nom de la voix (A-F)
voix: {languageCode: 'en-US', nom: 'en-US-Wavenet-A'},
// Utiliser le MP3 pour jouer dans le navigateur
audioConfig: {audioEncoding: 'MP3'}
})
// Envoyer la chaîne SSML à l'API
const res = attend la récupération (GOOGLE_TEXT_TO_SPEECH_URL, {
méthode: 'POST',
corps
}). then (res => res.json ())
// Lecture de l'audio renvoyé avec l'API Audo du navigateur
const audio = new Audio ('data: audio / wav; base64,' + res.audioContent)
audio.play ()
}
fonction d'exportation par défaut PreviewButton (props) {
return
}
J'ai gardé le code de ce bouton de prévisualisation à un niveau minimal pour faciliter la lecture de ce didacticiel. Bien sûr, vous pouvez le construire en ajoutant state pour indiquer si l'aperçu est en cours de traitement ou permettre de prévisualiser avec les différentes voix prises en charge par l'API de Google.
Ajoutez le bouton à SSMLeditor.js :
// SSMLeditor.js
importer Réagir, {Fragment} de 'réagir';
importer {BlockEditor} de 'part: @ sanity / form-builder';
importer PreviewButton de './PreviewButton';
fonction par défaut d'exportation SSMLeditor (props) {
revenir (
);
}
Vous devriez maintenant pouvoir marquer votre texte avec les différentes annotations et entendre le résultat lorsque vous appuyez sur «Parler un texte». Cool, n'est-ce pas?
Vous avez créé un éditeur de synthèse vocale et maintenant
Si vous avez suivi ce didacticiel, vous avez découvert comment vous pouvez utiliser l'éditeur de texte portable dans Sanity Studio pour créer des annotations personnalisées et personnaliser l'éditeur. Vous pouvez utiliser ces compétences pour toutes sortes de choses, pas seulement pour créer un éditeur de synthèse vocale. Vous avez également appris à sérialiser Portable Text dans la syntaxe dont vous avez besoin. De toute évidence, cela est également utile si vous construisez des interfaces dans React ou Vue. Vous pouvez même utiliser ces compétences pour générer Markdown à partir de Portable Text.
Nous n'avons pas expliqué comment vous l'utilisiez avec un assistant vocal. Si vous souhaitez essayer, vous pouvez utiliser une grande partie de la même logique que celle du bouton Aperçu dans une fonction sans serveur et la définir comme point de terminaison de l'API pour une exécution à l'aide de Webhooks, par exemple. avec Dialogflow .
Si vous souhaitez que je rédige un tutoriel sur l'utilisation de l'éditeur de synthèse de la parole avec un assistant vocal, n'hésitez pas à me donner un indice sur Twitter ou partagez-vous dans la section des commentaires ci-dessous.
Lectures complémentaires sur SmashingMag:
(dm, ra, yk, il)
Source link