Bir ses kontrollü UI

Son birkaç yılda web'e, web içeriğinin bir süredir aynı tür bir işlevselliğe sahip olmasını sağlayan son birkaç yılda birçok yeni API'yı gördük. Nispeten yeni bir API, muhtemelen tahmin edebileceğiniz konuşma tanıma API'sidir, metninizi sayfaya giriş olarak kullanmanızı sağlar. Servisi başlatmak için bir tıklama gerektirir ve tekrar durdurmak için.

Bunun için harika bir dava, kullanıcılarınız arasında erişilebilirliğe izin vermeyerek, tıklamaya bir alternatif olarak sesli girişi vererek olabilir. Analytics'iniz çok fazla mobil tarama yaptığınızı gösteriyorsa, telefonunuzda klavyeyi kullanmaktan ne kadar kolay olacağını düşünün.

Ekran tabanlı arayüzlerin on yıl içinde kaybolmaya başlayabileceği tahminler vardır. İlk başta bu bilim kurgu gibi gelebilir, ancak kullanıcılar, Alexa ve Siri'nin beğenilerine girdiği gibi konuşmada daha rahat hale geldikçe, bunun bir girdi yöntemi olarak yayılmamasının bir nedeni olmasını sağlar. Buradaki öğretici, konuşma girişini hızlandıracak ve daha sonra ürün incelemelerini bir arada bırakmak için kullanır. e-ticaret sitesi .

Dosyaları indirin Bu eğitim için.

• Ses arayüzleri tasarlamak için 8 ipucu

01. Projeye başlayın

Proje dosyaları klasöründen, kod IDE'nizdeki 'Başlat' klasörünü açın ve düzenlemek için 'Speech.html' dosyasını açın. Proje için tüm CSS, konuşma API'nin odağı olmadığı için yazılmıştır, bu nedenle Noto Serif TypeFace'i almak için buraya gösterilen bağlantıyı ekleyin ve CSS dosyasını bağlayın.

 link href = "https://fonts.googleapis.com/css?family=noto+serif" rel = "stylesheet" & gt;
& link rel = "stylesheet" href = "css / style.css" & gt; 

02. İçeriği ekleyin

Bunun ilk unsurları, tüm ekran iç içeriğimizi tutacak bir sargıya sahip olacaktır. Buradaki ilk eleman, konuşma API'sinin tarayıcıda desteklendiğini söyleyen gizli bir mesaj olacaktır. Bu sadece değilse görülür. Sonra bir başlık, kullanıcıya aşağıdaki form öğelerinin mesajları için kullanılacağını söyler.

 & lt; div id = "sarmalayıcı" & gt;
& lt; span ID = "Desteklenmeyen" Sınıf = "Destek Gizli" & GT; Konuşma API; / Span & Gt;

03. Sonuçları seçin

Konuşma API'sini kullanırken içeriği görüntülemek için iki yol vardır. Birinde, kullanıcı konuşmayı bıraktığında ve 'Dinleme' düğmesine tıklandığında metin görüntülenir. Diğeri, ekrandaki kelimeleri konuşurken gösterir. Bu ilk radyo düğmesi son konuşma sonucunun gösterilmesine izin verir.

 & lt; div id = "typeofinput" & gt;
& lt; span & gt; sonuçlar: 

04. Radyo İki

İkinci radyo düğmesi buraya eklenir ve bu, kullanıcının konuştukları gibi görüntülenecek metni seçmesini sağlar. Bu radyo düğmeleri, JavaScript tarafından daha sonra alınacak ve konuşma girişini kontrol etmek için kullanılır, ancak şimdilik bu, kullanıcının bunu kontrol etmek için bir arayüz olmasını sağlar.

 & lt; etiket ve GT;
& lt; giriş türü = radyo adı = tanıma tipi değeri = ara kontrol edildi ve GT; Konuştuğun gibi; / etiket ve gt;
& lt; / div & gt; 

05. Metni görüntüleyin

Kullanıcının sayfaya konuştuğu metin ekranda görüntülenmesi gerekir. Burada, 'Transkripsiyon' kimliğine sahip metin alanı eklenir - bu, kullanıcının konuşması burada sona erecek şekilde hedeflenecektir. Metni kaldırmak için net bir düğme var.

 & lt; textarea id = "transkripsiyon" Readonly & gt;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; button id = "Sil-Hepsi" Class = "buton" ve GT; CLEAR metni ve GT; 

06. Son arayüz

Son arayüz elemanları şimdi ekrana eklenir. Konuşma düğmesi konuşmayı etkinleştirir ve devre dışı bırakır, bu nedenle konuşmadan önce tıklanmalıdır. Tekrar tıklamak onu durdurur. Bu nispeten yeni bir etkileşim olduğu için, altındaki kütük kullanıcılara ne yapmaları gerektiğini söyler.

& lt; div sınıf = "düğme sarma" & gt;
    & lt; div id = "SpeechButton" Class = "Başlat" & gt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "log" & gt; Konuşmaya başlamak için tıklayın; / div & gt;
& lt; / div & gt; 

07. JavaScript ekle

Şimdi kapama gövdesi etiketinden önce komut dosyası etiketlerini ekleyin. Bu, tüm JavaScript'in gideceği yerdir. İlk iki satır, Page öğelerini eşleştirme kimliğiyle tutun ve bir değişkende saklayın. Transkripsiyon, konuşmanın metin sonucudur. Günlük, kullanıcıyı nasıl kullanacağınızla güncelleyecektir.

 & lt; script & gt;
var transkripsiyon = belge.getElementbyid ('transkripsiyon');
var log = document.getElementbyid ('log');
& lt; / script & gt; 

08. değişken sonuçlar

Gelecek birkaç değişkeni kullanarak, daha fazla arayüz elemanı bunlara önbelleğe alınır. Konuşma düğmesi bir geçiş yapacak, kullanıcıların konuşmayı ve kapatmasını sağlayacak., Boole, True / Fals değişkeniyle izlenir. Hepsini açık bir düğme tatmin edici olmayan konuşma sonuçlarını silecektir.

 Var start = document.getElementbyid ('SpeechButton');
var net = belge.getElementbyid ('Clear-all');
var konuşma = yanlış; 

09. Destek mi?

Kodumuzun yapacağı ilk şey, bu konuşma özelliğinin kullanıcının tarayıcısı tarafından desteklenip desteklenmediğini öğrenmektir. Bu sonuç null olarak geri dönerse, eğer ifadesi gizli mesajı atar, aynı anda Başlat düğmesini, konuşma girişini durdurmak için arayüzden uzakta alır.

 Pencere.SpeechRechricution = window.SpeechRechricution ||
window.webkitspeechRechions ||
boş;
if (window.speechrecognition === null) {
belge.getElementbyid ('desteklenmeyen'). Classlist.Remove ('gizlenmiş');
start.classlist.add ('hidden');
} else {

10. Tanıma başlayın

Konuşma tanıma, konuşma tanınması için 'başka' olarak başladı. Sürekli giriş, radyo düğmelerinde varsayılan olarak başlatılır. 'OnResult' işlevi konuşma girişinin sonuçlarını yerine getirecektir. Bu, Transkripsiyonun metin alanına eklenecektir.

 Var tanıtıcı = yeni pencere.
Konuşma tanıma();
Tanıma.Contenous = true;
tanımak .onresult = işlevi (olay) {
transkript.TextContent = '';
için (var i = Event.ResultIndex; i & lt; olay.
Sonuçlar. Uzunluğu; i ++) {

11. Final veya ara?

IF ifadesi şimdi, kullanıcının metni konuşurken (ara) veya sadece konuşmayı bitirdikten sonra (final) olarak görüntülemek isteyip istemediğini kontrol eder. Geçici ise, her kelime '+ =' ile metne eklendiğini fark edeceksiniz, final sadece oradaki tüm metni terk eder.

 Eğer (Event.Results [i] .isfinal) {
transkript.TextContent = Event.Results [i] 
 .Transcript;
} Başka {
transkript.TextContent + = Event.Results [i] 
 .Transcript;
}
}
}; 

12. Hataları Kullanma

Çoğu JavaScript API'lerinde olduğu gibi, ortaya çıkabilecek herhangi bir sorunla ne yapacağınıza karar vermenize izin verecek bir hata işleyicisi var. Bunlar, kullanıcıya geri bildirimde bulunmak için 'LOG' DIV'ye atılır, çünkü arayüzde neler olup bittiğinin farkında oldukları içindir.

 Tanıma.OnError = Function (olay) {
log.innerhtml = 'tanıma hatası:' +
Event.Message + '' ve BR / & GT; ' + log.innerhtml;
}; 

13. Konuşmaya başla!

Buradaki olay dinleyicisi, kullanıcı konuşmaya başlamak için düğmeye tıkladığında başlatılır. Kullanıcı konuşmuyorsa, düğme, konuşmayı göstermek için rengi değiştirirse, konuşma için değişkeni True olarak ayarlanır ve 'INTERIM' radyo düğmesi, kullanıcının giriş için seçimi olup olmadığını görmek için 'ara' radyo düğmesi kontrol edilir.

 Başlat.addeventListener ('Tıkla', Function () {
eğer (! konuşma) {
Konuşma = doğru;
start.classlist.toggle ('durdur');
tanmaker.interimresults = belge.
Queryselector ('Giriş [Name = "Tanınan
On-tipi "] [değer =" ara "] '). Kontrol edildi; 

14. Girişi alın

'Deneyin ve Catch' ifadesi şimdi konuşma tanıma başlıyor ve kullanıcıya konuşmaya başlamaları gerektiğini ve yapıldıklarında 'tekrar tıklamak için tıklayın'. Catch hatayı alacak ve kullanıcının neyin yanlış olabileceğini anlayabilmesi için 'log' div içine atacak.

 deneyin {
tanınan.start ();
log.innerhtml = 'Şimdi konuşmaya başla
& lt; br / & gt; durmak için tıklayın ';
} yakalamak (ex) {
log.innerhtml = 'tanıma hatası:
& lt; br / & gt '' + ex.Message;
} 

15. Durdurmak için tıklayın

Şimdi, kullanıcı konuşmayı durdurmak için tıkladığında, konuşma tanıma durdurulur. Düğme konuşurken kırmızıdan yeşile döndürülür. Kullanıcı arayüzü, kullanıcının servisin durduğunu bildirmek için güncellenir. Konuşma değişkeni, kullanıcının tekrar konuşmasına izin vermeye hazır, yanlış olarak ayarlanır.

} else {
Tanıma.stop ();
start.classlist.toggle ('durdur');
log.innerhtml = 'tanıma durdu
& lt; br / & gt; konuşmak için tıklayınız;
konuşma = yanlış;
}
}); 

16. Metni temizleyin

Bu bölümün son kodu, yanlışlıkla yorumlanmaması durumunda konuşma giriş metnini kaldırmak için sadece açık bir düğmesiyle. Dosyayı kaydedin ve bunu tarayıcınızda test edin. Bilgisayara konuşmak ve sonuçları görmek için düğmeye tıklayabilirsiniz.

 Clear.addeventListener ('Tıkla', İşlev () {transkript.TextContent = '';
});
} 

17. Amaç ekle

Şimdi bir çalışma örneğiniz olduğunda, arayüze bir amaç olması gerekir, bu yüzden bunu yapalım, böylece kullanıcıların yorum yapabileceği için yapalım. Sayfayı kaydedin ve ardından 'indevi.html' adının yeni adı ile kaydet seçeneğini seçin. Aşağıdaki HTML elemanlarını tam olarak ekleyin; DIV ID = "Wrapper" & gt; hat.

 & lt; h1 & gt; Ürün yorumları
& lt; div id = "yorumlar" & gt; 

18. Toplam Gönderme

Önceki kod incelemeleri tutacaktır. Kullanıcının konuşma girişini göndermesi gerekecektir, bu nedenle kodunuzda satır 28 civarında olacak 'net metin' düğmesinden hemen sonra Gönder düğmesini ekleyin. Sonra bir sonraki adım için JavaScript'e kadar hareket edebilirsiniz.

 & lt; button id = "Gönder" Class = "button" & GT; İncelemeyi Gönder & LT; / Button & GT; 

19. Yeni Arabirim Elemanları

Javascript'inizin üstünde, referansları yeni eklenen yeni arayüz elemanlarına tutmak için yeni değişkenleri ekleyin. Bunlar, sayfanın 'Değerlendirmeleri' bölümünde ekrandaki sonuçları göndermenin ve göstermenin bir yolunu sağlayacaktır.

 Var Gönder = DOCUCK.GETELEMENTYBYID ('Gönder');
var İnceleme = document.getElementbyid ('Değerlendirme'); 

20. Girişi gönderin

Şimdi buradaki kod, kullanıcı gönder düğmesini tıkladığında, kodunuzdaki 88 numaralı satırın etrafında olması gereken 'Clear' buton kodundan önce bunu sağlayacaktır. İlk olarak, bir paragraf etiketi oluşturulur ve konuşma girişi daha sonra eklenir. Bu daha sonra 'İnceleme' bölümüne eklenecektir.

 gönder.addeventListener ('Tıkla', Function () {
P = DOKÜMTALIYOR. CreateElenment ('P');
var textnode = document.createTextnode
(Transkript.Value);
p.appendchild (TextNode);
inceleme.appendchild (p);
Bugün izin ver = yeni tarih ();
s = belge. CreateElent ('small'); 

21. Son başvuru

Tarih, inceleme belgeye zaman damgalı olacak şekilde eklenir. Sonunda, her inceleme bittiğinin nerede olduğunu göstermek için yatay bir kural eklenir, daha sonra metin yeni giriş için hazırlanır. Sayfayı kaydedin ve bunu test edin. Artık konuşmanızı sayfaya girebileceğinizi göreceksiniz. Kalıcılık için, bu sonuçları saklamak için bir veritabanı kullanmanız gerekir.

 TextNode = Document.CreateTextNode (bugün);
S.AppendChild (TextNode);
inceleme.AppendChild (s);
HR = document.createElent ('hr') izin verin;
inceleme.AppendChild (HR);
transkript.TextContent = '';
}); 

Bu makale başlangıçta Yaratıcı Web Tasarım Dergisi'nin 286 sayısında yayınlandı. Web tasarımcısı . Sayı 286 burada satın al veya Burada web tasarımcısına abone olun .

İlgili Makaleler:

• En iyi JavaScript API'lerinin 14'ü
• AI motorlu bir chatbot oluşturun
• 2019'da 5 yaşanan UX trendleri