Web Speech APIには、音声合成(テキスト読み上げ)と、音声認識(音声からテキストへの変換)という2つの機能があります。SpeechSynthesis APIを使用すると、ブラウザ上で音声を選択して任意のテキストを読み上げることができます。

アプリケーション内での音声アラートや、WebサイトでのAutopilot駆動のチャットボット利用など、Web Speech APIはWebインターフェースを強化する大きな可能性を秘めています。ここでは、Webアプリケーションでの音声読み上げの実行方法について説明します。

必要なもの

SpeechSynthesis APIについて学び、このアプリケーションを構築するには、次の準備が必要です。

• 最新のブラウザ(このAPIは、主なデスクトップブラウザとモバイルブラウザでサポートされています)
• テキストエディター

準備ができたら作業用のディレクトリを作成し、そのディレクトリにこのHTMLファイルとこのCSSファイルをダウンロードします。これらのファイルが同じフォルダにあり、CSSファイルの名前がstyle.cssであることを確認します。ブラウザでHTMLファイルを開くと、次の内容が表示されます。

では、このAPIを使用して、ブラウザでの読み上げを行いましょう。

Speech Synthesis API

この小さなアプリケーションでの作業を始める前に、ブラウザの開発ツールを使用して読み上げ …

Wir haben im Rahmen dieses Blogs bereits einen Videochat in React erstellt, aber mittlerweile wurden mit der Version 16.8 von React Hooks eingeführt. Mit Hooks können wir Zustands- oder andere React-Funktionen innerhalb von Funktionskomponenten nutzen, ohne dass wir eine Klasse schreiben müssen.

In diesem Post werden wir eine Videochat-Anwendung mit Twilio Video und React erstellen, die nur Funktionskomponenten enthält. Dazu nutzen wir die Hooks useState, useCallback, useEffect und useRef.

Das brauchen wir

Um diese Videochat-Anwendung zu erstellen, brauchen wir Folgendes:

• Node.js und npm
• Ein Twilio-Konto (Melde dich hier für ein kostenloses Twilio-Konto an.)

Sobald wir das …

The Apprentice is back on TV screens around Asia, and Twilio is the official technology partner. Throughout the series Twilio APIs have supported the show and candidates; delivering notification messages to the teams, powering their solutions in episode 11, and running a Watch & Win competition for the viewers.

The Watch & Win competition was implemented as a chatbot over Facebook Messenger. In this post we will look at how you can build your own competition bot using Twilio Autopilot, Twilio Functions and Airtable.

Defining the competition

To build a watch and win competition bot, we need a few parameters for how the bot will work:

• The competition will run every week that the show is broadcasting, with a new question per episode
• The question will include a phrase that was said during the week's episode and three options for who said it
• Viewers can enter …

Die Web Speech API bietet zwei Funktionen: die Sprachsynthese, auch als Text-to-Speech bezeichnet, und die Spracherkennung, also das Umwandeln von Sprache in Text. In einem früheren Blog bin ich auf die Sprachsynthese eingegangen, hier untersuche ich, wie Browser mithilfe der SpeechRecognition API Sprache erkennen und transkribieren.

Wenn wir in der Lage sind, Sprachbefehle von Benutzern zu verarbeiten, können wir immersivere Benutzeroberflächen entwerfen. Dies ist wichtig, weil Benutzer gerne ihre Stimme verwenden. Google meldete 2018, dass 27 % der weltweiten Online-Bevölkerung die Sprachsuche auf Mobilgeräten nutzen. Mit Spracherkennung im Browser sorgen wir …

Create React App ist ein hervorragendes Tool zur Einrichtung einer reibungslos funktionierenden React-Anwendung. Beim Entwickeln oder Erstellen eines Prototyps für eine Anwendung, die eine serverseitige Komponente erfordert, z. B. die Generierung von Zugriffstokens für Twilio Video oder Chat, ist der Vorteil nicht sofort offensichtlich. Ich empfand es am einfachsten, mit einem Server innerhalb desselben Projekts zu arbeiten, um alles über nur einen Befehl zu starten.

In diesem Artikel erfährst du, wie du einen Express-Server einrichtest, der zusammen mit der React-App ausgeführt wird. Falls du nicht so lange warten möchtest, kannst du direkt zum Startprojekt …

Create React Appは、Reactアプリケーションを稼働させるための優れたツールです。Twilio Videoやチャット用のアクセストークン生成など、サーバーサイドコンポーネントを必要とするアプリケーションを構築、試作する場合ではどうでしょうか。1つのコマンドですべてを動かせるため、同じプロジェクト内で1台のサーバーを操作するのが最も簡単です。

この記事を最後まで読むと、Reactアプリと連動するExpressサーバーの設定方法を理解できるようになります。お急ぎの場合は、GitHubのスタータープロジェクトをご覧ください。

動作の仕組み

Create React Appのpackage.jsonで設定できるオプションには、text/html以外のリクエストを別のバックエンドにプロキシするものがあります。この機能を利用すると、あらゆる場所で稼働しているアプリケーションにプロキシすることができますが、今回はReactプロジェクト内でサーバーを実行できるようにしたいと思います。

ここでは、1つのコマンドでReactアプリとExpressサーバーを同時に実行できるようにするために、いくつかのnpmモジュールをまとめて、プロキシできるようにします。

はじめに

以降の手順では、Node.jsとnpmをインストールし …

Web Speech APIには、音声合成(text to speech)と、音声認識(speech to text)という2つの機能があります。以前の記事では音声合成について解説しましたが、今回はSpeechRecognition APIを利用したブラウザの音声認識、音声書き起こし方法について解説します。

ユーザーが発する音声コマンドを認識できれば、通常よりも没入感のあるインターフェースを提供でき、音声操作を好むユーザーを獲得しやすくなります。2018年のGoogleの報告によると、全世界のオンライン人口のうち27%がモバイルデバイスで音声検索を使用しています。今回解説するブラウザの音声認識機能を用いて、あなたのWebアプリケーションで基本的な音声検索からインタラクティブbotまで、多岐にわたる機能を提供できます。

次のセクションからAPIのしくみを理解し、何ができるか実際に確認してみましょう。

必要なもの

APIを実際に体験できるサンプルアプリケーションを作成するために次のツールを用意します。

• Google Chrome
• テキストエディタ

今回はHTML、CSS、JavaScriptを使用してアプリケーションを作成します。作業用の新しいディレクトリを作成し、このディレクトリにstarter HTMLとCSSを保存します。保存したHTMLファイルをブラウザで開くと以下のスクリーンショットと同じ画面が表示されます。

次のセクシ …

We've seen how to send an SMS with TypeScript and how to receive and reply to SMS messages with TypeScript. Now let's create something we could use! If you're into investing, you can never have too many ways to check in on the stock market, so let's build an application you can send a stock symbol to and get back a stock quote.

In this post we will build a Node.js application with TypeScript, using Express, the Twilio Node package, and the Finnhub API to reply to incoming SMS messages with stock quotes.

What you will need

To build the application in this post you will need:

• A Twilio account (if you don't have one yet, sign up for a free Twilio account here and receive $10 credit when you upgrade)
• A Twilio phone number that can send and receive SMS messages
• Node.js installed
• ngrok …

ユーザーから見ると、ログイン操作、特に2要素認証コードの入力は面倒なものです。開発者として、アカウントセキュリティ要件を満たすアプリケーション構築は必須ですが、快適な操作性にも気を配る必要があります。この2つの要件がトレードオフに感じることもあるでしょう。

この記事では、基本的な<input>要素とHTML属性に焦点を当て、スピーディーな2要素認証を実現する方法を解説します。

デフォルトのユーザー体験

このままでも、使いやすいフォームです。<input>には名前と一意のIDを割り当てます。<label>には、適切なfor属性を明確に割り当てます。これはアクセス性を確保するために重要です。<i …