WEBページで、WEB Speech APIを使ってWEBページのテキストを読み上げる実装方法を共有しようと思います。JavaScriptで実装をしました。 今回は、個人開発で作成した英語学習サービスの英単語の発音を確認する際に、こちらのブラウザの音声合成機能を使用しました。 英語を読み上げる際におこった不具合の対処も併せて紹介させていただきます。 Web Speech APIの音声読み上げ機能使ってみる 【デモ】テキストを読み上げてみる どのように読み上げるのか確認できるデモサイトは下記になります。 デモを見る <input type="text" id="text" name="text" value="吾輩は猫である。" placeholder="読み上げたいテキストを入力してください" /> <button onclick="readAloud()">読み上げる</button>
![【JS】Web Speech APIの音声読み上げ機能の実装方法(日本語 / 英語読み上げ)|WEB CREATES](https://cdn-ak-scissors.b.st-hatena.com/image/square/b148ae24380078650a59de06f0649f792d090b55/height=288;version=1;width=512/https%3A%2F%2Fweb-creates.com%2Fwp%2Fwp-content%2Fuploads%2F2021%2F06%2F96.png)