Kernpunkte

• Web Voice -API ist eine JavaScript -API, mit der Webentwickler Spracherkennung und Synthese in ihre Webseiten integrieren k?nnen, wodurch die Benutzererfahrung verbessert wird, insbesondere für Menschen mit Behinderungen oder Benutzer, die mehrere Aufgaben gleichzeitig erledigen müssen.
• Die API zur Spracherkennung ben?tigt derzeit eine Internetverbindung und Benutzerberechtigungen, um auf das Mikrofon zuzugreifen. Bibliothek wie Annyang kann dazu beitragen, die Komplexit?t zu verwalten und die Vorw?rtskompatibilit?t sicherzustellen.
• Sie k?nnen die Sprachsynthese-API und die API der Spracherkennung verwenden, um sprachgesteuerte Audio-Player zu erstellen. Auf diese Weise kann der Benutzer zwischen Songs navigieren und bestimmte Songs mit Sprachbefehlen anfordern.
• Der Audio -Player enth?lt Einstellungsdaten, UI -Methoden, Sprach -API -Methoden und Audio -Betriebsmethoden. Codes, die Benutzereingaben identifizieren und verarbeiten, gelten nur für Webkit -Browser.
• Web Voice -API kann in vielen Bereichen verwendet werden, z. B. Sprachbefehle zum Durchsuchen von E -Mails, zur Navigation auf Websites oder zur Suche nach dem Web. Mit den stabilen und neuen Funktionen der Implementierung wird die Verwendung dieser API voraussichtlich wachsen.

/ verwendet, um zus?tzliche Bl?cke zu verbergen/anzeigen / .sp_hiddenblock { Rand: 2px; Grenze: 1PX Solid RGB (250, 197, 82); Border-Radius: 3px; Polsterung: 5px; Hintergrundfarbe: RGBA (250, 197, 82, 0,7); } .sp_hiddenblock.sp_hide { Anzeige: Keine! Wichtig; } Dieser Artikel wurde von Edwin Reynoso und Mark Brown überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SitePoint -Inhalte für den Besten erhalten haben!

Web Voice -API ist eine JavaScript -API, mit der Webentwickler Spracherkennungs- und Synthesefunktionen in ihre Webseiten integrieren k?nnen.

Es gibt viele Gründe dafür. Zum Beispiel, um die Erfahrung von Menschen mit Behinderungen (insbesondere Benutzer mit Sehbehinderung oder Benutzern mit begrenzter Handmobilit?t) zu verbessern, oder um Benutzern zu erm?glichen, mit Webanwendungen zu interagieren, w?hrend andere Aufgaben wie das Fahren ausgeführt werden.

Wenn Sie noch nie von der Web -Voice -API geh?rt haben oder schnell anfangen m?chten, ist es m?glicherweise eine gute Idee, die Artikel von Aurelio de Rosa in die Web -Voice -API, die Voice -Synthese -API und die Idee der sprechenden Formulare zu lesen.

Browserunterstützung

Browserhersteller haben erst kürzlich begonnen, sowohl die Spracherkennungs -API als auch die Voice -Synthese -API zu implementieren. Wie Sie sehen k?nnen, ist die Unterstützung für diese APIs alles andere als perfekt. Wenn Sie dieses Tutorial studieren, verwenden Sie den richtigen Browser.

Darüber hinaus erfordert die Spracherkennungs -API derzeit eine Internetverbindung, da die Sprache über das Netzwerk übertragen wird und das Ergebnis an den Browser zurückgegeben wird. Wenn die Verbindung HTTP verwendet, muss der Benutzer der Site bei jeder Anforderung sein Mikrofon verwenden. Wenn die Verbindung HTTPS verwendet, müssen Sie dies nur einmal tun.

Spracherkennungsbibliothek

Bibliothek hilft uns, die Komplexit?t zu verwalten und stellt sicher, dass wir nach vorne kompatibel bleiben. Wenn beispielsweise ein anderer Browser die Spracherkennungs -API unterstützt, müssen wir uns keine Sorgen um das Hinzufügen von Anbieter -Pr?fixen machen.

Annyang ist eine solche Bibliothek, die sehr einfach zu bedienen ist. Erfahren Sie mehr .

Um Annyang zu initialisieren, fügen wir ihre Skripte zu unserer Website hinzu:

<??>

Wir k?nnen überprüfen, ob die API so unterstützt wird:

if (annyang) { /*邏輯*/ }

und fügen Sie einen Befehl mit einem Objekt hinzu, das den Befehlsnamen als Schlüssel und den Rückruf als Methode verwendet:

var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};

Schlie?lich fügen wir sie einfach hinzu und starten die Spracherkennung mit dem folgenden Befehl:

annyang.addCommands(commands);
annyang.start();

sprachgesteuerte Audio-Player

In diesem Artikel werden wir einen sprachgesteuerten Audio-Player erstellen. Wir werden sowohl die Sprachsynthese -API (verwendet, um dem Benutzer zu sagen, welcher Song gespielt wird, als auch der Befehl nicht erkannt) und die Spracherkennungs -API (Konvertieren von Sprachbefehlen in Zeichenfolgen, die eine andere Anwendungslogik ausl?sen).

Der Vorteil der Verwendung des Audio -Players mit der Web -Voice -API besteht darin, dass Benutzer andere Seiten im Browser durchsuchen oder den Browser minimieren und andere Aktionen ausführen k?nnen, w?hrend sie dennoch zwischen den Songs wechseln k?nnen. Wenn wir viele Songs auf unserer Wiedergabeliste haben, k?nnen wir sogar einen bestimmten Song ohne manuelle Suche anfordern (wenn wir natürlich seinen Namen oder S?nger kennen).

Wir werden uns für die Spracherkennung nicht auf Bibliotheken von Drittanbietern verlassen, da wir zeigen m?chten, wie die API verwendet werden, ohne dem Projekt zus?tzliche Abh?ngigkeiten hinzuzufügen. Voice-kontrollierte Audiospieler unterstützen nur Browser, die das Attribut interimResults unterstützen. Die neueste Version von Chrome sollte eine sichere Wahl sein.

Wie immer finden Sie den vollst?ndigen Code auf GitHub sowie eine Demo auf CodePen.

Anf?nger - Playlist

Beginnen wir mit einer statischen Wiedergabeliste. Es besteht aus einem Objekt, das verschiedene Songs in einem Array enth?lt. Jedes Lied ist ein neues Objekt, das den Pfad zur Datei, den Namen des S?ngers und den Namen des Songs enth?lt:

var data = {
  "songs": [
    {
      "fileName": "https://www.ruse-problem.org/songs/RunningWaters.mp3",
      "singer" : "Jason Shaw",
      "songName" : "Running Waters"
    },
    ...

Wir sollten in der Lage sein, dem songs -Array neue Objekte hinzuzufügen und automatisch neue Songs in unseren Audio -Player aufzunehmen.

Audio Player

Schauen wir uns jetzt den Spieler selbst an. Dies ist ein Objekt, das Folgendes enth?lt:

• Einige Einstellungsdaten
• Methoden im Zusammenhang mit der Benutzeroberfl?che (z. B. Füllen von Songlisten)
• Methoden, die sich auf die Sprach -API beziehen (z. B. Erkennungs- und Verarbeitungsbefehle)
• Methoden im Zusammenhang mit dem Audiooperation (z. B. Spielen, Pause, Stopp, vorher, n?chstes)

Daten

Dies ist relativ einfach.

var audioPlayer = {
  audioData: {
    currentSong: -1,
    songs: []
  },

currentSong bezieht sich auf den Index des Songs, in dem sich der Benutzer derzeit befindet. Dies ist zum Beispiel nützlich, wenn wir das vorherige/n?chste Lied oder ein Stop/Pause -Lied spielen müssen.

songs Array enth?lt alle Songs, auf die der Benutzer geh?rt hat. Dies bedeutet, dass wir beim n?chsten Mal auf demselben Song aus dem Array geladen werden k?nnen, ohne es herunterzuladen.

Sie k?nnen den vollst?ndigen Code hier anzeigen.

UI -Methode

UI enth?lt eine Liste verfügbarer Befehle, eine Liste verfügbarer Tracks und ein Kontextfeld, das den Benutzer über die aktuelle Aktion und vorherige Befehle informiert. Ich werde nicht in die UI -Methode eingehen, sondern einen kurzen überblick geben. Hier finden Sie den Code für diese Methoden.

laden

Dies wird über die Wiedergabeliste iteriert, die wir zuvor deklariert haben, und den Namen des Songs zusammen mit dem Namen des Künstlers an die Liste der verfügbaren Tracks anh?ngen.

ChangeCurrentSongeffect

Dies zeigt an, welcher Song derzeit spielt (indem er es in Grün markiert und ein Paar Kopfh?rer daneben hinzufügt) und welche Songs gespielt wurden.

playSong

Dies zeigt an, dass der Song des Benutzers die changeStatusCode -Methode (addiert diese Informationen zum Feld hinzufügen) und durch die Benachrichtigung des Benutzers über diese ?nderung durch die Voice -API.

Changestatuscode

Wie oben erw?hnt, aktualisiert dies die Statusnachricht im Kontextfeld (z. B. zeigt an, dass ein neuer Song abgespielt wird) und verwendet die speak -Methode, um den Benutzer über diese ?nderung zu informieren.

ChangeLastCommand

Eine kleine Helferfunktion, um das letzte Befehlsfeld zu aktualisieren.

Umschalten

Eine kleine Helferfunktion zum Ausblenden oder Anzeigen des Spinner -Symbols (was darauf hinweist, dass der Sprachbefehl des Benutzers derzeit verarbeitet wird).

Player -Methode

Der Spieler wird für das verantwortlich sein, was Sie erwarten k?nnten, n?mlich: Starten, Stoppen und Unterbrechungen der Wiedergabe und Bewegen zwischen den Tracks. Auch hier werde ich nicht im Detail auf diese Methoden eingehen, sondern ich m?chte Sie zu unserer Github -Code -Basis führen.

spiele

Dies überprüft, ob der Benutzer dem Song geh?rt hat. Wenn nicht, startet es das Lied, sonst wird nur die playSong -Methode aufgerufen, die wir zuvor auf dem aktuell zwischengespeicherten Lied besprochen haben. Dies ist in audioData.songs und entspricht dem currentSong -Index.

Pauseg

Dies pausiert oder stoppt vollst?ndig (gibt die Spielzeit bis zum Beginn des Songs zurück) ein Lied, abh?ngig von dem, was als zweiter Parameter übergeben wird. Es aktualisiert auch den Statuscode, um den Benutzer darüber zu benachrichtigen, dass das Lied gestoppt oder innehalten wurde.

Stop

Dies pausiert oder stoppt das Lied basierend auf seinem ersten und einzigen Parameter:

pre

Dies prüft, ob der vorherige Song zwischengespeichert ist, und wenn ja, pausiert das aktuelle Lied, verringert currentSong und spielt erneut den aktuellen Song. Wenn sich das neue Lied nicht im Array befindet, erledigt es dasselbe, aber es l?dt den Song zuerst basierend auf dem Dateinamen/Pfad, der dem abnehmenden currentSong -Endex entspricht.

Weiter

Wenn der Benutzer zuvor ein Lied geh?rt hat, versucht diese Methode, ihn zu pausieren. Wenn das n?chste Lied in unserem Datenobjekt vorhanden ist (d. H. Unsere Wiedergabeliste), wird es geladen und abgespielt. Wenn es keinen n?chsten Song gibt, ?ndert es nur den Statuscode und informiert den Benutzer, dass er das letzte Lied erreicht hat.

searchSpecificSong

Dies nimmt das Schlüsselwort als Parameter und führt eine lineare Suche zwischen dem Songnamen und dem Künstler durch und spielt dann das erste Spiel.

Voice API -Methode

Die Sprach -API ist überraschend einfach zu implementieren. Tats?chlich k?nnen nur zwei Codezeilen die Webanwendung mit dem Benutzer sprechen:

<??>

Was wir hier tun, ist ein utterance -Objekt mit dem Text, den wir sagen m?chten. Die speechSynthesis -Schinschnittstelle (verfügbar auf dem window -Objekt) ist für die Behandlung dieses utterance -Objekts und die Steuerung der Wiedergabe der generierten Stimme verantwortlich.

Versuchen Sie es weiterhin in Ihrem Browser. Es ist so einfach!

spreche

Wir k?nnen seine praktische Anwendung in unserer speak -Methode sehen, die die als Parameter übergebene Nachricht laut vorliegt:

if (annyang) { /*邏輯*/ }

Wenn ein zweiter Parameter (scope) vorhanden ist, nennen wir nach der Meldung die scope -Methode auf play (die ein Audioobjekt ist).

processCommands

Diese Methode ist nicht so aufregend. Es nimmt einen Befehl als Argument an und ruft die entsprechende Methode auf, um darauf zu reagieren. Es verwendet einen regelm??igen Ausdruck, um zu überprüfen, ob der Benutzer einen bestimmten Song abspielen m?chte. Andernfalls wird er in eine Switch -Anweisung eingeleitet, um verschiedene Befehle zu testen. Wenn keiner dem empfangenen Befehl entspricht, informiert er den Benutzer, dass der Befehl nicht verstanden wird.

finden Sie hier den Code.

Alles zusammen

Bisher haben wir ein Datenobjekt, das die Wiedergabeliste darstellt, und ein audioPlayer -Objekt, das den Spieler selbst darstellt. Jetzt müssen wir einen Code schreiben, um Benutzereingaben zu identifizieren und zu verarbeiten. Bitte beachten Sie, dass dies nur für Webkit -Browser gilt.

Der Code, mit dem der Benutzer mit Ihrer App so einfach wie zuvor spricht:

var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};

l?dt die Benutzer ein, Seiten zu erm?glichen, auf ihr Mikrofon zuzugreifen. Wenn Sie Zugriff zulassen, k?nnen Sie mit dem Sprechen beginnen, und wenn Sie anhalten, wird das onresult -Ereigner ausgel?st, um das Ergebnis der Sprachaufnahme als JavaScript -Objekt verfügbar zu machen.

Referenz: HTML5 Spracherkennungs -API

Wir k?nnen es in unserer Anwendung wie folgt implementieren:

annyang.addCommands(commands);
annyang.start();

Wie Sie sehen k?nnen, haben wir das Vorhandensein von webkitSpeechRecognition auf dem window -Objekt getestet. Wenn es vorhanden ist, k?nnen wir anfangen, sonst werden wir dem Benutzer mitteilen, dass der Browser ihn nicht unterstützt. Wenn alles gut geht, setzen wir einige Optionen. Unter ihnen ist lang eine interessante Option, die die Erkennungsergebnisse basierend auf Ihrem Ursprung verbessert.

Dann deklarieren wir Handlern für die Ereignisse start und onresult, bevor wir die onend -Methode starten.

Verarbeitungsergebnisse

Wenn der Spracherkenner Ergebnisse erzielt, zumindest im Kontext der aktuellen Implementierung der Spracherkennung und unserer Bedürfnisse, m?chten wir einige Dinge tun. Jedes Mal, wenn es ein Ergebnis gibt, m?chten wir es im Array speichern und ein Auszeitsout einstellen, um drei Sekunden lang zu warten, damit der Browser weitere Ergebnisse sammeln kann. Nach drei Sekunden m?chten wir die gesammelten Ergebnisse verwenden und in umgekehrter Reihenfolge durchlaufen (neuere Ergebnisse sind wahrscheinlicher genau) und prüfen, ob die identifizierten Transkripte einen der verfügbaren Befehle enthalten. Wenn ja, führen wir den Befehl aus und starten Sie die Spracherkennung neu. Wir tun dies, weil es bis zu einer Minute dauern kann, um auf das Endergebnis zu warten, wodurch unser Audio -Player eher uneinheitlich und bedeutungslos aussieht, da es mit nur einem Klick schneller wird.

<??>

Da wir die Bibliothek nicht verwenden, müssen wir mehr Code schreiben, um unseren Spracherkenner einzurichten, jedes Ergebnis durchzuführen und zu überprüfen, ob seine Transkription mit dem angegebenen Schlüsselwort übereinstimmt.

Schlie?lich starten wir es sofort am Ende der Spracherkennung neu:

if (annyang) { /*邏輯*/ }

Sie k?nnen den vollst?ndigen Code für diesen Abschnitt hier anzeigen.

Das war's. Wir haben jetzt einen voll funktionsf?higen und sprachgesteuerten Audio-Player. Ich empfehle Ihnen dringend, den Code von GitHub herunterzuladen und ihn auszuprobieren oder die Codepen -Demo zu lesen. Ich stelle auch eine Version zur Verfügung, die über HTTPS dient.

Schlussfolgerung

Ich hoffe, dieses praktische Tutorial bietet eine gute Einführung in die M?glichkeiten der Web -Voice -API. Ich denke, wenn sich die Implementierung stabilisiert und neue Funktionen hinzugefügt werden, werden wir sehen, wie die Verwendung dieser API w?chst. Ich denke beispielsweise, dass zukünftige YouTube v?llig sprachgesteuert sein wird, wo wir Videos von verschiedenen Benutzern ansehen, bestimmte Songs abspielen und mit nur Sprachbefehlen zwischen Songs bewegen k?nnen.

Die Web -Voice -API kann auch viele andere Bereiche verbessern oder neue M?glichkeiten er?ffnen. Verwenden Sie beispielsweise Voice, um E -Mails zu durchsuchen, Websites zu navigieren oder nach dem Netzwerk zu suchen.

Verwenden Sie diese API in Ihrem Projekt? Ich würde dich gerne in den Kommentaren unten h?ren.

h?ufig gestellte Fragen zu Audio -Playern der Sprachsteuerung mit Web Voice API (FAQ)

Wie funktioniert die Web-Voice-API in einem sprachgesteuerten Audio-Player?

Die Web -Voice -API ist ein leistungsstarkes Tool, mit dem Entwickler Spracherkennung und Synthese in ihre Webanwendungen integrieren k?nnen. In einem sprachgesteuerten Audio-Player funktioniert die API, indem gesprochene Befehle in Text konvertiert werden, die die Anwendung dann interpretieren und ausführen kann. Wenn der Benutzer beispielsweise "Play" sagt, wandelt die API sie in Text um, und die Anwendung versteht, dass dies der Befehl ist, Audio zu spielen. Dieser Prozess beinhaltet ausgefeilte Algorithmen und maschinelles Lerntechniken, um die menschliche Sprache genau zu identifizieren und zu interpretieren.

Was sind die Vorteile der Verwendung von sprachgesteuerten Audio-Playern?

sprachgesteuerte Audiospieler haben mehrere Vorteile. Erstens bietet es ein freiloses Erlebnis, was besonders nützlich ist, wenn Benutzer mit anderen Aufgaben besch?ftigt sind. Zweitens kann es die Zug?nglichkeit für Benutzer mit reduzierter Mobilit?t verbessern, was m?glicherweise Schwierigkeiten bei der Verwendung herk?mmlicher Steuerelemente hat. Schlie?lich bietet es eine neuartige und ansprechende Benutzererfahrung, mit der Ihre App von der Konkurrenz abhebt.

Kann ich die Voice -API in einem Webbrowser verwenden?

Die meisten modernen Webbrowser unterstützen die Voice -Web -API, einschlie?lich Google Chrome, Mozilla Firefox und Microsoft Edge. Es ist jedoch immer am besten, die spezifische Browserkompatibilit?t zu überprüfen, bevor APIs in Ihre Anwendung integriert werden, da die Unterstützung zwischen Versionen und Plattformen variieren kann.

Wie verbessert man die Genauigkeit der Spracherkennung bei sprachgesteuerten Audio-Spielern?

Sie k?nnen hochwertige Mikrofone verwenden, Hintergrundger?usche reduzieren und APIs trainieren, um die Stimme und Akzente des Benutzers besser zu verstehen, um die Genauigkeit der Spracherkennung zu verbessern. Darüber hinaus k?nnen Sie die Fehlerbehandlung in Ihrer Anwendung implementieren, um nicht identifizierte Befehle zu verarbeiten und Benutzern Feedback zu geben.

Kann ich Sprachbefehle in sprachgesteuerter Audio-Player anpassen?

Ja, Sie k?nnen Sprachbefehle in sprachgesteuerten Audio-Playern anpassen. Dies kann durch Definieren Ihrer eigenen Befehle in Ihrem Anwendungscode erfolgen, die die Web -Voice -API dann erkennt und interpretiert. Auf diese Weise k?nnen Sie die Benutzererfahrung anhand Ihrer spezifischen Anforderungen und Vorlieben anpassen.

Unterstützt die Web -Voice -API -Sprachen als Englisch?

Ja, die Web -Voice -API unterstützt mehrere Sprachen. Sie k?nnen eine Sprache in den API -Einstellungen angeben, und sie erkennt und interpretiert Befehle für diese Sprache. Dies macht es zu einem universellen Instrument für die Entwicklung von Anwendungen für internationales Publikum.

Wie ist die Sicherheit der Web -Voice -API?

Die Web -Voice -API wurde unter Berücksichtigung der Sicherheit entwickelt. Es verwendet eine sichere HTTPS -Verbindung, um Sprachdaten zu übertragen, und speichert keine pers?nlichen Informationen. Wie bei jeder Web -Technologie ist es jedoch wichtig, die Best Practices der Sicherheitsversicherung zu befolgen, z. B. die regelm??ige Aktualisierung der Software und den Schutz Ihrer Anwendungen vor gemeinsamen Webanf?lligkeiten.

Kann ich die Web -Voice -API in meiner mobilen Anwendung verwenden?

W?hrend die Voice -Web -API haupts?chlich für die Verwendung in Webanwendungen entwickelt wurde, kann sie auch in mobilen Anwendungen über Webansichten verwendet werden. Für native mobile Anwendungen m?chten Sie jedoch in Betracht ziehen, um plattformspezifische Spracherkennungs-APIs zu verwenden, die m?glicherweise eine bessere Leistung und Integration bieten.

Was sind die Grenzen der Web -Voice -API?

W?hrend die Web -Voice -API ein leistungsstarkes Tool ist, hat sie einige Einschr?nkungen. Beispielsweise erfordert es eine Internetverbindung zur Arbeit, und seine Genauigkeit kann von Faktoren wie Hintergrundrauschen und Benutzerakzent beeinflusst werden. Darüber hinaus kann die API -Unterstützung zwischen verschiedenen Webbrowsern und Plattformen variieren.

Wie kann ich mit der Voice -Web -API beginnen?

Um mit der Web -Voice -API zu beginnen, müssen Sie die Grundlagen von JavaScript und Webentwicklung verstehen. Sie k?nnen dann die API -Dokumentation durchsuchen, die detaillierte Informationen zu ihren Funktionen und der Verwendung enth?lt. Es stehen auch viele Online -Tutorials und Beispiele zur Verfügung, mit denen Sie lernen k?nnen, wie Sie APIs in Ihre eigenen Anwendungen integrieren.

Das obige ist der detaillierte Inhalt vonMachen Sie einen sprachgesteuerten Audio-Player mit der Web Speech-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!