Web でオーディオを使用するための 5 つの黄金律

ウェブ上のサウンド。 知っている。 歴史的に、これら 2 つのことはあまりうまく連携していませんでした。 私たちのほとんどは、ひどいエレクトロ ジャズをバックグラウンドに流すことが雰囲気を高めるのに最適であると作成者が判断したサイトを訪問したときに、おそらく後付けで火傷を負ったことがあります。 幸いなことに、必ずしもそうである必要はありません。 違うやり方もできます。

人々がネイティブ アプリと Web アプリについて話すとき、オーディオについては決して言及されません。 しかし、多くのネイティブ アプリの UI が Web アプリよりも優れているのは、この要素によって決まります。 たとえば、携帯電話のカメラ アプリを考えてみましょう。 写真がいつ撮影されたかをどうやって知ることができるのでしょうか? 画像がキャプチャされたことを示す何らかのフラッシュが画面上に表示されることが多いですが、通常は、エミュレートされたカメラのシャッターの機械的なクリック音でバックアップされます。 Twitter の有名な「プルして更新」コントロールはどうでしょうか? 手を離したときに小さな「パチッ」という音がなかったら、同じくらい満足できるでしょうか?

チュートリアルに合わせてこのビデオをご覧ください...

では、なぜ今このことを考えるのでしょうか？ 何が変わったのでしょうか？ まず第一に、私たちはもう Flash に依存する必要はありません。 の到着に伴い、 タグを実装するブラウザが増えています。 ウェブオーディオAPI、ブラウザでネイティブにサウンドを生成でき、遅延がなく、これまで以上に制御しやすくなります。 使いたくない場合は、オーディオ ファイルを使用する必要さえありません。 Web Audio API を使用すると、画像をペイントして最初から作成する場合と同じように、クライアント上でサウンドを作成できます。 キャンバス 要素ですが、それについては後で詳しく説明します。

Web サイトへの写真のアップロードが完了したときにユーザーに通知したいとします。 サウンドを再生してオーディオフィードバックを提供したい場合があります。 これは技術的には実装が非常に簡単ですが、適切に検討されていない場合、ユーザー エクスペリエンスに悪影響を与える可能性があります。 ガイダンスを提供するために、Web アプリにオーディオを導入する際に考慮すべき 5 つの重要な事項のリストを作成しました。

01. それは必要ですか？

リンクをホバーするたびに、または CSS が遷移するたびに、ポップ音やピー音を鳴らす必要はありません。 ユーザーへの重要なメッセージを大幅に強調または明確にする場合にのみ、アクションまたは結果に音声を伴う必要があります。 ユーザーに注意が必要なことを通知しますか? おそらく。 リンクをクリックしますか? 絶対にありません。

02. 環境

おそらく、ネイティブ モバイル アプリがサウンドをより多く採用する傾向にある理由の 1 つは、サウンドが必要になったためです。 騒音が多く、視覚的な情報が多い環境で追加のフィードバックを提供するため 気を散らすもの。 あなたの Web アプリは、移動中に使用される可能性が高いでしょうか、それとも、そのような音が他の人の気を散らす可能性がある静かなオフィスで使用される可能性が高いでしょうか? モバイル エクスペリエンスを向上させるためにオーディオを追加することを検討している場合は、オーディオのピッチを考慮してください。 たとえば、低音は周囲の騒音を遮断しないため、聞き取りにくくなります。

03. 迷惑ですか？

オーディオには、極度にイライラする可能性があるという追加の負担が伴います。 サウンドそのものが原因の場合もあれば、繰り返されるサウンドが原因の場合もあります。 場合によっては両方です (サムスンの最近のニュースを聞いてください) 通知ホイッスル) 幸いなことに、いくつかのことを行うことで、この問題が発生する可能性を減らすことができます。

• 音を短くしてください。 1 秒未満が望ましく、0.5 秒がさらに望ましいです。
• サウンドを構成する音が倍音的であり、音色が心地よいものであることを確認してください。
• どうしても必要な場合にのみ音声を繰り返してください。

繰り返しに関しては、Facebook や Google+ の一部であるチャット アプリケーションは、誰かがメッセージを送信したことをユーザーに通知するために音声を使用します。 ユーザーが現在作業しているタブとは別のタブで Facebook を開いている場合、これは注意が必要な何かが待機していることを明確に示しているため、これは理にかなっています。 しかし、現在そのチャットに返信している場合、その通知にはどのようなメリットがあるのでしょうか?

04. パフォーマンス

長さに応じて、音声のスニペットのファイル サイズがページ上のほとんどの画像よりも大きくなる可能性があります。 幸いなことに、これは視覚的には何の影響も与えず、機能もブロックされません。 したがって、HTML や画像と一緒にオーディオ ファイルをダウンロードするのではなく、ページが読み込まれた後、ユーザーがページを楽しく操作している間にバックグラウンドでオーディオ ファイルを読み込むことを検討してください。

さらに良いのは、可能な場合は Web Audio API の使用を検討してください。 Web Audio API は、JavaScript を使用してブラウザーでサウンドを操作する高度な方法です。 現在、すべての主要なブラウザに実装されているわけではありませんが、フォールバックとして audio 要素とともに使用することを検討する価値は間違いなくあります。 API を使用すると、既存のオーディオ ファイルを使用せずに、ブラウザーでサウンドを最初から作成できます。 その詳細についてはこの記事の範囲外ですが、私がどのように作成したかをご覧ください。 成功デモ.html 通知音 （チュートリアル ファイルでダウンロードできます) Chrome、Safari、または Firefox を使用している場合は JavaScript で。

05. コンテキストとアイデンティティ

子供向けの楽しいサイトのユーザー エクスペリエンスを向上させるために作成された音声は、金融 Web アプリには適していません。 アプリを使用する人の気分を想像して、適切なトーンを選択してください。

サウンドもまた、ビジュアル アイデンティティと同じようにブランドの不可欠な部分となる可能性があります。 の Macの起動音、 ノキアの着信音、 そして インテルの社内チャイム これらは、文脈を無視してこれらの音を聞いたとしても、関与している企業がわかってしまう例です。 あらゆる機会に独自のモチーフをユーザーの外耳道に押し込む必要はありませんが、サイトの視覚的アイデンティティを反映する一連のサウンドを作成することを検討してください。 Facebook は最近、この考えをさらに一歩進めました。 着信音は 4 つの音符で構成されています。 F、A、C、E.

コーダ

うまく機能すれば、オーディオは最も退屈な Web アプリであっても強化し、豊かにすることができます。 自動再生される BGM のことは忘れて、サイト全体のエクスペリエンスと楽しさをどのように向上させるかに焦点を当ててください。 確かに、それが常に適切であるとは限りません。 ユーザーに迷惑をかけるだけでなく、ユーザーの物理的に近くにいる人たちに迷惑をかけないように注意する必要があります。 画面上のキーボードのカタカタ音をオフにしていない iPhone ユーザーが思い浮かびます。 オーディオの追加は、軽くタッチして慎重に行う必要があります。

Web Audio API が Chrome、Safari、Firefox、Opera でサポートされるようになったことで、重いアセットをダウンロードすることなくサウンドを完全に制御できるようになりました。 API の能力も無視すべきではありません。 リバーブなどのオーディオ効果を動的に適用したり、2 つの別々の音楽をクロスフェードしたりすると、現在の機能が変わります。 HTML5 ゲーム、体験全体がより没入感のあるものになります。 ネイティブのライバルに挑戦する楽器をブラウザで作成することもできます。 しかし、私はそう言いたいです。 見る Web Audio APIで作った私のドラムマシン.

サウンドは、視覚的な合図と同じくらい効果的にユーザーにフィードバックを提供できます。 経験が私たちに植え付けた警戒心を持って、この問題に再アプローチする時が来ています。

言葉: スチュアート・メモ

この記事は最初に掲載されました ネットマガジン 250号。