Πώς να προσθέσετε τη δυνατότητα Κείμενο σε ομιλία σε οποιαδήποτε ιστοσελίδα

ο κείμενο σε ομιλία χαρακτηριστικό αναφέρεται στο μιλώντας σε αφήγηση ενός κειμένου εμφανίζεται σε μια συσκευή. Προς το παρόν, συσκευές όπως φορητοί υπολογιστές, tablet και κινητά τηλέφωνα έχετε ήδη αυτό το χαρακτηριστικό. Οποιαδήποτε εφαρμογή εκτελείται σε αυτές τις συσκευές, όπως ένα πρόγραμμα περιήγησης ιστού, μπορεί να το χρησιμοποιήσετε, και επέκταση της λειτουργικότητάς του. Το χαρακτηριστικό αφήγησης μπορεί να είναι ένα κατάλληλο βοήθημα για μια εφαρμογή που εμφανίζει άφθονο κείμενο, όπως προσφέρει την επιλογή της ακρόασης στους επισκέπτες της ιστοσελίδας.

Το API Web Speech

ο Εφαρμογή JavaScript API του Web Speech είναι η πύλη προς αποκτήστε πρόσβαση στη λειτουργία "Κείμενο σε ομιλία" από ένα πρόγραμμα περιήγησης ιστού. Έτσι, εάν θέλετε να εισαγάγετε τη λειτουργία "κειμένου σε ομιλία" σε μια ιστοσελίδα με βαρύ κείμενο και να επιτρέψετε στους αναγνώστες σας να ακούν το περιεχόμενο, μπορείτε να χρησιμοποιήσετε αυτό το εύχρηστο API ή, πιο συγκεκριμένα, SpeechSynthesis διεπαφή.

Αρχικός έλεγχος κωδικού και υποστήριξης

Για να ξεκινήσετε, ας δημιουργήσουμε μια ιστοσελίδα με μου δείγμα κείμενο που πρέπει να αφηγηθεί, και τρία κουμπιά.

     
  Ο λαγός με πολλούς φίλους
  Ένας λαγός ήταν πολύ δημοφιλής με ... 
 Αλλά αρνήθηκε, δηλώνοντας ότι ... 
  Ηθικό της ιστορίας ...

Τα κουμπιά θα είναι τα κουμπιά ελέγχους για την αφήγηση. Τώρα πρέπει να βεβαιωθούμε αν το UA υποστηρίζει το SpeechSynthesis διεπαφή. Για να το κάνουμε αυτό, ελέγξουμε γρήγορα με το JavaScript αν το παράθυρο αντικείμενο έχει το 'speechSynthesis' ιδιοκτησία, ή όχι.

 onload = λειτουργία () if ('speechSynthesis' στο παράθυρο) / * υποστηριζόμενη σύνθεση synthesis * / αλλιώς / * σύνθεση ομιλίας δεν υποστηρίζεται * /

Αν speechSynthesis είναι διαθέσιμο, πρώτα εμείς δημιουργήστε μια αναφορά για speechSynthesis που αναθέτουμε στο synth μεταβλητός. Εμείς επίσης να ξεκινήσει μια σημαία με το ψευδής αξία (θα δούμε τον σκοπό της αργότερα στην ανάρτηση) και εμείς να δημιουργήσετε αναφορές και κλικ χειριστές συμβάντων για τα τρία κουμπιά (Αναπαραγωγή, Παύση, Διακοπή).

Όταν ο χρήστης κάνει κλικ σε ένα από τα κουμπιά, η αντίστοιχη λειτουργία του (onClickPlay (), onClickPause (), onClickStop ()) θα κληθεί.

 αν ('speechSynthesis' στο παράθυρο) var synth = speechSynthesis; var flag = false; / * αναφορές στα κουμπιά * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# παύση'); var stopEle = document.querySelector ('# στάση'); / * χειριστές συμβάντων κλικ για τα κουμπιά * / playEle.addEventListener ('κλικ', onClickPlay); pauseEle.addEventListener ('κλικ', onClickPause); stopEle.addEventListener ('κλικ', onClickStop); λειτουργία onClickPlay ()  λειτουργία onClickPause ()  λειτουργία onClickStop ()

Δημιουργήστε τις προσαρμοσμένες λειτουργίες

Τώρα ας είναι δημιουργήστε τις λειτουργίες κλικ από τα τρία ξεχωριστά κουμπιά που θα καλούνται από τους χειριστές συμβάντων.

1. Αναπαραγωγή / Συνέχιση

Όταν πατηθεί το κουμπί "Παιχνίδι", αρχίζουμε έλεγξε το σημαία. Αν αυτό είναι ψευδής, το θέσαμε αληθής, οπότε αν οποιαδήποτε στιγμή το κουμπί πατηθεί αργότερα, ο κώδικας μέσα στο πρώτα αν κατάσταση δεν θα εκτελεστεί (όχι μέχρι τη σημαία ψευδής πάλι).

Μετά εμείς δημιουργήστε μια νέα παρουσία του SpeechSynthesisUtterance διεπαφή που περιέχει πληροφορίες σχετικά με την ομιλία, όπως το κείμενο προς ανάγνωση, τον όγκο ομιλίας, την ομιλία φωνής, την ταχύτητα, το βήμα και τη γλώσσα της ομιλίας. Προσθέτουμε το κείμενο του άρθρου ως παράμετρος του κατασκευαστή, και την εκχωρήσετε στο έκφραση μεταβλητός.

 λειτουργία onClickPlay () if (! flag) flag = true; έκφραση = νέο SpeechSynthesisUtterance (document.querySelector ('άρθρο'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = συνάρτηση () flag = false; , synth.speak (ομιλία);  αν (σύντομη διακοπή) / * unpause / συνέχιση αφηγήματος * / synth.resume ();

Χρησιμοποιούμε το SpeechSynthesis.getVoices () Μέθοδος για ορίστε μια φωνή για την ομιλία από τις φωνές που είναι διαθέσιμες στη συσκευή του χρήστη. Καθώς αυτή η μέθοδος επιστρέφει μια σειρά από όλες τις διαθέσιμες επιλογές φωνής σε μια συσκευή, εμείς εκχωρήσετε την πρώτη φωνή της διαθέσιμης συσκευής χρησιμοποιώντας το utterance.voice = synth.getVoices () [0]; δήλωση.

ο στο τέλος η ιδιότητα αντιπροσωπεύει έναν χειριστή συμβάντων που είναι εκτελείται όταν ολοκληρωθεί η ομιλία. Μέσα σε αυτό, αλλάζουμε την αξία του σημαία μεταβλητός πίσω στο ψεύτικο έτσι ώστε ο κώδικας που ξεκινά την ομιλία μπορεί να εκτελεστεί όταν το κουμπί είναι κάντε κλικ ξανά.

Στη συνέχεια καλούμε το SpeechSynthesis.speak () μέθοδο για να ξεκινήστε την αφήγηση. Πρέπει επίσης να ελέγξουμε εάν η αφήγηση διακόπτεται, για την οποία χρησιμοποιούμε μόνο τη δυνατότητα ανάγνωσης SpeechSynthesis.paused ιδιοκτησία. Αν η αφήγηση παύσει, πρέπει να επαναλάβετε την αφήγηση στο κουμπί κλικ, το οποίο μπορούμε να επιτύχουμε χρησιμοποιώντας το SpeechSynthesis.resume () μέθοδος.

2. Παύση

Τώρα ας δημιουργήσουμε το onClickPause () λειτουργία στην οποία ελέγχουμε πρώτα εάν η αφήγηση είναι σε εξέλιξη και δεν έχει παύσει. Μπορούμε να δοκιμάσουμε αυτές τις συνθήκες κάνοντας χρήση του SpeechSynthesis.speaking και το SpeechSynthesis.paused ιδιότητες. Εάν και οι δύο συνθήκες είναι αληθινές, η δική μας onClickPause () λειτουργία παύει την ομιλία καλώντας το SpeechSynthesis.pause () μέθοδος.

 λειτουργία onClickPause () if (synth.speaking &&! synth.paused) / * παύση αφηγήματος * / synth.pause ();

3. Σταματήστε

ο onClickStop () είναι χτισμένο παρόμοια με onClickPause (). Εάν η ομιλία συνεχίζεται, εμείς σταμάτα το καλώντας το SpeechSynthesis.cancel () μέθοδο αφαιρεί όλες τις δηλώσεις.

 λειτουργία onClickStop () if (synth.speaking) / * διακοπή αφήγησης * / / * για σαφάρι * / flag = false; synth.cancel ();

Σημειώστε ότι κατά την ακύρωση της ομιλίας, το στο τέλος η εκδήλωση ενεργοποιείται αυτόματα, και είχαμε ήδη προσθέσει τον κώδικα επαναφοράς σημάτων μέσα σε αυτό. Ωστόσο, υπάρχει ένα σφάλμα στο πρόγραμμα περιήγησης Safari που εμποδίζει την εκτόξευση αυτού του συμβάντος, γι 'αυτό επαναφέραμε τη σημαία στο onClickStop () λειτουργία. Δεν χρειάζεται να το κάνετε αν δεν θέλετε να υποστηρίξετε το Safari.

Υποστήριξη προγράμματος περιήγησης

Όλες οι τελευταίες εκδόσεις των σύγχρονων προγραμμάτων περιήγησης έχουν πλήρη ή μερική υποστήριξη για το API σύνθεσης ομιλίας. Τα προγράμματα περιήγησης Webkit δεν παίζουν ομιλία από πολλές καρτέλες, η παύση είναι buggy (λειτουργεί αλλά buggy) και η ομιλία δεν επαναφέρεται όταν ο χρήστης ξαναφορτώσει τη σελίδα σε προγράμματα περιήγησης Webkit.

Δείγμα εργασίας

Ρίξτε μια ματιά στο ζωντανό demo που ακολουθεί ή δείτε τον πλήρη κώδικα στο Github.

Δείτε το στυλό Ã? Â ° Ã ... Â¸ΕΝΑ¢Â ?? Â ?? Ã'Â £ Κείμενο σε ομιλία - JavaScript από HONGKIAT (@ hkdc) στο CodePen.