高見知英のかいはつにっし(β)

高見知英のアプリケーション開発日誌 のほか、地域活動などの活動報告ブログ。

Web上で音楽を再生するツール WebRhythmを作成しました。

このブログは、音楽ツール・ライブラリ・技術 Advent Calendar 2019 - Adventarの8日目の記事です。

8日目はデジタル音楽について。予定していたTone.jsについては、期日までに作り込みが終わったらなんとかします。

先週12月1日(日)、戸塚駅前の戸塚区総合庁舎で行われた第10回とつかお結び広場に、まちづくりエージェント SIDE BEACH CITY.として参加してきました。

とりあえずSBC.としての大まかなレポートは、SBC.ブログの方にも書いていますので、そちらの方もご覧頂ければと思います。

sbc.yokohama

今回はイベントの内容ではなく、その中で利用したアプリ、WebRhythmについての話しを少々してみようと思います。

WebRhythmとはどんなWebアプリか

今回は「パソコンでできることがどうとかはとりあえずおいといて、とにかくまずはパソコンに興味を持ってもらおう」ということで、Web Audio APIで音楽を作成できる簡易Webアプリを作成しました。

side-beach-city.github.io

いちおう元ネタは、Galaxy HarajukuででていたSound Wall。画面上に表示されたマス目をタップすると、そのマス目に対応した音が鳴ります。

今回はドレミファソラシドを1オクターブ再生できるようにしているので、リコーダー向けに作られている一部の音楽を演奏することができます。

今回は次のサイトを参考に、一部曲を作成、演奏しました。

www.asahi-net.or.jp

HTMLとCSSJavaScriptだけで作っているので、Github Pagesで動作可能、機能によりQRコードを使って別のスマートフォンタブレットに保存したプレイリストを転送する機能もついています(表示中の楽譜を送信する機能は現在ないですが、近日中に実装予定)。

以下のQRコードスマートフォンでスキャンするか、リンクをクリックすると、こちらでいくつか作成した曲がいくつかプレイリストに登録された状態でWebRhythmが表示されます(なお、現行のバージョンだとiPhoneiPadなどのiOS端末では、アプリが表示されません。対応までしばらくお待ちください)。

f:id:TakamiChie:20191207221257p:plain
WebRhythmのQRコード

直接開く

せっかくここまでできたので、いろいろ改修して次以降のイベントでも使えればいいな と。

やりたかったこと

今回やりたかったことは、とにかく「パソコンやスマートフォンに興味を持ってもらう」こと。

地区センターのイベントなどに行くと、パソコンやスマートフォンに関する話しとなった時点ですぐ「難しい」となってしまって、近寄らない人が少なくない。

パソコンやスマートフォンに漠然とした不安を感じてはいても、なにがわからないかわからないので、人に聴くこともできない という人は少なくありません。

わたしも地区センターの小規模な交流会や意見交換会などにはときどき顔を出したりしていますが、比較的平均年齢が若い都筑区ですら、パソコンの話が一切通じない なんてことも珍しくない。

なんというか、まるで砂漠の中にでもいるような絶望感。

まずはどんなものでもいい。スマートフォンに興味を持ってほしい。ということで、今回のようなプログラムを作成し、公開しました。

これからのWebRhythm

このWebRhythm自体はGithubのほうでチケットがたくさん残っているとおり、まだまだ開発を行っていく予定。

github.com

今度はTone.jsをつかって音色を変えたり、伴奏機能を付けたりといろんな機能増強を行っていきたいとおもっています。

まちづくりエージェント SIDE BEACH CITY.のプロダクトの一つでもあるため、メンバーの力を合わせて面白いものにしていきたいですね。