ShadowingChallenge

ShadowingChallenge is an opensource web app to check one's pronunciation while shadowing or dictation with Web Speech API.
シャドーイングチャレンジは、英語学習に効果的とされる「シャドーイング」を頑張る人を応援するためのオープンソースWebアプリです。

Usage

使い方は下記の通りです。Win/MacのChrome限定です。

1. Live DemoのリンクからShadowingChallengeを開く
2. 英語音声とそのスクリプトが公開されているサイトを探す（例：レアジョブ, BBC）
3. シャドーイングする音声のスクリプトをコピーする（答え合わせのために使用します）
4. スクリプトをデモページの「Paste the original script here.」の部分に貼り付ける
5. 「Start shadowing」ボタンを押す
6. マイクの使用許可を求められるので、「許可」をクリックする
7. 上記2.で開いたサイトで音源を再生する
8. シャドーイングを始める
9. 終わったら「Compare」ボタンを押す
10. 上記4.で貼り付けたテキストと、シャドーイングで認識された結果テキストを比較した差異を確認する

_{上の動画ではミキサーを使用していますが、通常のシャドーイングではミキサーを使う必要はありません
動画内の使用教材：レアジョブさん公式「WEEKLY NEWS ARTICLE」 May 31,2022}

Live Demo

https://teonsen.github.io/ShadowingChallenge/

How accurate is it?

「私は発音には自信がある。認識精度が悪いんじゃないの？」
という方向けに補足です。
音声認識には「Web Speech API」を使用していますが、英語の認識は良い感じです。(個人の感想です)
どれくらい「認識が良い」かは次の方法で確認しました。

• レアジョブさん公式教材「WEEKLY NEWS ARTICLE」May 31,2022を使用
• ミキサーを使用して音声出力をマイク入力にリダイレクト

この比較結果を確認すると、スクリプトにない冒頭と最後の部分が赤くなっていて、中身の違いはほとんどないことがわかります。

この場合はAI音声をAIが再認識したものですが、ネイティブスピーカー音源の場合も同様の認識精度です。
Web Speech APIの認識精度に疑問を持った時に参考にしてください。

Acknowledgements

This repo is just a combination of these great repos. Thanks a lot!

• https://github.com/mdn/web-speech-api
• https://github.com/bensonruan/Chrome-Web-Speech-API
• https://github.com/1heisuzuki/speech-to-text-webcam-overlay
• https://github.com/google/diff-match-patch
• https://github.com/chartjs/Chart.js
• https://github.com/DKMitt/speech-to-text-js