読者です 読者をやめる 読者になる 読者になる

概要

Yahoo! Japanで開催されたOpen Hack Day Japan2 というイベントに参加してきました。

http://yhacks.jp/ohd2/

「24時間で開発!」というコンセプトの開発イベントで、今回は本当に 2/15 12:00- 2/16 12:00 というスケジュールで、夜もぶっ通しで24時間開発時間がありました。

さて、僕達の作ったEarPhoneですが

「リアルタイムに自動作曲する生活に溶け込むアシスタントシステム」

です。

最近自動作曲に興味があって、いろいろ調べたりしてました。
今回のメンバーには昔ギターをバリバリ演奏してた人も居たので、その経験とITの力を組み合わせて「自動作曲システム」を作ることにしました。

使用した技術

iOSでも動作する WebAudioAPIを利用してブラウザ上で動く自動作曲システムを実現しました。

WebAudioのBufferSourceのplaybackRateを設定することで 一つの音程の音源から、2オクターブ分の音程を作ることが出来ました(これが出来ないと全音程のmp3を用意するはめになるところでした)

昔触った時はなんかこう音声がぶちぶちになったり、と使いにくい印象があったのですが、いつの間にかすごく使い勝手がよく、かつ今回の用途のようなものであれば十分に動作することが確認できました。

音を重ねる部分で(おそらくiPhoneでは)300個くらい音源が重なると突然ノイズが発生し、意図した音が出ずにバッファが詰まったような音が出てくるような現象が発生するバグに悩まされました。(これが夜中の1時くらいに発覚し、4時位まで対応していた記憶がありますw)

結局、パーカッションの音が鳴ってもいないのに再生状態にあったので、これを早めにnoteOffすることで、同時に鳴っている音を減らす施策により解消しました。

ページの見た目・ホスティング

Y君、J君、Yさんにより「ぽいページ」が完成しました。
また、音楽の状態に同期してページの画像を変化させる仕組みを作りました。

ページはheroku, githubホスティングし、node.js(express)で動作しています(まぁあまりなにも活用してないけど)
将来的なことも考えsocket.ioで通信する仕組みも用意してあります(現在はコメントアウトしています)

音楽生成の仕組み

コード進行

コード進行はプリセットを切り替える形で実装しました。
本当はここも全自動にしたかったのですが、発表時間が有限であることを考えると、コンパクトなコード進行が必要になり、この部分はハードコーディングすることにしました。

ここでは作曲経験のあるA君が持ち込んだギターを奏でながらコード(和音)を設計してくれました

楽器構成

ありがちな楽器構成として
パーカッション + ベース + ギター + ピアノ
という4つのパートを作ることにしました。

音色

開始して6時間位はSin波や矩形波で鳴らしていました。 が、ピコピコ感が否めないため、Web上にあるフリー素材を探してきて音源にしました。
この結果、とてもいい感じになりました。音色大事!

パーカッション

ここはS君がまず、JavaScipt上で動作するドラムマシンのような仕組みをつくり、そこにA君がありがちなドラムパターンを入れていきました。
これで、1小節単位のいい感じのドラムパターンがたくさん出来ました。
これらを組み合わせて曲を構成します。

フィルインのパターンも何個か用意し、曲調が変わるタイミングで鳴らすようにしました(これがかっこいい!)

ベース

ベースは現在のコードのルート音を中心に、ゆっくりなリズムで音を切り替えていくようにしました。
リズムは初めに5パターンくらい生成し、これを使いまわしています。

ギター

ギターは現在のコードの構成音を中心に、八分音符でランダムに鳴らすパターンを10個位つくり、それを使いまわしています。

ピアノ

ピアノは現在のコードの構成音を中心に、八分音符〜二分音符を配置したパターンを数個作り、使いまわしています。

テンポ

曲調が変わるタイミングで、テンポを変えています。
テンポはカチッと変わるのではなく、指定されたテンポに向かって徐々に変化していくようにしました。
ぬるっと変わっていく感じが気に入っています。

今回の活用方法

自動作曲システム自体はとてもありがちな設計で、まぁ僕の趣味的に作ったところがあるのですが、今回はこれを日常に活用できないか?という事を考えてみました。

最近Glassのようなものや、Watchのようなもの、 いわゆる 身に付ける情報表示装置・ウェアラブルバイスが流行っているのですが、 そういう観点で、「耳に情報をオーバーレイする」ってのが出来ないかと考えました。
単にアラームなどで鳴る方式ではなく、BGMのように鳴っている曲を少しアレンジすることで「ゆるいnotice」を提示することで、うざったくない情報提示が出来ないか?という試作品を作ってみました。

今回のデモでは「陽気な曲」「物哀しくゆっくりな曲」「ハイテンポで焦る曲」「ゆったりしてくつろげる曲」を生成しつつ、シームレスに切り替えています。

オンラインで曲を生成するこのシステムを使うことで、自然でゆるいnoticeを実現できることを示すことが出来たのではないかと思います。

デモ

完全にデモ用に作ったので下記の注意点をよく読んでから触ってみてください。

  • 音源のロードを非同期で行っています。 が、ロード完了を検知していません。 そのため、ページロード後、少し待ってから「START」を押してください。
  • STARTを一度押すとSTOPにかわりますが STOPは機能しません 音を止めたいときはリロードしてください


http://earphone.herokuapp.com/

(上記注意点はなるべく早く修正します)

公式ページとしてはこちら
http://yhacks.jp/ohd2/work/8

開発スタイル

  • メンバーのスキルセット
    • 僕(Web開発)
    • A君(Web開発、ギター)
    • S君(Web開発)
    • J君(Web開発、Webデザイン)
    • Sさん(Webデザイン)
    • Y君(Web開発、Webデザイン)

こんな感じで、Web開発スキルがみんなあったので、とてもスムーズに開発を行えました。

Herokuのリポジトリをみんなで共有してファイルのやりとり、動作確認が行えました。
いじってる部分もみんなバラバラだったので面倒なコンフリクトもほとんど起きずにスムーズに開発をすすめられました。

    • A君の理論を数式化しJavaScriptにおこす
    • WebAudioの情報収集
  • A君
    • ギター片手にコード進行設計
    • 僕に音楽理論を教える
  • S君
    • ドラムマシンのようなものをJavaScriptで作成
    • A君のリズムをプログラムにおこす
    • heroku, githubの構築
    • node(express)の土台作成
  • J君
    • 表示部分結合
    • 画面イメージからのWeb画面作成
    • heroku, githubの構築
  • Sさん
    • 雪で会場にこれず
    • 画面イメージを作成
  • Y君
    • firefoxOSでの動作確認(結局動作しませんでしたが、移植のノウハウは得られたとのこと、共有を期待!)
    • 画面イメージからのWeb画面作成


( 写真は @RakutenAPI に撮っていただいたものです)

感想

社内でやってる時も含め、毎回参加しているHackDay。今回も楽しい開発が出来ました!
エンジニア発信で、面白いプロダクトを提示していく場として、今後も関わっていければと思っています。

一緒に参加した皆様、そしてこのイベントを支えてくださった皆様に感謝します。ありがとうございます!

今後も楽しく「!」なプロダクトを作りまくって、楽しい未来を提案していきたいです。