Snabb start: identifiera tal i Java Script i en webbläsare med hjälp av tal-SDKQuickstart: Recognize speech in JavaScript in a browser using the Speech SDK

I den här artikeln lär du dig hur du skapar en webbplats med hjälp av JavaScript-bindningen i Cognitive Services Speech SDK för att transkribera tal till text.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. Programmet baseras på tal-SDK för Java Script.The application is based on the Speech SDK for JavaScript).

KravPrerequisites

  • En prenumerationsnyckel för taltjänsten.A subscription key for the Speech service. Se testa tal tjänster kostnads fritt.See Try the Speech Services for free.
  • En PC eller Mac, med fungerande mikrofon.A PC or Mac, with a working microphone.
  • En textredigerare.A text editor.
  • En aktuell version av Chrome, Microsoft Edge eller Safari.A current version of Chrome, Microsoft Edge, or Safari.
  • Alternativt en webbläsare som stöder värd för PHP-skript.Optionally, a web server that supports hosting PHP scripts.

Skapa en ny webbplatsmappCreate a new Website folder

Skapa en ny, tom mapp.Create a new, empty folder. Om du vill värdbasera exemplet på en webbserver ser du till att webbservern kan komma åt mappen.In case you want to host the sample on a web server, make sure that the web server can access the folder.

Packa upp Speech SDK för JavaScript i den mappenUnpack the Speech SDK for JavaScript into that folder

Viktigt

När du väljer att ladda ned någon av Speech SDK för Cognitive Services-komponenterna på den här sidan accepterar du även dess licens.By downloading any of the Speech SDK for Azure Cognitive Services components on this page, you acknowledge its license. Se licensvillkoren för Microsoft-programvara för Speech SDK.See the Microsoft Software License Terms for the Speech SDK.

Ladda ned Speech SDK som ett .zip-paket och packa upp det i den nya mappen.Download the Speech SDK as a .zip package and unpack it into the newly created folder. Detta resulterar i två filer packas upp, microsoft.cognitiveservices.speech.sdk.bundle.js och 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. Den senare filen är valfri och är användbar för felsökning i SDK-koden.The latter file is optional, and is useful for debugging into the SDK code.

Skapa en index.html-sidaCreate an index.html page

Skapa en ny fil i mappen, med namnet index.html och öppna filen med en textredigerare.Create a new file in the folder, named index.html and open this file with a text editor.

  1. Skapa följande HTML-stomme: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. Lägg till följande användargränssnittskod i filen, under den första kommentaren: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. Lägga till en referens till Speech SDKAdd a reference to the Speech SDK

    <!-- Speech SDK reference sdk. -->
    <script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>
    
  4. Koppla hanterare för igenkänningsknappen, igenkänningsresultatet och prenumerationsrelaterade fält som definieras av användargränssnittskoden: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>
    

Skapa tokenkälla (valfritt)Create the token source (optional)

Om du vill värdbasera webbsidan på en webbserver kan du ange en tokenkälla för demoappen.In case you want to host the web page on a web server, you can optionally provide a token source for your demo application. På så sätt lämnar prenumerationen aldrig servern och tillåter att användare använder talfunktioner utan att själva behöva ange en auktoriseringskod.That way, your subscription key will never leave your server while allowing users to use speech capabilities without entering any authorization code themselves.

  1. Skapa en ny fil med namnet token.php.Create a new file named token.php. I det här exemplet förutsätter vi att webbservern stöder PHP-skriptspråket.In this example we assume your web server supports the PHP scripting language. Ange följande kod: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. Redigera filen index.html och lägg till följande kod i filen: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>
    

Anteckning

Auktoriseringstoken har en begränsad livslängd.Authorization tokens only have a limited lifetime. Det här förenklade exemplet visar inte hur du uppdaterar auktoriseringstoken automatiskt.This simplified example does not show how to refresh authorization tokens automatically. Som användare kan du manuellt läsa in sidan igen eller trycka på F5 för att uppdatera.As a user, you can manually reload the page or hit F5 to refresh.

Skapa och köra exemplet lokaltBuild and run the sample locally

Starta appen genom att dubbelklicka på index.html-filen eller öppna index.html med valfri webbläsare.To launch the app, double-click on the index.html file or open index.html with your favorite web browser. Ett enkelt grafiskt användargränssnitt visas där du kan ange din prenumerationsnyckel och region och utlösa en igenkänning med mikrofonen.It will present a simple GUI allowing you to enter your subscription key and region and trigger a recognition using the microphone.

Anteckning

Den här metoden fungerar inte i Safari-webbläsaren.This method doesn't work on the Safari browser. På Safari måste exempel webb sidan finnas på en webb server. Safari tillåter inte att webbplatser läses in från en lokal fil för att använda mikrofonen.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.

Skapa och köra exemplet via en webbserverBuild and run the sample via a web server

Du kan starta appen genom att öppna valfri webbläsare och leda den till den offentliga URL där mappen finns, ange din region och utlösa en igenkänning med mikrofonen.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. Om det har konfigurerats hämtas en token från tokenkällan.If configured, it will acquire a token from your token source.

Nästa stegNext steps