Edge Animateを試そう：HTMLアニメーションに効果音を追加する

HTMLアニメーションにサウンドを追加して、より豊かな体験をつくってみませんか？

サウンドは、どんなインタラクティブなコンテンツにとっても重要な要素です。ごく簡単な効果音でもアニメーションの表現力を高めることができます。

Edge Animateの［オーディオ］機能は、HTML5 audioの全ての機能をサポートし、アニメーションの再生と同期したサウンド再生を効率的に支援します。

HTML5 オーディオとアニメーションを同期

この記事では、［オーディオ機能］を使い、HTMLアニメーションにサウンドを追加する手順を解説します。

記事内で使用するサンプルのベースとなったコンテンツが公開されています。下のリンクをクリックするとご覧になれます。

［オーディオ機能］を使ったコンテンツを見る
（※表示すると効果音が再生されるのでご注意ください。iOSなど、一部モバイル環境では再生されないことがあります）

上のコンテンツの制作には、Edge Animateのレスポンシブな拡大/縮小や、モーションパスの機能も使われています。この2種類の機能については、別の記事で詳しく紹介しています。

参考：Edge Animateの基本的な使い方は「Edge Animate入門」をご覧ください。

まずは、ダウンロードしたサンプルファイルの（01_編集前）内にあるindex.anファイルをダブルクリックしてEdge Animate内で開いてください。

このプロジェクトは、レスポンシブな拡大/縮小の設定を一通り終えたものに、モーションパスを使いボールの動きを追加したものとなります。Ctrl + Enterキーを押すと、ブラウザでプレビューが表示できます。

Edge Animateでは、オーディオを他の画像などと同様にエレメントとして扱います。なお、Edge Animateでは以下のオーディオ形式を扱うことが可能です。

スマートフォンなどのモバイル端末におけるオーディオ再生には、一部制限があります。詳しくは、Edge Animateヘルプの「デバイスでのオーディオの使用」をご覧ください。

それでは、実際に音を再生してみましょう。

まずは、BGMをループ再生させてみましょう。その手順は以下の通りです。

［自動再生］と［ループ］にチェックを入れ、［ボリューム］を設定する

以上で、BGMの設定が完了致しました。ブラウザーでプレビューしてみましょう。

上記の設定でブラウザープレビューを行うと、BGMの再生開始時の数秒間、設定したボリュームが反映されない場合があります。その場合は、BGMの［自動再生］のチェックを外し、タイムライン上で、例えば「0：00.500」に再生ヘッドを合わせ、「＋」ボタン（再生ボタン）を選択してください。

このようにすることで、BGMの再生より先に、設定内容が読み込まれ、適切なボリュームで再生されるようになります。

オーディオはタイムライン上で、他のシンボルと同様に扱うことができます。ここでは、先程設定したBGMの再生開始時に、フェードインを設定してみましょう。その手順は以下の通りです。

なお、BGM再生開始時を「0：00.500」に設定していると仮定します。「0：00」に設定しているボリュームのキーフレームは削除、または「0％」に設定しておいてください。

［ボリューム］を0%から20%へと変化するようにする

これでフェードインの設定が完了です。数値を逆に設定することにより、フェードアウトさせることもできます。ブラウザーで確認してみましょう。変化がわかりづらい場合は、%の数値を上げてみてください。

次は、スポットで鳴らす効果音を設置してみましょう。その手順は以下の通りです。

以上で設置は完了です。ブラウザーでプレビューをして、音声が流れるか確認してみましょう。

通常オーディオエレメントは、ステージ上に置いただけでは見た目上何も表示されません。しかし、そのエレメントの［プロパティ］パネル内の［表示］をオンにすると、オーディオプレイヤーがステージ上に表示されるようになります。

［プロパティ］パネル内の［表示］をオンにすると、オーディオプレイヤーがステージ上に表示される

サンプルコンテンツの残りのアニメーションについては、これまでのバージョンの機能を利用することで実装が可能です。また、必要な素材はサンプルファイルに含めていますので、完成版のサンプルを参考にしながら、ぜひ、引き続いてアニメーションを完成させてみてください。