Konuşma Sentezi Düzenleyicisi Nasıl Yapılır

Steve Jobs 1984 yılında Macintosh'u tanıttığında bize sahneden “Merhaba” dedi. O noktada bile, konuşma sentezi gerçekten yeni bir teknoloji değildi: Bell Labs ses kodlayıcıyı 30'ların sonlarında geliştirdi ve bir ses yardımcı bilgisayarı kavramı, Stanley Kubrick ses kodlayıcıyı ses kodlayıcıyı yaptığında insanların farkındalığına getirdi. 2001 yılında HAL9000: Bir Uzay Macerası (1968).

2015'lerin ortalarında Apple'ın Siri, Amazon Echo ve Google Assistant'ın piyasaya sürülmesinden önce, ses arayüzlerinin aslında daha geniş bir halkın evlerine, bileklerine ve ceplerine girme yolunu bulması değildi. Hâlâ benimseme aşamasındayız, ancak bu sesli asistanlar kalıcı olacak gibi görünüyor.

Başka bir deyişle, web artık sadece bir ekrandaki pasif metin değildir . Web editörleri ve UX tasarımcıları, yüksek sesle konuşulması gereken içerik ve hizmetler oluşturmaya alışmalıdır.

İçeriğimizle başsız bir şekilde ve API'ler aracılığıyla çalışmamıza izin veren içerik yönetim sistemlerini kullanmaya doğru hızla ilerliyoruz. Son parça, içeriği sese göre uyarlamayı kolaylaştıran editoryal arayüzler yapmaktır. Öyleyse sadece bunu yapalım!

SSML Nedir?

Web tarayıcıları belgeleri görsel olarak oluşturmak için W3C'nin Köprü Metni İşaretleme Dili (HTML) belirtimini kullanırken, çoğu sesli yardımcı konuşma oluştururken Konuşma Sentezi İşaretleme Dili'ni (SSML) kullanır.

<speak> kök öğesini ve paragraf ( <p> ) ve cümle ( <s> ) etiketlerini kullanan minimal bir örnek:

 <speak> <p> <s>This is the first sentence of the paragraph.</s> <s>Here's another sentence.</s> </p> </speak>

SSML'nin ortaya çıktığı yer, <emphasis> ve <prosody> (pitch) için etiketleri tanıttığımız zamandır:

 <speak> <p> <s>Put some <emphasis strength="strong">extra weight on these words</emphasis></s> <s>And say <prosody pitch="high" rate="fast">this a bit higher and faster</prosody>!</s> </p> </speak>

SSML'nin daha fazla özelliği vardır, ancak bu, temel bilgiler için bir fikir edinmek için yeterlidir. Şimdi konuşma sentezi düzenleme arayüzünü yapmak için kullanacağımız editöre daha yakından bakalım.

Taşınabilir Metin Editörü

Bu düzenleyiciyi yapmak için Sanity.io'da bulunan Taşınabilir Metin düzenleyicisini kullanacağız. Taşınabilir Metin, zengin metin düzenleme için SSML gibi herhangi bir biçimlendirme diline serileştirilebilen bir JSON özelliğidir. Bu, aynı metin parçacığını farklı biçimlendirme dillerini kullanarak birden çok yerde kolayca kullanabileceğiniz anlamına gelir.

Sanity'yi Yüklemek

Sanity.io, React.js ile oluşturulmuş açık kaynaklı bir düzenleme ortamıyla gelen, yapılandırılmış içerik için bir platformdur. Her şeyi hazır hale getirmek ve çalıştırmak iki dakika sürer.

npm i -g @sanity/cli && sanity init yazın ve talimatları izleyin. Bir proje şablonu istendiğinde "boş"u seçin.

Bu öğreticiyi takip etmek ve bu düzenleyiciyi sıfırdan yapmak istemiyorsanız, bu öğreticinin kodunu da kopyalayabilir ve README.md içindeki yönergeleri uygulayabilirsiniz.

Düzenleyici indirildiğinde, sanity start . Siz dosyalarını düzenlerken değişiklikleri güncellemek için Hot Module Reloading'i kullanan bir geliştirme sunucusu başlatacaktır.

Sanity Studio'da Şemalar Nasıl Yapılandırılır

Editör Dosyalarını Oluşturma

/ schemas klasöründe ssml-editor adında bir klasör oluşturarak başlayacağız. Bu klasöre bazı boş dosyalar koyacağız:

 /ssml-tutorial/schemas/ssml-editor ├── alias.js ├── emphasis.js ├── annotations.js ├── preview.js ├── prosody.js ├── sayAs.js ├── blocksToSSML.js ├── speech.js ├── SSMLeditor.css └── SSMLeditor.js

Artık bu dosyalara içerik şemaları ekleyebiliriz. İçerik şemaları , zengin metin için veri yapısını tanımlayan ve Sanity Studio'nun editoryal arayüzü oluşturmak için kullandığı şeydir. Çoğunlukla yalnızca bir name ve bir type gerektiren basit JavaScript nesneleridir.

Ayrıca editörler için biraz daha hoş hale getirmek için bir title ve description ekleyebiliriz. Örneğin, bu bir title için basit bir metin alanı şemasıdır:

 export default { name: 'title', type: 'string', title: 'Title', description: 'Titles should be short and descriptive' } 

Taşınabilir Metin, veri olarak zengin metin fikri üzerine kurulmuştur. Bu güçlüdür, çünkü zengin metninizi sorgulamanıza ve hemen hemen istediğiniz herhangi bir biçimlendirmeye dönüştürmenize olanak tanır.

“Paragraflar” olarak düşünebileceğiniz “bloklar” adı verilen bir nesne dizisidir. Bir blokta, bir dizi çocuk yayılma alanı vardır. Her blok bir stile ve alt yayılma alanlarına dağıtılan veri yapılarını tanımlayan bir dizi işaret tanımına sahip olabilir.

Sanity.io, Taşınabilir Metin okuyabilen ve yazabilen bir düzenleyiciyle birlikte gelir ve block türünü aşağıdaki gibi bir array alanına yerleştirerek etkinleştirilir:

 // speech.js export default { name: 'speech', type: 'array', title: 'SSML Editor', of: [ { type: 'block' } ] }

Bir dizi birden çok türde olabilir. Bir SSML düzenleyicisi için bunlar, ses dosyaları için bloklar olabilir, ancak bu, bu öğreticinin kapsamı dışındadır.

Yapmak istediğimiz son şey, bu düzenleyicinin kullanılabileceği bir içerik türü eklemek. Çoğu asistan, basit bir "amaçlar" ve "yerine getirme" içerik modeli kullanır:

• Amaçlar
  Genellikle, AI modeli tarafından kullanıcının ne yapmak istediğini betimlemek için kullanılan dizelerin bir listesi.
• yerine getirilmesi
  Bu, bir "niyet" tanımlandığında gerçekleşir. Bir yerine getirme genellikle - veya en azından - bir tür yanıtla birlikte gelir.

Öyleyse, konuşma sentezi düzenleyicisini kullanan, fulfillment adı verilen basit bir içerik türü yapalım. yerine getirme.js adında yeni bir dosya oluşturun ve /schema klasörüne kaydedin:

 // fulfillment.js export default { name: 'fulfillment', type: 'document', title: 'Fulfillment', of: [ { name: 'title', type: 'string', title: 'Title', description: 'Titles should be short and descriptive' }, { name: 'response', type: 'speech' } ] }

Dosyayı kaydedin ve schema.js dosyasını açın. Stüdyonuza şu şekilde ekleyin:

 // schema.js import createSchema from 'part:@sanity/base/schema-creator' import schemaTypes from 'all:part:@sanity/base/schema-type' import fullfillment from './fullfillment' import speech from './speech' export default createSchema({ name: 'default', types: schemaTypes.concat([ fullfillment, speech, ]) })

Şimdi projenin kök klasöründeki komut satırı arayüzünüzde sanity start çalıştırırsanız, stüdyo yerel olarak başlayacak ve yerine getirmeler için girişler ekleyebileceksiniz. Dosyaları kaydettiğinizde yeni değişikliklerle otomatik olarak yeniden yükleneceği için biz devam ederken stüdyoyu çalışır durumda tutabilirsiniz.

Editöre SSML Ekleme

Varsayılan olarak, block türü size görsel olarak yönlendirilmiş zengin metin için başlık stilleri, vurgu ve güçlü için dekoratör stilleri, bağlantılar için ek açıklamalar ve listeler için standart bir düzenleyici verecektir. Şimdi SSML'de bulunan işitsel kavramlara sahip olanları geçersiz kılmak istiyoruz.

SSMLeditorSchema.js'deki block annotations için konfigürasyonlar olarak ekleyeceğimiz, editörler için faydalı açıklamalar ile farklı içerik yapılarını tanımlamaya başlıyoruz. Bunlar “vurgu”, “takma ad”, “aruz” ve “olarak söyle”dir.

Vurgu

İşaretli metne ne kadar ağırlık verildiğini kontrol eden “vurgu” ile başlıyoruz. Bunu, kullanıcının seçebileceği önceden tanımlanmış değerlerin bir listesini içeren bir dize olarak tanımlarız:

 // emphasis.js export default { name: 'emphasis', type: 'object', title: 'Emphasis', description: 'The strength of the emphasis put on the contained text', fields: [ { name: 'level', type: 'string', options: { list: [ { value: 'strong', title: 'Strong' }, { value: 'moderate', title: 'Moderate' }, { value: 'none', title: 'None' }, { value: 'reduced', title: 'Reduced' } ] } } ] }

takma ad

Bazen yazılı ve sözlü terim farklıdır. Örneğin, yazılı bir metinde bir ifadenin kısaltmasını kullanmak, ancak tüm ifadeyi yüksek sesle okutmak istiyorsunuz. Örneğin:

 <s>This is a <sub alias="Speech Synthesis Markup Language">SSML</sub> tutorial</s>

Takma ad için giriş alanı basit bir dizedir:

 // alias.js export default { name: 'alias', type: 'object', title: 'Alias (sub)', description: 'Replaces the contained text for pronunciation. This allows a document to contain both a spoken and written form.', fields: [ { name: 'text', type: 'string', title: 'Replacement text', } ] }

prozodi

Prozodi özelliğiyle, perde, oran ve ses seviyesi gibi metnin nasıl konuşulması gerektiğini farklı yönleri kontrol edebiliriz. Bunun için işaretleme şöyle görünebilir:

 <s>Say this with an <prosody pitch="x-low">extra low pitch</prosody>, and this <prosody rate="fast" volume="loud">loudly with a fast rate</prosody></s>

Bu girdi, önceden tanımlanmış dize seçeneklerine sahip üç alana sahip olacaktır:

 // prosody.js export default { name: 'prosody', type: 'object', title: 'Prosody', description: 'Control of the pitch, speaking rate, and volume', fields: [ { 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' } ] } }, { name: 'rate', type: 'string', title: 'Rate', description: 'A change in the speaking rate for the contained text', options: { list: [ { 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' } ] } }, { name: 'volume', type: 'string', title: 'Volume', description: 'The volume for the contained text.', options: { list: [ { 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' } ] } } ] }

olarak söyle

Eklemek istediğimiz son şey <say-as> . Bu etiket, belirli bilgilerin nasıl telaffuz edildiği üzerinde biraz daha kontrol uygulamamızı sağlar. Sesli arayüzlerde bir şeyi yeniden düzenlemeniz gerekirse, kelimeleri biplemek için bile kullanabiliriz. Bu @!%& faydalı!

 <s>Do I have to <say-as interpret-as="expletive">frakking</say-as> <say-as interpret-as="verbatim">spell</say-as> it out for you!?</s>

 // sayAs.js export default { name: 'sayAs', type: 'object', title: 'Say as...', description: 'Lets you indicate information about the type of text construct that is contained within the element. It also helps specify the level of detail for rendering the contained text.', fields: [ { 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' } ] } }, { name: 'date', type: 'object', title: 'Date', fields: [ { 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' } ] } ] }

Şimdi bunları bir annotations.js dosyasına aktarabiliriz, bu da işleri biraz daha düzenli hale getirir.

 // annotations.js export {default as alias} from './alias' export {default as emphasis} from './emphasis' export {default as prosody} from './prosody' export {default as sayAs} from './sayAs'

Artık bu açıklama türlerini ana şemalarımıza aktarabiliriz:

 // schema.js import createSchema from "part:@sanity/base/schema-creator" import schemaTypes from "all:part:@sanity/base/schema-type" import fulfillment from './fulfillment' import speech from './ssml-editor/speech' import { alias, emphasis, prosody, sayAs } from './annotations' export default createSchema({ name: "default", types: schemaTypes.concat([ fulfillment, speech, alias, emphasis, prosody, sayAs ]) })

Son olarak, bunları şimdi editöre şu şekilde ekleyebiliriz:

 // speech.js export default { name: 'speech', type: 'array', title: 'SSML Editor', of: [ { type: 'block', styles: [], lists: [], marks: { decorators: [], annotations: [ {type: 'alias'}, {type: 'emphasis'}, {type: 'prosody'}, {type: 'sayAs'} ] } } ] }

styles ve decorators boş diziler de eklediğimize dikkat edin. Bu, varsayılan stilleri ve dekoratörleri (kalın ve vurgu gibi) devre dışı bırakır, çünkü bu özel durumda çok anlamlı değildirler.

Görünümü ve Hissi Özelleştirme

Artık işlevselliğe sahibiz, ancak herhangi bir simge belirtmediğimiz için her açıklama varsayılan simgeyi kullanacak ve bu da düzenleyicinin yazarlar için gerçekten kullanılmasını zorlaştırıyor. Öyleyse düzeltelim!

Portable Text düzenleyicisi ile hem simgeler hem de işaretli metnin nasıl işlenmesi gerektiği için React bileşenlerini enjekte etmek mümkündür. Burada, bazı emojilerin bizim için işi yapmasına izin vereceğiz, ancak açıkçası bu konuda ileri gidebilir, onları dinamik hale getirebilir vb. prosody için, seçilen ses düzeyine bağlı olarak simgenin değişmesini bile sağlayacağız. Kısa olması için bu snippet'lerdeki alanları atladığımı unutmayın, bunları yerel dosyalarınızdan kaldırmamalısınız.

 // alias.js import React from 'react' export default { name: 'alias', type: 'object', title: 'Alias (sub)', description: 'Replaces the contained text for pronunciation. This allows a document to contain both a spoken and written form.', fields: [ /* all the fields */ ], blockEditor: { icon: () => '', render: ({ children }) => <span>{children} </span>, }, };

 // emphasis.js import React from 'react' export default { name: 'emphasis', type: 'object', title: 'Emphasis', description: 'The strength of the emphasis put on the contained text', fields: [ /* all the fields */ ], blockEditor: { icon: () => '', render: ({ children }) => <span>{children} </span>, }, };

 // prosody.js import React from 'react' export default { name: 'prosody', type: 'object', title: 'Prosody', description: 'Control of the pitch, speaking rate, and volume', fields: [ /* all the fields */ ], blockEditor: { icon: () => '', render: ({ children, volume }) => ( <span> {children} {['x-loud', 'loud'].includes(volume) ? '' : ''} </span> ), }, };

 // sayAs.js import React from 'react' export default { name: 'sayAs', type: 'object', title: 'Say as...', description: 'Lets you indicate information about the type of text construct that is contained within the element. It also helps specify the level of detail for rendering the contained text.', fields: [ /* all the fields */ ], blockEditor: { icon: () => '', render: props => <span>{props.children} </span>, }, }; 

Artık sesli asistanlar tarafından kullanılabilecek metin düzenlemek için bir düzenleyiciniz var. Ancak editörlerin metnin gerçekte nasıl görüneceğini de önizleyebilmeleri yararlı olmaz mıydı?

Google'ın Metin Okuma Özelliğini Kullanarak Önizleme Düğmesi Ekleme

Yerel konuşma sentezi desteği aslında tarayıcılar için yolda. Ancak bu eğitimde, Google'ın SSML'yi destekleyen Metin Okuma API'sını kullanacağız. Bu önizleme işlevini oluşturmak, bunu kullanmak istediğiniz hizmette Taşınabilir Metni SSML'ye nasıl seri hale getirdiğinizin bir gösterimi olacaktır.

Düzenleyiciyi Bir React Bileşenine Sarma

SSMLeditor.js dosyasını açarak başlıyoruz ve aşağıdaki kodu ekliyoruz:

 // SSMLeditor.js import React, { Fragment } from 'react'; import { BlockEditor } from 'part:@sanity/form-builder'; export default function SSMLeditor(props) { return ( <Fragment> <BlockEditor {...props} /> </Fragment> ); }

Şimdi düzenleyiciyi kendi React bileşenimizde tamamladık. İçerdiği veriler de dahil olmak üzere ihtiyaç duyduğu tüm aksesuarlar gerçek zamanlı olarak aktarılır. Bu bileşeni gerçekten kullanmak için onu speech.js dosyanıza aktarmanız gerekir:

 // speech.js import React from 'react' import SSMLeditor from './SSMLeditor.js' export default { name: 'speech', type: 'array', title: 'SSML Editor', inputComponent: SSMLeditor, of: [ { type: 'block', styles: [], lists: [], marks: { decorators: [], annotations: [ { type: 'alias' }, { type: 'emphasis' }, { type: 'prosody' }, { type: 'sayAs' }, ], }, }, ], }

Bunu kaydettiğinizde ve stüdyo yeniden yüklendiğinde, hemen hemen aynı görünmelidir, ancak bunun nedeni henüz düzenleyiciyi değiştirmeye başlamamış olmamızdır.

Taşınabilir Metni SSML'ye Dönüştür

Düzenleyici, içeriği, JSON'da zengin metni istediğiniz biçime dönüştürmeyi kolaylaştıran bir dizi nesne olan Taşınabilir Metin olarak kaydeder. Taşınabilir Metni başka bir sözdizimine veya biçime dönüştürdüğünüzde buna “seri hale getirme” diyoruz. Bu nedenle, "serileştiriciler", zengin metnin nasıl dönüştürülmesi gerektiğine ilişkin reçetelerdir. Bu bölümde, konuşma sentezi için serileştiriciler ekleyeceğiz.

BlockToSSML.js dosyasını zaten yaptınız. Şimdi ilk bağımlılığımızı eklememiz gerekecek. ssml-editor klasörünün içindeki npm init -y terminal komutunu çalıştırarak başlayın. Bu, editörün bağımlılıklarının listeleneceği bir package.json ekleyecektir.

Bunu yaptıktan sonra, Taşınabilir Metni seri hale getirmeyi kolaylaştıran bir kitaplık elde etmek için npm install @sanity/block-content-to-html çalıştırabilirsiniz. HTML kitaplığını kullanıyoruz çünkü SSML, etiketler ve niteliklerle aynı XML sözdizimine sahip.

Bu bir grup koddur, bu yüzden kopyalayıp yapıştırmaktan çekinmeyin. Snippet'in hemen altındaki kalıbı açıklayacağım:

 // blocksToSSML.js import blocksToHTML, { h } from '@sanity/block-content-to-html' const serializers = { marks: { prosody: ({ children, mark: { rate, pitch, volume } }) => h('prosody', { attrs: { rate, pitch, volume } }, children), alias: ({ children, mark: { text } }) => h('sub', { attrs: { alias: text } }, children), sayAs: ({ children, mark: { interpretAs } }) => h('say-as', { attrs: { 'interpret-as': interpretAs } }, children), break: ({ children, mark: { time, strength } }) => h('break', { attrs: { time: '${time}ms', strength } }, children), emphasis: ({ children, mark: { level } }) => h('emphasis', { attrs: { level } }, children) } } export const blocksToSSML = blocks => blocksToHTML({ blocks, serializers })

Bu kod, blok dizisini alan ve bunlar arasında dolaşan bir işlevi dışa aktarır. Bir blok bir mark içerdiğinde, tür için bir serileştirici arayacaktır. Bir metni emphasis şekilde işaretlediyseniz, serileştiriciler nesnesinden bu işlev:

 emphasis: ({ children, mark: { level } }) => h('emphasis', { attrs: { level } }, children)

Belki de şemayı tanımladığımız yerden parametreyi tanıyorsunuzdur? h() işlevi, bir HTML öğesi tanımlamamızı sağlar, yani burada "hile yaparız" ve onu <emphasis> adlı bir SSML öğesi döndürmesini sağlar. Ayrıca, tanımlanmışsa ona nitelik level children ve alt öğeleri onun içine yerleştiririz - çoğu durumda emphasis işaretlediğiniz metin olacaktır.

 { "_type": "block", "_key": "f2c4cf1ab4e0", "style": "normal", "markDefs": [ { "_type": "emphasis", "_key": "99b28ed3fa58", "level": "strong" } ], "children": [ { "_type": "span", "_key": "f2c4cf1ab4e01", "text": "Say this strongly!", "marks": [ "99b28ed3fa58" ] } ] }

Portable Text'deki yukarıdaki yapı bu şekilde bu SSML'ye serileştirilir:

 <emphasis level="strong">Say this strongly</emphasis>

Daha fazla SSML etiketi için destek istiyorsanız, şemaya daha fazla açıklama ekleyebilir ve serileştiricilerdeki marks bölümüne açıklama türlerini ekleyebilirsiniz.

Şimdi, işaretlenmiş zengin metnimizden SSML işaretlemesini döndüren bir fonksiyonumuz var. Son kısım, bu işaretlemeyi bir metinden konuşmaya hizmetine göndermemizi sağlayan bir düğme yapmaktır.

Size Konuşan Bir Önizleme Düğmesi Ekleme

İdeal olarak, tarayıcının Web API'sindeki konuşma sentez yeteneklerini kullanmamız gerekirdi. Bu şekilde, daha az kod ve bağımlılıktan kurtulmuş olurduk.

Bununla birlikte, 2019'un başlarından itibaren, konuşma sentezi için yerel tarayıcı desteği hala ilk aşamalarındadır. SSML desteği yolda gibi görünüyor ve bunun için istemci tarafı JavaScript uygulamalarının kavramlarının kanıtı var.

Her halükarda bu içeriği bir sesli asistanla kullanacaksınız. Hem Google Asistan hem de Amazon Echo (Alexa), bir yerine getirmede yanıt olarak SSML'yi destekler. Bu eğitimde, kulağa hoş gelen ve birkaç dili destekleyen Google'ın metinden konuşmaya API'sini kullanacağız.

Google Cloud Platform'a kaydolarak bir API anahtarı alarak başlayın (işlediğiniz ilk 1 milyon karakter için ücretsiz olacaktır). Kaydolduktan sonra bu sayfada yeni bir API anahtarı oluşturabilirsiniz.

Şimdi PreviewButton.js dosyanızı açabilir ve bu kodu ona ekleyebilirsiniz:

 // PreviewButton.js import React from 'react' import Button from 'part:@sanity/components/buttons/default' import { blocksToSSML } from './blocksToSSML' // You should be careful with sharing this key // I put it here to keep the code simple const API_KEY = '<yourAPIkey>' const GOOGLE_TEXT_TO_SPEECH_URL = 'https://texttospeech.googleapis.com/v1beta1/text:synthesize?key=' + API_KEY const speak = async blocks => { // Serialize blocks to SSML const ssml = blocksToSSML(blocks) // Prepare the Google Text-to-Speech configuration const body = JSON.stringify({ input: { ssml }, // Select the language code and voice name (AF) voice: { languageCode: 'en-US', name: 'en-US-Wavenet-A' }, // Use MP3 in order to play in browser audioConfig: { audioEncoding: 'MP3' } }) // Send the SSML string to the API const res = await fetch(GOOGLE_TEXT_TO_SPEECH_URL, { method: 'POST', body }).then(res => res.json()) // Play the returned audio with the Browser's Audo API const audio = new Audio('data:audio/wav;base64,' + res.audioContent) audio.play() } export default function PreviewButton (props) { return <Button style={{ marginTop: '1em' }} onClick={() => speak(props.blocks)}>Speak text</Button> }

Bu öğreticiyi izlemeyi kolaylaştırmak için bu önizleme düğmesi kodunu minimumda tuttum. Elbette, önizlemenin işlenip işlenmediğini göstermek veya Google API'sinin desteklediği farklı seslerle önizlemeyi mümkün kılmak için durum ekleyerek oluşturabilirsiniz.

Düğmeyi SSMLeditor.js :

 // SSMLeditor.js import React, { Fragment } from 'react'; import { BlockEditor } from 'part:@sanity/form-builder'; import PreviewButton from './PreviewButton'; export default function SSMLeditor(props) { return ( <Fragment> <BlockEditor {...props} /> <PreviewButton blocks={props.value} /> </Fragment> ); }

Artık metninizi farklı açıklamalarla işaretleyebilmeli ve “Metni konuş” düğmesine bastığınızda sonucu duyabilmelisiniz. Harika, değil mi?

Bir Konuşma Sentezi Düzenleyicisi Oluşturdunuz Ve Şimdi Ne?

Bu öğreticiyi izlediyseniz, özel açıklamalar yapmak ve düzenleyiciyi özelleştirmek için Sanity Studio'daki Portable Text düzenleyicisini nasıl kullanabileceğinizi öğrendiniz. Bu becerileri, yalnızca konuşma sentezi düzenleyicisi yapmak için değil, her türlü şey için kullanabilirsiniz. Ayrıca Portable Text'i ihtiyacınız olan sözdizimine nasıl seri hale getireceğinizi de öğrendiniz. Açıkçası, bu, React veya Vue'da ön uçlar oluşturuyorsanız da kullanışlıdır. Taşınabilir Metinden Markdown oluşturmak için bu becerileri bile kullanabilirsiniz.

Bunu bir sesli asistanla birlikte gerçekten nasıl kullandığınızı ele almadık. Denemek isterseniz, sunucusuz bir işlevdeki önizleme düğmesiyle aynı mantığın çoğunu kullanabilir ve web kancalarını, örneğin Dialogflow'u kullanarak bir gerçekleştirme için API uç noktası olarak ayarlayabilirsiniz.

Sesli asistan ile konuşma sentezi düzenleyicisinin nasıl kullanılacağına dair bir eğitim yazmamı isterseniz, bana Twitter'da bir ipucu vermekten veya aşağıdaki yorumlar bölümünde paylaşmaktan çekinmeyin.

SmashingMag'de Daha Fazla Okuma :

• Konuşma Sentezi ile Deneme
• Web Speech API ile Kullanıcı Deneyimini Geliştirme
• Erişilebilirlik API'leri: Web Erişilebilirliğinin Anahtarı
• Web Speech API ve Node.js ile Basit Bir AI Chatbot Oluşturma