こんにちは、制作会社のフロントエンドエンジニアをしているやぎといいます。
先日社内LTで発表したWebにおけるサウンドの扱いをこちらにまとめてみました。
はじめに
Webサイトは画像だけでなく、音楽や動画といったマルチメディアを取り扱えるのが魅力の一つです。最近のWebデザインや特設サイトにおいてもこれらをふんだんに使った表現があり、G's Academyに入られた方の提出課題にもBGMやSE、動画を盛り込んでいる作品もいくつか拝見しました。
が、動画やアニメーション、最近ではWebGLといった視覚的なリッチ表現は広がりつつある一方、サウンド関連では
- 作ってもらった音源データを流す
- 所定のタイミングで再生・停止する
- 調整する部分としては音源のミュート(消音)くらい
- サウンドを扱ったコンテンツとしてリズムゲームや、サウンドの波形を読み取ったビジュアライズ
のように、制作会社での経験かつ個人的な意見ではありますが用途として比較的限定されているような印象を受けました。
もちろん新作オリジナル楽曲だとそれ自体の注目度も出てくるわけですが、もう少しサウンドに目を向けた表現を作ってみてはと思った次第です。
ゲーム業界・自社サービスのサウンドに対する意識
では、他の業界であったり自社サービスを出がけているところではどのようにサウンドを取り扱っているのか。
まずはゲーム業界での取り組みを見てみると、
- ゼルダの伝説ブレスオブザワイルドのサントラを買う人が知らないゼルダBGMの裏側
- ゲームサウンドクリエーターの役割
- ゲーム音楽って面白いんです！
- 【ネタバレ注意!!】「FFXV」サウンドのコアテクノロジー「MAGI」の全貌が公開
任天堂さんやセガさん、スクウェア・エニックスさんの主要作品でのサウンドの入れ込みを感じさせるものがあります。進行状況やユーザ操作に応じて曲調を変える、いわゆるインタラクティブミュージックに重きを置き、サウンドクリエイター・サウンドプログラマーといった職種があり活躍しています。
コンシューマーゲームにおいてユーザに飽きさせない、世界観に没入する環境を作り上げる上で「サウンド」の位置付けが大きいと言えます。
また、Web領域においても実はFacebookがサウンドにも力を入れています。
Facebookでサウンドデザインディレクターをしている人の記事で、ユーザインタラクションを向上する上でサウンドはシンプルにする、類似するものにまとめる、繰り返しに耐えうるといった8つのルールを設けているようです。同様の内容で Ferret さんも記事にしています。
このように、ゲーム業界や自社サービス(ここではFacebookを挙げましたが他にもあるかもしれません)で社内で作り上げる体制やそれを使った演出等、サウンドに対する意識が高くありますが、
その背景として以下のような点が挙げられるのかなと思います(あくまで推察でありご了承いただければm(_ _)m)。
- いずれもユーザが中長時間利用されるサービス・コンテンツであること
- 自社で抱えるサービス・コンテンツから予算調整がある程度可能である
一方、制作会社ではなかなか上記の点に添えられないのかもしれません。コーポレートサイトやキャンペーンサイトは観たい情報だけ見る・一度体験するといった比較的短時間の利用であるし、サウンドにかける予算調整や体制面でも難しいように思われます。
だからといってないがしろにはできないところであり、昨今スマートスピーカーのようなVUIが着目されたり、視覚障害といった方々へのアクセシビリティという面からも、サウンドの取り扱いを意識する必要があると考えます。
考えてみたサウンドインタラクションのあれこれ
上述のように、サウンドの用途が限定的であったり利用ケースや予算面の制約がある制作会社としてはどのような取り組みができるのか。
個人的ですが以下の結論に至りました。
- サウンドクオリティをある程度考慮しつつ予算に影響しにくい方法の検討
- リズムゲームのような、サウンド主体にしたコンテンツを企画提案
では、具体的な事例を踏まえて紹介していきたいと思います。
予算に影響しにくい方法の検討
１） 新しく作るBGMやSEだとそれを専門とする音楽制作会社に依頼する必要があります。メインとなる楽曲を新規制作するのは良いと思いますが、全て作ってもらうとなると音源数によっては相当のコストが考えられます。コンテンツに占める各サウンドのプライオリティによっては既存の音源を購入・ダウンロードするのも一つの手ではないでしょうか。
２） Web Audio API のOscillatorNodeを使うことでサイン波等を音源データいらずで再生することができます。
これはこれでユーザ操作に応じて音の調子が変わるコンテンツとしても検討できますし、「ポーン」と音を短く切ってボタンクリックに合わせて再生したら、ちょっとしたボタンインタラクションの一要素としても使えます。
それから、これに音階をつけたら簡易的な8bit系メロディも作ることができますね。
凝ったメロディにしようとなるとサウンドクリエイターといった専門の人と一緒に進めるといいですが、Web Audio APIの利点の一つに音階や遅延・ボリューム・加工といった部分をコードベースで実装できます。
やや記述が煩雑にはなりますが、デザイナーやエンジニアが直接音の調整に関われるのが期待できます。
サウンド主体にしたコンテンツを企画提案
サウンドインタラクションに一工夫加えるという点でここでは2つあげさせていただきます。
１） 音のコントロールはボタン操作が一般的だったりしますが、それ以外の方法を取れないかと以前このような記事を作成しました。
これはWebRTCの getUserMedia を使っています。
大まかなフローとしては以下のようになっています。
- WebRTCでWebカメラに接続
- カメラから取得した画像をCanvasで2値化(モノクロにする)
- カメラに手をかざしたり光を遮ろうとすると2値化した値が変化
この時は2値化した値の変化を周波数と連動し、 テルミン みたいにしましたが、音のボリュームと連動させることでユーザが手を近づけたり離すことで音量をコントロールすることができそうです。
それに、Webカメラに接続するだけでなくオーディオに接続できるので外界の音も拾うことができます。これによって外界の音の騒音状況に応じて表示を切り替えることができますし、外界の音をコントロールできるイベントにも向いていそうです。
２） Googleが Resonance Audio というSDKを今年4月にオープンソースにしました。これは、いわば立体音響を再現するもので、Webだけでなく、アプリやUnity、Unreal Engineにも対応しています。
これを使えば、例えばどの方向から音が来ているのかを探し当てるといったコンテンツも作れそうです。また、スマホであればジャイロセンサと連動させて音の鳴る方に何かを表示させる、Unityであればヘッドマウントディスプレイを組み合わせてVR体験による没入体験向上にも活かせそうです。
このResonance Audioから更にOmnitoneというリンクも貼られています。
これは先の立体音響に加えWeb VRによる映像も組み合わせたWebの没入体験ができるものになっています。
ちなみに、先日見に行った IMG SRC PROTOTYPES 201811 にも同じような立体音響を扱った展示がされていました。こちらは別のライブラリを使っていたようで、探せば色々とありそうです。
なお、音を捉えやすくなるようヘッドフォンが推奨とのことですw
以上、Webでできるサウンドインタラクションをご紹介しました。
そういえばこの記事キャプチャはおろかコードを一行たりとも載せていないぞw
そんな日もあっていいですね、師走ですしw
これから仕様の変化に応じてもっとできることが増えて、サウンドに目を向ける機会ができるといいなぁと期待しつつ(直近はスマホの自動再生とか)。
実案件でサウンドに工夫した例はあまり見受けられないので、これから様々な表現を増やしていくチャンスはあるかなと思います。今回調べてみて、音は映像以上にユーザインタラクションに富んだ要素であるので。
最後に、Googleでサウンドを扱ったサイトをご紹介します。
キャラクターとサウンドと連動したモーションが心地よいので視覚効果と連動した例として参考までに。