4
Help us understand the problem. What are the problem?

posted at

updated at

Watson Speech to Textのリアルタイム文字起こしをJavascriptで使う

WatsonのSpeech to Text(デモ)はWebsocketをサポートとしていてブラウザから直接使えるみたいなのでちょっと試してみる。

APIの開通

IBM Cloudにアクセスして上の検索からSpeech to Textのページへ移動します。
Screen Shot 2022-01-13 at 10.08.21.png

初めてのアクセスの場合、右下の「Create」を押してインスタンスを作成します。
Screen Shot 2022-01-13 at 10.25.52.png

サイドバーからService credentialsを選択して「New credential」をクリックして作成します。
Screen Shot 2022-01-13 at 10.03.12.png
Screen Shot 2022-01-13 at 10.03.32.png

新しいcredentialのコピーを押してそれを適当なエディタにコピーします。

{
  "apikey": "XXXXYYYYZZZZ",
  "iam_apikey_description": "Auto-generated for key crn:v1:bluemix:public:speech-to-text:jp-tok:a/8XX7-470XXXXXcea:resource-key:b9052XXX27",
  "iam_apikey_name": "Service credentials-1",
  "iam_role_crn": "crn:v1:bluemix:public:iam::::serviceRole:Manager",
  "iam_serviceid_crn": "crn:v1:bluemix:public:iam-identity::a/0fcXXf81f3XX",
  "url": "https://api.jp-tok.speech-to-text.watson.cloud.ibm.com/instances/XXXXXXX-72be-4b4a-8bc7-47XXXXXXea"
}

アクセストークンを取得する

nodeを使ったアクセストークンと接続するURLを取得するAPIを作ります。認証やCORSの部分は各自で実装をお願いします。

apikeyの部分を上記のcredentialのapikeyの部分に置き換え、urlの部分はcredentialのurlhttps://からwss://に置き換えて指定します。

server.js
const watson = require('watson-developer-cloud');
const { IamTokenManager } = require('ibm-watson/auth');

const app = express();

const sttAuthenticator = new IamTokenManager({
  "apikey": "XXXXYYYYZZZZ"
});

app.get("/watson/speech-to-text/token", function(req, res) {
  return sttAuthenticator
    .requestToken()
    .then(({ result }) => {
      res.send({
        accessToken: result.access_token,
        url: "wss://api.jp-tok.speech-to-text.watson.cloud.ibm.com/instances/XXXXXXX-72be-4b4a-8bc7-47XXXXXXea"
      });
    })
    .catch(console.error);
});

ブラウザ上でSpeech to Textを動作させる

App.js
import WatsonSpeech from 'watson-speech';

fetch('/watson/speech-to-text/token')
  .then((response) => response.json())
  .then((response) => {
    let stream = WatsonSpeech.SpeechToText.recognizeMicrophone({
      accessToken: response.accessToken,
      url: response.url,
      model: "ja-JP_BroadbandModel",
      objectMode: true,
      extractResults: true,
      // speakerLabels: true, // 重いらしい
    });

    stream.on('data',(data) => {
      if(data.results && data.results[0].final) {
        console.log(data.results[0].alternatives[0]);
      }
    });

    stream.on('error', console.error);
  }).catch(console.error);
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?