Express.js uygulaması Bilişsel Hizmetler Konuşma ile metni konuşmaya dönüştürür

Makale
01/18/2024

Bu öğreticide, Bilişsel Hizmetler Konuşma hizmetini kullanarak metinden konuşmaya dönüştürme eklemek için mevcut bir Express.js uygulamasına Bilişsel Hizmetler Konuşması ekleyin. Metni konuşmaya dönüştürmek, sesi el ile oluşturma maliyeti olmadan ses sağlamanıza olanak tanır.

Bu öğreticide, Azure Bilişsel Hizmetler Konuşmasından metni konuşmaya dönüştürmenin 3 farklı yolu gösterilmektedir:

İstemci JavaScript doğrudan ses alır
Sunucu JavaScript dosyasından ses alıyor (*.MP3)
Sunucu JavaScript bellek içi diziden ses alıyorBuffer

Uygulama mimarisi

Öğretici, en düşük Express.js uygulamasını alır ve aşağıdakilerin bir bileşimini kullanarak işlevsellik ekler:

mp3 akışı döndürerek metinden konuşmaya dönüştürme sağlamak için sunucu API'sinin yeni yolu
bilgilerinizi girmenize izin vermek için HTML formunun yeni yolu
JavaScript ile yeni HTML formu, Konuşma hizmetine istemci tarafı çağrısı sağlar

Bu uygulama konuşmayı metne dönüştürmek için üç farklı çağrı sağlar:

İlk sunucu çağrısı sunucuda bir dosya oluşturur ve istemciye döndürür. Bunu genellikle birden çok kez servis edilmesi gerektiğini bildiğiniz daha uzun metinler veya metinler için kullanırsınız.
İkinci sunucu çağrısı daha kısa süreli metin içindir ve istemciye döndürülmeden önce bellek içinde tutulur.
İstemci çağrısı, SDK'yı kullanarak Konuşma hizmetine doğrudan çağrı gösterir. Sunucusuz yalnızca istemci uygulamasına sahipseniz bu çağrıyı yapmayı seçebilirsiniz.

Önkoşullar

Node.js LTS - yerel makinenize yüklenir.
Visual Studio Code - yerel makinenize yüklenir.
VS Code için Azure Uygulaması Hizmeti uzantısı (VS Code içinden yüklenir).
Git - GitHub'a göndermek için kullanılır; bu da GitHub eylemini etkinleştirir.
Bash kullanarak Azure Cloud Shell kullanma
Dilerseniz CLI başvuru komutlarını çalıştırmak için Azure CLI’yi yükleyebilirsiniz.
- Yerel yükleme kullanıyorsanız az login komutunu kullanarak Azure CLI ile oturum açın. Kimlik doğrulama işlemini tamamlamak için terminalinizde görüntülenen adımları izleyin. Daha fazla oturum açma seçeneği için bkz . Azure CLI ile oturum açma.
- İstendiğinde, ilk kullanımda Azure CLI uzantılarını yükleyin. Uzantılar hakkında daha fazla bilgi için bkz. Azure CLI ile uzantıları kullanma.
- Yüklü sürümü ve bağımlı kitaplıkları bulmak için az version komutunu çalıştırın. En son sürüme yükseltmek için az upgrade komutunu çalıştırın.

Örnek Express.js depolarını indirme

Git kullanarak Express.js örnek deposunu yerel bilgisayarınıza kopyalayın.
```
git clone https://github.com/Azure-Samples/js-e2e-express-server
```
Örneğin yeni dizinine geçin.
```
cd js-e2e-express-server
```
Projeyi Visual Studio Code'da açın.
```
code .
```
Visual Studio Code'da yeni bir terminal açın ve proje bağımlılıklarını yükleyin.
```
npm install
```

JavaScript için Bilişsel Hizmetler Konuşma SDK'sını yükleme

Visual Studio Code terminalinden Azure Bilişsel Hizmetler Konuşma SDK'sını yükleyin.

npm install microsoft-cognitiveservices-speech-sdk

Express.js uygulaması için Konuşma modülü oluşturma

Konuşma SDK'sını Express.js uygulamasıyla tümleştirmek için adlı azure-cognitiveservices-speech.jsklasörde bir dosya src oluşturun.

Bağımlılıkları çekmek ve metni konuşmaya dönüştürmek için bir işlev oluşturmak için aşağıdaki kodu ekleyin.

// azure-cognitiveservices-speech.js

const sdk = require('microsoft-cognitiveservices-speech-sdk');
const { Buffer } = require('buffer');
const { PassThrough } = require('stream');
const fs = require('fs');

/**
 * Node.js server code to convert text to speech
 * @returns stream
 * @param {*} key your resource key
 * @param {*} region your resource region
 * @param {*} text text to convert to audio/speech
 * @param {*} filename optional - best for long text - temp file for converted speech/audio
 */
const textToSpeech = async (key, region, text, filename)=> {
    
    // convert callback function to promise
    return new Promise((resolve, reject) => {
        
        const speechConfig = sdk.SpeechConfig.fromSubscription(key, region);
        speechConfig.speechSynthesisOutputFormat = 5; // mp3
        
        let audioConfig = null;
        
        if (filename) {
            audioConfig = sdk.AudioConfig.fromAudioFileOutput(filename);
        }
        
        const synthesizer = new sdk.SpeechSynthesizer(speechConfig, audioConfig);

        synthesizer.speakTextAsync(
            text,
            result => {
                
                const { audioData } = result;

                synthesizer.close();
                
                if (filename) {
                    
                    // return stream from file
                    const audioFile = fs.createReadStream(filename);
                    resolve(audioFile);
                    
                } else {
                    
                    // return stream from memory
                    const bufferStream = new PassThrough();
                    bufferStream.end(Buffer.from(audioData));
                    resolve(bufferStream);
                }
            },
            error => {
                synthesizer.close();
                reject(error);
            }); 
    });
};

module.exports = {
    textToSpeech
};

Parametreler - Dosya SDK' yı, akışları, arabellekleri ve dosya sistemini (fs) kullanmak için bağımlılıkları çeker. textToSpeech işlevi dört bağımsız değişken alır. Yerel yolu olan bir dosya adı gönderilirse, metin bir ses dosyasına dönüştürülür. Dosya adı gönderilmezse bellek içi ses akışı oluşturulur.
Konuşma SDK'sı yöntemi - Konuşma SDK'sı yöntemi synthesizer.speakTextAsync , aldığı yapılandırmaya göre farklı türler döndürür. yöntemi, yöntemin ne yapması istendiği temelinde farklılık gösteren sonucu döndürür:
- Dosya oluşturma
- Arabellek dizisi olarak bellek içi akış oluşturma
Ses biçimi - Seçilen ses biçimi MP3'dür, ancak diğer Ses yapılandırma yöntemleriyle birlikte başka biçimler de vardır.

yerel yöntemi, textToSpeechSDK geri çağırma işlevini sarmalar ve bir söze dönüştürür.

Express.js uygulaması için yeni bir yol oluşturma

src/server.js dosyasını açın.
azure-cognitiveservices-speech.js Modülü dosyanın en üstüne bağımlılık olarak ekleyin:
```
const { textToSpeech } = require('./azure-cognitiveservices-speech');
```

Öğreticinin önceki bölümünde oluşturulan textToSpeech yöntemini çağırmak için yeni bir API yolu ekleyin. Bu kodu yolun arkasına /api/hello ekleyin.

// creates a temp file on server, the streams to client
/* eslint-disable no-unused-vars */
app.get('/text-to-speech', async (req, res, next) => {
    
    const { key, region, phrase, file } = req.query;
    
    if (!key || !region || !phrase) res.status(404).send('Invalid query string');
    
    let fileName = null;
    
    // stream from file or memory
    if (file && file === true) {
        fileName = `./temp/stream-from-file-${timeStamp()}.mp3`;
    }
    
    const audioStream = await textToSpeech(key, region, phrase, fileName);
    res.set({
        'Content-Type': 'audio/mpeg',
        'Transfer-Encoding': 'chunked'
    });
    audioStream.pipe(res);
});

Bu yöntem, querystring yöntemi için textToSpeech gerekli ve isteğe bağlı parametreleri alır. Bir dosyanın oluşturulması gerekiyorsa, benzersiz bir dosya adı geliştirilir. textToSpeech yöntemi zaman uyumsuz olarak çağrılır ve sonucu yanıt (res) nesnesine döndürür.

İstemci web sayfasını bir formla güncelleştirme

İstemci HTML web sayfasını gerekli parametreleri toplayan bir formla güncelleştirin. İsteğe bağlı parametre, kullanıcının seçtiği ses denetimine göre geçirilir. Bu öğretici, istemciden Azure Konuşma hizmetini çağırmak için bir mekanizma sağladığından bu JavaScript de sağlanır.

/public/client.html Dosyayı açın ve içeriğini aşağıdakilerle değiştirin:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Microsoft Cognitive Services Demo</title>
  <meta charset="utf-8" />
</head>

<body>

  <div id="content" style="display:none">
    <h1 style="font-weight:500;">Microsoft Cognitive Services Speech </h1>
    <h2>npm: microsoft-cognitiveservices-speech-sdk</h2>
    <table width="100%">
      <tr>
        <td></td>
        <td>
          <a href="https://docs.microsoft.com/azure/cognitive-services/speech-service/get-started" target="_blank">Azure
            Cognitive Services Speech Documentation</a>
        </td>
      </tr>
      <tr>
        <td align="right">Your Speech Resource Key</td>
        <td>

          <input id="resourceKey" type="text" size="40" placeholder="Your resource key (32 characters)" value=""
            onblur="updateSrc()">

      </tr>
      <tr>
        <td align="right">Your Speech Resource region</td>
        <td>
          <input id="resourceRegion" type="text" size="40" placeholder="Your resource region" value="eastus"
            onblur="updateSrc()">

        </td>
      </tr>
      <tr>
        <td align="right" valign="top">Input Text (max 255 char)</td>
        <td><textarea id="phraseDiv" style="display: inline-block;width:500px;height:50px" maxlength="255"
            onblur="updateSrc()">all good men must come to the aid</textarea></td>
      </tr>
      <tr>
        <td align="right">
          Stream directly from Azure Cognitive Services
        </td>
        <td>
          <div>
            <button id="clientAudioAzure" onclick="getSpeechFromAzure()">Get directly from Azure</button>
          </div>
        </td>
      </tr>

      <tr>
        <td align="right">
          Stream audio from file on server</td>
        <td>
          <audio id="serverAudioFile" controls preload="none" onerror="DisplayError()">
          </audio>
        </td>
      </tr>

      <tr>
        <td align="right">Stream audio from buffer on server</td>
        <td>
          <audio id="serverAudioStream" controls preload="none" onerror="DisplayError()">
          </audio>
        </td>
      </tr>
    </table>
  </div>

  <!-- Speech SDK reference sdk. -->
  <script
    src="https://cdn.jsdelivr.net/npm/microsoft-cognitiveservices-speech-sdk@latest/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle-min.js">
    </script>

  <!-- Speech SDK USAGE -->
  <script>
    // status fields and start button in UI
    var phraseDiv;
    var resultDiv;

    // subscription key and region for speech services.
    var resourceKey = null;
    var resourceRegion = "eastus";
    var authorizationToken;
    var SpeechSDK;
    var synthesizer;

    var phrase = "all good men must come to the aid"
    var queryString = null;

    var audioType = "audio/mpeg";
    var serverSrc = "/text-to-speech";

    document.getElementById('serverAudioStream').disabled = true;
    document.getElementById('serverAudioFile').disabled = true;
    document.getElementById('clientAudioAzure').disabled = true;

    // update src URL query string for Express.js server
    function updateSrc() {

      // input values
      resourceKey = document.getElementById('resourceKey').value.trim();
      resourceRegion = document.getElementById('resourceRegion').value.trim();
      phrase = document.getElementById('phraseDiv').value.trim();

      // server control - by file
      var serverAudioFileControl = document.getElementById('serverAudioFile');
      queryString += `%file=true`;
      const fileQueryString = `file=true&region=${resourceRegion}&key=${resourceKey}&phrase=${phrase}`;
      serverAudioFileControl.src = `${serverSrc}?${fileQueryString}`;
      console.log(serverAudioFileControl.src)
      serverAudioFileControl.type = "audio/mpeg";
      serverAudioFileControl.disabled = false;

      // server control - by stream
      var serverAudioStreamControl = document.getElementById('serverAudioStream');
      const streamQueryString = `region=${resourceRegion}&key=${resourceKey}&phrase=${phrase}`;
      serverAudioStreamControl.src = `${serverSrc}?${streamQueryString}`;
      console.log(serverAudioStreamControl.src)
      serverAudioStreamControl.type = "audio/mpeg";
      serverAudioStreamControl.disabled = false;

      // client control
      var clientAudioAzureControl = document.getElementById('clientAudioAzure');
      clientAudioAzureControl.disabled = false;

    }

    function DisplayError(error) {
      window.alert(JSON.stringify(error));
    }

    // Client-side request directly to Azure Cognitive Services
    function getSpeechFromAzure() {

      // authorization for Speech service
      var speechConfig = SpeechSDK.SpeechConfig.fromSubscription(resourceKey, resourceRegion);

      // new Speech object
      synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);

      synthesizer.speakTextAsync(
        phrase,
        function (result) {

          // Success function

          // display status
          if (result.reason === SpeechSDK.ResultReason.SynthesizingAudioCompleted) {

            // load client-side audio control from Azure response
            audioElement = document.getElementById("clientAudioAzure");
            const blob = new Blob([result.audioData], { type: "audio/mpeg" });
            const url = window.URL.createObjectURL(blob);

          } else if (result.reason === SpeechSDK.ResultReason.Canceled) {
            // display Error
            throw (result.errorDetails);
          }

          // clean up
          synthesizer.close();
          synthesizer = undefined;
        },
        function (err) {

          // Error function
          throw (err);
          audioElement = document.getElementById("audioControl");
          audioElement.disabled = true;

          // clean up
          synthesizer.close();
          synthesizer = undefined;
        });

    }

    // Initialization
    document.addEventListener("DOMContentLoaded", function () {

      var clientAudioAzureControl = document.getElementById("clientAudioAzure");
      var resultDiv = document.getElementById("resultDiv");

      resourceKey = document.getElementById('resourceKey').value;
      resourceRegion = document.getElementById('resourceRegion').value;
      phrase = document.getElementById('phraseDiv').value;
      if (!!window.SpeechSDK) {
        SpeechSDK = window.SpeechSDK;
        clientAudioAzure.disabled = false;

        document.getElementById('content').style.display = 'block';
      }
    });

  </script>
</body>

</html>

Dosyada vurgulanan satırlar:

74. Satır: Azure Konuşma SDK'sı, NPM paketini teslim etmek için site kullanılarak cdn.jsdelivr.net istemci kitaplığına çekilir.
102. Satır: updateSrc Yöntemi, ses denetimlerinin URL'sini src anahtar, bölge ve metin dahil olmak üzere sorgu dizesiyle güncelleştirir.
137. Satır: Kullanıcı düğmeyi Get directly from Azure seçerse, web sayfası istemci sayfasından doğrudan Azure'a çağrır ve sonucu işler.

Bilişsel Hizmetler Konuşma kaynağı oluşturma

Azure Cloud Shell'de Azure CLI komutları ile Konuşma kaynağı oluşturun.

Azure Cloud Shell'de oturum açın. Bunun için geçerli bir Azure Aboneliği üzerinde izni olan hesabınızla tarayıcıda kimlik doğrulaması yapmanız gerekir.

Konuşma kaynağınız için bir kaynak grubu oluşturun.

az group create \
    --location eastus \
    --name tutorial-resource-group-eastus

Kaynak grubunda konuşma kaynağı oluşturun.

az cognitiveservices account create \
    --kind SpeechServices \
    --location eastus \
    --name tutorial-speech \
    --resource-group tutorial-resource-group-eastus \
    --sku F0

Tek ücretsiz Konuşma kaynağınız zaten oluşturulduysa bu komut başarısız olur.

Yeni Konuşma kaynağının anahtar değerlerini almak için komutunu kullanın.

az cognitiveservices account keys list \
    --name tutorial-speech \
    --resource-group tutorial-resource-group-eastus \
    --output table

Anahtarlardan birini kopyalayın.

Anahtarı, Azure Konuşma hizmetinde kimlik doğrulaması yapmak için Express uygulamasının web formuna yapıştırarak kullanırsınız.

Metni konuşmaya dönüştürmek için Express.js uygulamasını çalıştırma

Uygulamayı aşağıdaki bash komutuyla başlatın.
```
npm start
```
Web uygulamasını tarayıcıda açın.
```
http://localhost:3000    
```
Konuşma anahtarınızı vurgulanan metin kutusuna yapıştırın.
İsteğe bağlı olarak, metni yeni bir şeyle değiştirin.
Ses biçimine dönüştürmeye başlamak için üç düğmeden birini seçin:
- Doğrudan Azure'dan alma - azure'a istemci tarafı çağrısı
- Dosyadan ses için ses denetimi
- Arabellekten gelen ses için ses denetimi
Denetimin seçilmesiyle ses çalma arasında küçük bir gecikme olduğunu fark edebilirsiniz.

Visual Studio Code'da yeni Azure Uygulaması hizmeti oluşturma

Komut paletinden (Ctrl+Shift+P), "web oluştur" yazın ve Azure Uygulaması Hizmeti: Yeni Web Uygulaması Oluştur... öğesini seçin. Gelişmiş. Linux varsayılanlarını kullanmak yerine kaynak grubu, App Service Planı ve işletim sistemi dahil olmak üzere dağıtım üzerinde tam denetime sahip olmak için gelişmiş komutunu kullanırsınız.
İstemlere aşağıdaki gibi yanıt verin:
- Abonelik hesabınızı seçin.
- için gibi my-text-to-speech-appgenel olarak benzersiz bir ad girin.
  - Tüm Azure'da benzersiz bir ad girin. Yalnızca alfasayısal karakterler ('A-Z', 'a-z' ve '0-9') ve kısa çizgi ('-') kullanın
- Kaynak grubu için öğesini seçin tutorial-resource-group-eastus .
- ve LTSiçeren Node bir sürümün çalışma zamanı yığınını seçin.
- Linux işletim sistemini seçin.
- Yeni bir App Service planı oluştur'u seçin, gibi my-text-to-speech-app-planbir ad sağlayın.
- F1 ücretsiz fiyatlandırma katmanını seçin. Aboneliğinizin zaten ücretsiz bir web uygulaması varsa katmanı seçin Basic .
- Uygulama Analizler kaynağı için Şimdilik atla'yı seçin.
- eastus Konumu seçin.
Kısa bir süre sonra Visual Studio Code, oluşturma işleminin tamamlandığını size bildirir. X düğmesiyle bildirimi kapatın.

Visual Studio Code'da yerel Express.js uygulamasını uzak App service'e dağıtma

Web uygulaması kullanıma sunulurken kodunuzu yerel bilgisayardan dağıtın. Azure Uygulaması Hizmet gezginini açmak için Azure simgesini seçin, abonelik düğümünüzü genişletin, yeni oluşturduğunuz web uygulamasının adına sağ tıklayın ve Web Uygulamasına Dağıt'ı seçin.
Dağıtım istemleri varsa Express.js uygulamasının kök klasörünü seçin, abonelik hesabınızı yeniden seçin ve daha önce oluşturulan web uygulamasının my-text-to-speech-appadını seçin.
Linux'a dağıtırken çalıştırmanız npm install istenirse, yapılandırmanızı hedef sunucuda çalışacak npm install şekilde güncelleştirmeniz istenirse Evet'i seçin.
Dağıtım tamamlandıktan sonra, yeni dağıtılan web uygulamanızı görüntülemek için bilgi isteminde Web Sitesine Gözat'ı seçin.
(İsteğe bağlı): Kod dosyalarınızda değişiklik yapabilir, ardından web uygulamasını güncelleştirmek için Azure Uygulaması hizmet uzantısındaki Web Uygulamasına Dağıt'ı kullanabilirsiniz.

Visual Studio Code'da uzak hizmet günlüklerini akışla aktarma

Çalışan uygulamanın çağrısı console.logaracılığıyla oluşturduğu tüm çıkışları görüntüleyin (kuyruk). Bu çıkış, Visual Studio Code'un Çıkış penceresinde görünür.

Azure Uygulaması Hizmeti gezgininde yeni uygulama düğümünüzü sağ tıklatın ve Akış Günlüklerini Başlat'ı seçin.
```
 Starting Live Log Stream ---
 
```
Ek günlük çıkışını görmek için tarayıcıda web sayfasını birkaç kez yenileyin.

Kaynak grubunu kaldırarak kaynakları temizleme

Bu öğreticiyi tamamladıktan sonra, daha fazla kullanım için faturalandırılmadığınızdan emin olmak için kaynağı içeren kaynak grubunu kaldırmanız gerekir.

Azure Cloud Shell'de Azure CLI komutunu kullanarak kaynak grubunu silin:

az group delete --name tutorial-resource-group-eastus  -y

Bu komut birkaç dakika sürebilir.

Sonraki adımlar

Express.js MongoDB uygulamasını App Service'e dağıtma

Aracılığıyla paylaş