Inicio rápido: Reconocimiento de voz en JavaScript en un explorador mediante el SDK de VozQuickstart: Recognize speech in JavaScript in a browser using the Speech SDK

En este artículo, aprenderá a crear un sitio web mediante el enlace de JavaScript del SDK de Voz de Cognitive Services para transcribir voz a texto.In this article, you'll learn how to create a website using the JavaScript binding of the Cognitive Services Speech SDK to transcribe speech to text. La aplicación se basa en Speech SDK para JavaScript (descargar la versión 1.5.0).The application is based on the Speech SDK for JavaScript (Download version 1.5.0).

Requisitos previosPrerequisites

  • Clave de suscripción para Speech Service.A subscription key for the Speech service. Vea Prueba gratuita de los servicios de Voz.See Try the Speech Services for free.
  • Un PC o Mac con un micrófono operativo.A PC or Mac, with a working microphone.
  • Un editor de texto.A text editor.
  • Una versión actual de Chrome, Microsoft Edge o Safari.A current version of Chrome, Microsoft Edge, or Safari.
  • Opcionalmente, un servidor web que admite el hospedaje de scripts PHP.Optionally, a web server that supports hosting PHP scripts.

Creación de una nueva carpeta WebsiteCreate a new Website folder

Cree una nueva carpeta vacía.Create a new, empty folder. En caso de que desee hospedar el ejemplo en un servidor web, asegúrese de que este puede acceder a la carpeta.In case you want to host the sample on a web server, make sure that the web server can access the folder.

Desempaquete el SDK de Voz para JavaScript en esa carpetaUnpack the Speech SDK for JavaScript into that folder

Importante

Al descargar cualquiera de los componentes del SDK de Voz de Azure Cognitive Services de esta página, acepta su licencia.By downloading any of the Speech SDK for Azure Cognitive Services components on this page, you acknowledge its license. Consulte los términos de licencia del software de Microsoft para el SDK de Voz.See the Microsoft Software License Terms for the Speech SDK.

Descargue el SDK de Voz en forma de paquete .zip y desempaquételo en la carpeta recién creada.Download the Speech SDK as a .zip package and unpack it into the newly created folder. Como resultado se desempaquetan dos archivos, microsoft.cognitiveservices.speech.sdk.bundle.js y microsoft.cognitiveservices.speech.sdk.bundle.js.map.This results in two files being unpacked, microsoft.cognitiveservices.speech.sdk.bundle.js and microsoft.cognitiveservices.speech.sdk.bundle.js.map. El último archivo es opcional y es útil para la depuración en el código del SDK.The latter file is optional, and is useful for debugging into the SDK code.

Creación de una página index.htmlCreate an index.html page

Cree un nuevo archivo llamado index.html en la carpeta y ábralo con un editor de texto.Create a new file in the folder, named index.html and open this file with a text editor.

  1. Cree el siguiente esqueleto HTML:Create the following HTML skeleton:

    <html>
    <head>
       <title>Speech SDK JavaScript Quickstart</title>
    </head>
    <body>
     <!-- UI code goes here -->
    
     <!-- SDK reference goes here -->
    
     <!-- Optional authorization token request goes here -->
    
     <!-- Sample code goes here -->
    </body>
    </html>
    
  2. Agregue el siguiente código de la interfaz de usuario al archivo, debajo del primer comentario:Add the following UI code to your file, below the first comment:

    <div id="warning">
      <h1 style="font-weight:500;">Speech Recognition Speech SDK not found (microsoft.cognitiveservices.speech.sdk.bundle.js missing).</h1>
    </div>
    
    <div id="content" style="display:none">
      <table width="100%">
        <tr>
          <td></td>
          <td><h1 style="font-weight:500;">Microsoft Cognitive Services Speech SDK JavaScript Quickstart</h1></td>
        </tr>
        <tr>
          <td align="right"><a href="https://docs.microsoft.com/azure/cognitive-services/speech-service/get-started" target="_blank">Subscription</a>:</td>
          <td><input id="subscriptionKey" type="text" size="40" value="subscription"></td>
        </tr>
        <tr>
          <td align="right">Region</td>
          <td><input id="serviceRegion" type="text" size="40" value="YourServiceRegion"></td>
        </tr>
        <tr>
          <td></td>
          <td><button id="startRecognizeOnceAsyncButton">Start recognition</button></td>
        </tr>
        <tr>
          <td align="right" valign="top">Results</td>
          <td><textarea id="phraseDiv" style="display: inline-block;width:500px;height:200px"></textarea></td>
        </tr>
      </table>
    </div>
    
  3. Agregue una referencia al SDK de VozAdd a reference to the Speech SDK

    <!-- Speech SDK reference sdk. -->
    <script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>
    
  4. Conecte los controladores del botón de reconocimiento, el resultado del reconocimiento y los campos relacionados con la suscripción definidos por el código de la interfaz de usuario:Wire up handlers for the recognition button, recognition result, and subscription-related fields defined by the UI code:

    <!-- Speech SDK USAGE -->
    <script>
      // status fields and start button in UI
      var phraseDiv;
      var startRecognizeOnceAsyncButton;
    
      // subscription key and region for speech services.
      var subscriptionKey, serviceRegion;
      var authorizationToken;
      var SpeechSDK;
      var recognizer;
    
      document.addEventListener("DOMContentLoaded", function () {
        startRecognizeOnceAsyncButton = document.getElementById("startRecognizeOnceAsyncButton");
        subscriptionKey = document.getElementById("subscriptionKey");
        serviceRegion = document.getElementById("serviceRegion");
        phraseDiv = document.getElementById("phraseDiv");
    
        startRecognizeOnceAsyncButton.addEventListener("click", function () {
          startRecognizeOnceAsyncButton.disabled = true;
          phraseDiv.innerHTML = "";
    
          // if we got an authorization token, use the token. Otherwise use the provided subscription key
          var speechConfig;
          if (authorizationToken) {
            speechConfig = SpeechSDK.SpeechConfig.fromAuthorizationToken(authorizationToken, serviceRegion.value);
          } else {
            if (subscriptionKey.value === "" || subscriptionKey.value === "subscription") {
              alert("Please enter your Microsoft Cognitive Services Speech subscription key!");
              return;
            }
            speechConfig = SpeechSDK.SpeechConfig.fromSubscription(subscriptionKey.value, serviceRegion.value);
          }
    
          speechConfig.speechRecognitionLanguage = "en-US";
          var audioConfig  = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
          recognizer = new SpeechSDK.SpeechRecognizer(speechConfig, audioConfig);
    
          recognizer.recognizeOnceAsync(
            function (result) {
              startRecognizeOnceAsyncButton.disabled = false;
              phraseDiv.innerHTML += result.text;
              window.console.log(result);
    
              recognizer.close();
              recognizer = undefined;
            },
            function (err) {
              startRecognizeOnceAsyncButton.disabled = false;
              phraseDiv.innerHTML += err;
              window.console.log(err);
    
              recognizer.close();
              recognizer = undefined;
            });
        });
    
        if (!!window.SpeechSDK) {
          SpeechSDK = window.SpeechSDK;
          startRecognizeOnceAsyncButton.disabled = false;
    
          document.getElementById('content').style.display = 'block';
          document.getElementById('warning').style.display = 'none';
    
          // in case we have a function for getting an authorization token, call it.
          if (typeof RequestAuthorizationToken === "function") {
              RequestAuthorizationToken();
          }
        }
      });
    </script>
    

Creación del origen del token (opcional)Create the token source (optional)

En caso de que desea hospedar la página web en un servidor web, opcionalmente puede proporcionar un origen del token para la aplicación de demostración.In case you want to host the web page on a web server, you can optionally provide a token source for your demo application. De esa forma, la clave de la suscripción nunca saldrá el servidor, lo que permitirá a los usuarios utilizar las funcionalidades de voz sin escribir ningún código de autorización.That way, your subscription key will never leave your server while allowing users to use speech capabilities without entering any authorization code themselves.

  1. Cree un nuevo archivo llamado token.php.Create a new file named token.php. En este ejemplo se supone que el servidor web admite el lenguaje de scripting PHP.In this example we assume your web server supports the PHP scripting language. Escriba el siguiente código:Enter the following code:

    <?php
    header('Access-Control-Allow-Origin: ' . $_SERVER['SERVER_NAME']);
    
    // Replace with your own subscription key and service region (e.g., "westus").
    $subscriptionKey = 'YourSubscriptionKey';
    $region = 'YourServiceRegion';
    
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://' . $region . '.api.cognitive.microsoft.com/sts/v1.0/issueToken');
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, '{}');
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json', 'Ocp-Apim-Subscription-Key: ' . $subscriptionKey)); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    echo curl_exec($ch);
    ?>
    
  2. Edite el archivo index.html y agregue el siguiente código al archivo:Edit the index.html file and add the following code to your file:

    <!-- Speech SDK Authorization token -->
    <script>
    // Note: Replace the URL with a valid endpoint to retrieve
    //       authorization tokens for your subscription.
    var authorizationEndpoint = "token.php";
    
    function RequestAuthorizationToken() {
      if (authorizationEndpoint) {
        var a = new XMLHttpRequest();
        a.open("GET", authorizationEndpoint);
        a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        a.send("");
        a.onload = function() {
            var token = JSON.parse(atob(this.responseText.split(".")[1]));
            serviceRegion.value = token.region;
            authorizationToken = this.responseText;
            subscriptionKey.disabled = true;
            subscriptionKey.value = "using authorization token (hit F5 to refresh)";
            console.log("Got an authorization token: " + token);
        }
      }
    }
    </script>
    

Nota

Los tokens de autorización tienen una vigencia limitada.Authorization tokens only have a limited lifetime. Este ejemplo simplificado no muestra cómo actualizar automáticamente tokens de autorización.This simplified example does not show how to refresh authorization tokens automatically. Como usuario, puede volver a cargar la página manualmente o presione la tecla F5 para actualizarla.As a user, you can manually reload the page or hit F5 to refresh.

Compilación y ejecución local del ejemploBuild and run the sample locally

Para iniciar la aplicación, haga doble clic en el archivo index.html o ábralo con el explorador web que prefiera.To launch the app, double-click on the index.html file or open index.html with your favorite web browser. Presentará una interfaz gráfica de usuario simple que le permitirá escribir su clave de suscripción y región, y desencadenará un reconocimiento mediante el micrófono.It will present a simple GUI allowing you to enter your subscription key and region and trigger a recognition using the microphone.

Nota

Este método no funciona en el explorador Safari.This method doesn't work on the Safari browser. En Safari, la página web de ejemplo debe estar hospedada en un servidor web; Safari no permite la carga de sitios web desde un archivo local para usar el micrófono.On Safari, the sample web page needs to be hosted on a web server; Safari doesn't allow websites loaded from a local file to use the microphone.

Compilación y ejecución del ejemplo mediante un servidor webBuild and run the sample via a web server

Para iniciar la aplicación, abra el explorador web que prefiera y apunte a la dirección URL pública en la que hospeda la carpeta, escriba su regióny desencadene un reconocimiento mediante el micrófono.To launch your app, open your favorite web browser and point it to the public URL that you host the folder on, enter your region, and trigger a recognition using the microphone. Si lo ha configurado, adquirirá un token del origen del token.If configured, it will acquire a token from your token source.

Pasos siguientesNext steps