Machen Sie einen sprachgesteuerten Audio-Player mit der Web Speech-API

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!