Harmless Weblog

公開後1年の記事に書いたのをきっかけに、改めて反響音(リバーブ処理)の追加に取り組んだ。

しかし、元々のWeb Audio APIを使ったコードが「コピペコーディング」で、どうにか動くようにしたものなので、リバーブの処理をやはり参考のサイトからコピペしても、うまく動かず。

参考サイト：

• WEB SOUNDER - Web Audio API 解説
• Web Audio API 解説 - 16.コンボルバーの使い方 - g200kg
• ブラウザで動くアゲアゲなシンセサイザーをWeb Audio ... - Qiita

どうやら非同期処理の影響らしい、ということはなんとなくわかる。インパルス応答のwavファイルをAudioBufferとして読み込んで、Conbolverノードを原音とミックスして出力する、というときに、wavファイルをAudioBufferに読み込む処理が時間がかかるので飛ばされて、先に他の処理が走ってしまう。

このように時間のかかる処理の終了を待ってから次に進む、というのがJavascriptで言うところのコールバック、Promise、Async/Awaitなどで、関数が結果を返すまで実行を待機する。

と、教科書的なことはなんとなくわかるんだけど、実装するとうまく動かない。参考にしたコードでは、AudioBufferの読み込みにAsync/Awaitを使っているので、コピペしてみたところ、確かにエラーは出ないけれど、iPhone/iPad環境で、1回目の再生で音が鳴らない。パソコン環境だと動く、という微妙な状況。

結局3週間ほど週末に集中的にデバッグとリファクタリングに取り組んで、ようやくテストしたすべてのデバイスでエラーなく1回目で音が出るようになった。テストした環境は下記。

• Windows10 Chrome
• Windows10 Edge
• MacOS Monterey Chrome
• MacOS Monterey Safari
• Android Chrome
• Kindle Silk
• iPad Safari
• iPad Chrome
• iPhone Safari

一番のキーポイントは、window: loadイベントをasyncにしてAudio Context関係の処理をすべて囲んで、loadイベントの最初にawaitでインパルス応答の読み込み処理を済ませてしまうことだった。これはつまり参考サイトの構成そのまま。やっぱり独自にヘンなことをするのではなくて、基本に忠実にするのが結局一番確実ということだった。

処理はできるようになったんだけど、インパルス応答(IR)のwavファイルをどうするかが問題。理想的には総合通信士の試験会場でインパルス応答を測定できれば良いけれどそれは無理だし、似たような会場で測定しようにも機材がない。ネットでフリーで使える素材も限られている、というのが今回わかった。幸い、非商用に限りフリー、というコンサートホールのIRがあったので、これを使わせていただいた。

• Concert Hall Impulse Responses - Pori, Finland：(非商用の場合に限ってフリー)

重い腰を上げてリファクタリングに取り組んだので、ついでに気になっていたCSSも全面的に修正。pure.cssというフレームワークを使わせていただいているけれど、その親要素で縛られているところがなかなかわからず、cssの指定が効かないと思ってデバッグに時間がかかった。Chromeのデベロッパーツールの要素タブを睨みながらなんとか親要素を部分的にオーバーライドして、所望の動作をするようになった。

これまでの一時停止機能、反響音機能を通してまだまだ汚いながらもリファクタリングはできたと思うし、自分自身のJavascript、CSSの勉強になった。

あとはPWA対応が残っているけれど、日替わりでデータを読み込む必要性があるので、ネイティブアプリっぽくしてもあまりメリットはないかも、と思って優先度は下げている。

本サイトの固定記事へのリンク

Webアプリ「日替わり通信術」

アプリの詳しい説明

Tweet

Webアプリ日替わり通信術練習(モールス受信)を公開して1年になる。

おかげさまでTwitterやメールでアプリを使っていますとレスポンスをいくつか頂くようになり、嬉しいことにアプリを使って頂いた2名の方が2022年3月期の一総通試験で見事に合格された。元々かんなさん(奥様)の受験サポートのために開発したアプリだったけれど、公開したことで多少なりともお役に立てたようで嬉しい。

冗談半分で合格者倍増を狙っていると公開時に書いたけれど、残念ながら2022年3月期から合格者(受験番号)のネット公開はされなくなって、受験者への個別メール連絡のみとなってしまったため、アプリの効果を定量的に測ることは困難になってしまった。もしアプリを使っておられる方で合格された方はTwitterやjarl.comのメール宛にお知らせ頂ければありがたいです。

ダウンロード不要で利用登録など何もない単なるWebアプリなので、利用者がどれくらいいらっしゃるのかはわからない。レンタルサーバのアクセス記録から、通信術アプリのファイルが読まれた回数を数えて、ざっくり利用者数を推計したのが下のグラフ。9月期の試験までに徐々に利用者が増え、試験後にいったん減って、年明けに3月期の試験に向けて増加が見られる。受験者数は100名ほどだし、なんとなくオーダーは合っているように思う。もちろん日替わり問題を1日に何度もこなしている方もいると思うので、ユニークユーザはもう少し減るだろう。

「一総通 通信術 モールス」等のキーワードで検索するとトップページに表示されるので、今のところモールス受信術の練習アプリとしては高いシェアを獲得しているものと思うけれど、それでも利用者は30名とかその程度。完全無償のアプリでもこうなので、一総通向けの市販教材やツールが皆無なのも仕方がない。まったく商売にならない超ニッチな分野ということがよくわかる。

公開後の1年で、メジャーなアップデートとしては以下のような感じ。いずれも利用者さんからのリクエストや指摘で実装したもので、重い腰を上げられたのは利用者さんのおかげだと思う。

• 一時停止機能の実装
• 欧文の語間スペースの調整機能の実装
• 本文表示を改良

現在開発・テスト中のブランチとして、PWA(Progressive Web Apps)への対応がある。これはWebアプリをネイティブアプリのように使えるようにする技術。強力なキャッシュ管理でオフラインでも(まるでネイティブアプリのように)使えるのがメリットなんだけど、iOSだとキャッシュが強力すぎて日替わり更新が反映されないという問題が解決できずにスタックしているところ。

開発頓挫したブランチとしては、音源保存機能の実装がある。元々はラズパイでmp3の音源を作ってアップするところからスタートしているけれど、これだと速度などが決め打ちになってしまうし、スマホ利用だとダウンロードのパケットを消費する。そのためにWeb Audio APIでリアルタイムに生成する方式に変えた経緯がある。このmp3を作るPythonのプログラムがcgiとしてレンタルサーバ上で動かせれば可能かもしれない。

あとリクエストというほどではないけれど、複数の受験者の方から、試験会場ではモールスの音が反響して聴きづらかったという指摘があった。これについてはリバーブをかけるオプションを追加できたら良いと考えているけれど、のんびり取り組もうと思う。→反響音効果を実装しました(2022.4.22)

本サイトの固定記事へのリンク

Webアプリ「日替わり通信術」

アプリの詳しい説明

Tweet

日替わり通信術アプリをご利用の方から、本文表示の記号が実際と異なるとご指摘のメールを頂戴した。

これはアプリ開発当初から気になっていた部分で、モールス符号への変換に1バイト文字(半角英数、半角カナ)を使っていることに由来する。1バイト文字を使うと和文の濁点・半濁点の処理が簡単になるメリットはあるものの、すべての記号を1バイト文字にマップしなくてはいけないので、どうしても不自然な記号を使わざるを得ない。

例えば[ホレ]は"<"とか、欧文で[BT]は"メ"にするとか。ご要望があったのは、和文の段落(」)を句点(。)で表現するのがわかりづらいという点。そのうちゆっくり直せばいいかな、と思っていたけれど、せっかくご要望をいただいたことだし、ちょうど総合通信士試験が終わった時期でアプリをメンテナンスしても影響が少ないということで、着手することにした。

【従来の本文表示(和文)】

【従来の本文表示(欧文)】

ところでアプリを公開してラズパイ4を買ったあたりから、スクリプトのバージョン管理にgitを使うようになった。一応公開したアプリでもあるし、きちんと管理した方がいいな、という気持ちで始めたものだけど、今では手放せない便利ツールになっている。

今回だとリリース済みのjavascriptのmasterブランチには手をつけず、新たに本文表示改善用のブランチを切って、修正を開始。うまく動いたところまでコミットしながら進めて、試験運用まで。もし不具合があればmasterブランチをチェックアウトすればすぐに戻せるし、NASやGithubのリモートリポジトリにpushすればそのままバックアップになる。試験運用で問題がなければ、masterにマージすれば良い。

gitを使う前はどうしていたかというと、スクリプトファイル自体を別名(バージョンが変わるごとに01,02,03とか)でコピーしたり、コードの中身も変更するところは古いコードをコメントアウトして残しておいたり、ひどいものだった。

今回は1バイト文字で本文を自動生成する部分には手を付けず、Webアプリで本文表示する際に全角文字と記号の変換をさせるようにした。こうすれば電報文の自動生成と音を鳴らすところは従来通りなので新たなバグを作り込むリスクは低い。

javascriptで半角カナ→全角カナの変換は、参考になるサイトがあって、必要な記号もこれでだいたい対応できる。「?」だけはエスケープが必要で、キーマップに入れるとエラーになる。

苦労したのは時刻のところの数字の略体の解釈。時刻部分に限り、カナの「イウクハホタム」をそれぞれ[一][二][三][七][八][九][〇]にマップしなくてはいけない。これは結局キレイなコードは書けず、replaceのメソッドチェーンでズラズラと並べる力技で解決した。もう少しエレガントなコードを書けるようになりたいものだ。

【改良後の本文表示(和文)】

【改良後の本文表示(欧文)】

本サイトの固定記事へのリンク

Webアプリ「日替わり通信術」

アプリの詳しい説明

Tweet

Webアプリの日替わり通信術(モールス受信)は公開からもうすぐ1年になる。少しずつではあるが、ツイッターやメールで使っていただいていると報告を頂くこともある。アプリ利用者の中から合格者が出ることを祈りたい。

ツイッターで、語間スペースが狭いのでは、とご指摘をいただいた。これはバグわざとで、普通は2語の間の間隔は単点7個分となっているけれど、総通受験者のヒアリングで「語間が狭く感じた」というレポートがあったため、狭くしてある。狭い状態で練習して慣れておけば本番にゆとりが生まれるはず。

とはいえ標準的な間隔を知っておくことも重要だと考えて、語間の調整機能を実装。語間を決め打ちでソースを変更するのは簡単なんだけど、狭いのと標準を選択できたり、その設定をCookieで保存したりするのが久しぶりのコード書きで忘れていて時間を要した。

波形で比較すると、上段が「狭い」、下段が「標準」。

本サイトの固定記事へのリンク

Webアプリ「日替わり通信術」

アプリの詳しい説明

Tweet

2021年4月に公開した日替わり通信術のWebアプリ。特にアクセス解析などはしておらず問合せやレスポンスもあまりないのでどの程度使っていただいているかはわからない。この9月期の一総通の試験で「アプリを使って練習して合格しました」という報告をお待ちしています。

初期の頃から使っていただいているローカルさんから、(書き取りの)途中で電話などがかかってきたとき、一時停止機能があると助かる、というご要望を頂いていた。確かに一度始めてしまうと標準速度で5分間は手が離せないし、忙しいお仕事の方だと一時停止機能は欲しいかもしれない。

Web Audio APIで提供されているSuspend/Resume機能で一時停止自体は実装できると思うんだけど、全文を流して終了したときの判定をsetTimeout関数で行っていて、考えなしにSuspendさせると、終了時間がズレてしまう。

setTimeoutのタイマーを一時停止と同時に破棄して、再開と同時に新しいsetTimeoutで終了までのタイマーをセットする。と、考え方は簡単なんだけど、作り始めてみるとなかなかうまく動かない。まあプログラムなんてそんなもの。特にこのWebアプリは開発初期からのつぎはぎだらけのコードで、リファクタリングしようしようと思いつつ、「動いているからまあいいか」とそのままになっているもので、こっちを直すと別のところが変になる、という感じ。

これは重い腰を上げてリファクタリングするか、ということで、jscwlibというそのものズバリ、モールス符号を鳴らす便利なライブラリを使って丸ごと作り直すことを検討。このライブラリは日替わり通信術の開発を始めた後でTwitterで教えてもらったもので、和文にも対応しているし非常に便利。カナの本文さえ用意すれば、play関数に放り込むだけで再生してくれるし、もちろん一時停止とか、周波数などの設定もグラフィカルにできるし、音源のダウンロードまで可能。

ただ、自分の本文生成のスクリプトはこのライブラリを前提として作っていなかったので、こちらにも手を入れる必要があって、それなりに大変そう。そして、jscwlibのソースを眺めていたら、一時停止のコードもあって、自分のoscillatorの実装もそんなに違わなかったので、これを真似してなんとか元のコードの改良で動作するようになった。

ということで一時停止機能はなんとかリリースできた。あと需要がありそうなのはシークバーとか音源ダウンロードあたりだろうか。シークバーは一時停止の機能の応用で頑張ればできるかもしれない。音源ダウンロードはjscwlibでできているので技術的には可能だと思うんだけど、どうやったらいいか見当もつかない状況。

機能アップもリファクタリングも気になってはいるけれど、本質的には開発当初の思想、つまり「アプリを開いたら即一総通の受信練習ができる」は維持していきたい。

【リンク】Webアプリ 日替わり通信術

Tweet