Adobe Edge Animate では、<audio> 要素を伴う HTML5 オーディオがネイティブサポートされるので、アニメーションプロジェクトに音声を追加することが可能です。基本的な HTML および JavaScript を使用して、コンポジションでのオーディオの再生を制御できます。また、オーディオエレメントをタッチイベントおよびマウスイベントにバインドし、タイムライン上でのオーディオの再生をトリガーすることもできます。Adobe Edge Animate のオーディオ機能は、HTML DOM に埋め込まれています。従って、プラグインを必要とすることなく、任意のコンピューターやデバイスで音声が再生されます。

Edge Animate には以下の形式のオーディオを読み込めます。

  • .mp3
  • .ogg/.oga
  • .wav
  • .m4a
  • .aac

ブラウザーの枠を超えて最高の一貫性を実現するには、.mp3 および .ogg 形式のオーディオエレメントをプロジェクトに加えてください。対応するオーディオ形式について詳しくは、HTML5 の audio 要素と video 要素でサポートされているメディアフォーマットをご覧ください。

オーディオファイルのフォールバックバージョンを作成するには、Creative Cloud メンバーシップに含まれる Adobe Audition などのオーディオ変換アプリケーションを使用できます。

コンポジションへのオーディオの追加

次のいずれかの操作を実行します。

  • オーディオファイルをファイルシステムからプロジェクトにドラッグ&ドロップします。オーディオファイルの名前の付いた「オーディオグループ」がライブラリに作成されます。このオーディオグループには、オーディオファイルに加え、異なるブラウザー間の互換性を維持するためのフォールバックファイルが含まれています。

注意:フォールバックファイルは、プロジェクトにドロップすると、自動的にオーディオグループに分類されます。

ライブラリのオーディオグループ

  • プロジェクトのライブラリで「オーディオを追加」をクリックして、目的のオーディオファイルを選択し、そのオーディオグループをステージにドラッグします。 
ライブラリの「メディアを追加」オプション
ライブラリの「オーディオを追加」オプション

プロジェクトにオーディオを追加すると、エレメントパネルに「オーディオエレメント」が表示されます。エレメントパネルでそのオーディオエレメントを選択すると、オーディオの再生を制御するためのオプションが表示されます。

エレメントパネルのオーディオ
エレメントパネルのオーディオ

オーディオの再生と制御

オーディオの再生および制御には以下のオプションが用意されています。

  • プロパティパネル
    • 自動再生:タイムライン上でオーディオファイルを自動的に再生します。
    • ループ:再生が終わったオーディオファイルを最初からループ再生します。
プロパティパネルのオーディオコントロールオプション

  • タイムライン
    • 再生:現在の再生ヘッドの位置からオーディオファイルを再生します。
    • 再生の開始位置:再生を開始したい位置をタイムマーカーで指定できます。
    • 一時停止:オーディオトラックを一時停止できます。再生機能を使用して再生を開始します。
タイムラインのオーディオコントロールオプション

  • オーディオアクション:アクションのコードスニペットを使用し、イベントによってオーディオ再生を制御します。

オーディオアクション

  1. タイムラインでオーディオエレメントの横にある {} をクリックし、アクションエディターを開きます。

  2. 表示されるイベントのリストから、必要なトリガーをクリックします。

  3. 「アクションを選択」リストで「オーディオ」をクリックし、必要なアクションをクリックします。

    アクションエディターのオーディオアクション

  4. 「ターゲットを選択」セクションで「ステージ」をクリックし、選択したアクションを適用する必要があるエレメントをダブルクリックします。

  5. 必要に応じて、コードウィンドウ内のコードを変更します。

重要:オーディオによっては、ローカルでは完璧に再生されていても、Web サーバーにロー すると再生できないことがあります。そのような場合は、オーディオのサポートに必要な MIME タイプを含むよう Web サイトの .htaccess ファイルを構成します。ご不明な点があれば、Web サイト管理者にご相談ください。

オーディオの微調整

タイムラインでは、キーフレームトランジションの設定によってボリュームトランジションを制御できます。ボリュームトランジションを使用して、フェードイン、フェードアウト、複数トラックのクロスフェードといった独自のオーディオエフェクトを作成します。

注意:

ほとんどのモバイルデバイスでは、オーディオのボリュームトランジションを利用できません。制限事項については、デバイスでのオーディオの使用を参照してください。

オーディオのプリロード

コンポジションを読み込む前にオーディオファイルをプリロードするには、ステージのプロパティパネルにあるプリロードセクションで「オーディオをプリロード」を選択します。

注意:ほとんどのモバイルデバイスでは、オーディオのプリロードを利用できません。制限事項については、デバイスでのオーディオの使用を参照してください。

デフォルトのオーディオプレーヤーの有効化

ブラウザーにデフォルトの Windows Media Player を使用してオーディオコントロールを表示できます。デフォルトのオーディオプレーヤーは、初期設定では非表示になっています。プレーヤーを表示するには、オーディオエレメントを選択し、プロパティパネルで「オン」を選択します。

デフォルトのオーディオプレーヤーの有効化
デフォルトのオーディオプレーヤーの有効化

プレーヤースキンはブラウザーによってレンダリングされ、表示されるブラウザーに応じて見た目が異なります。例えば、Chrome で表示されるプレーヤーは、Firefox で表示されるものとは異なっています。独自のプレーヤーを作成するのに使用できるカスタムコントロールの作成方法については、オーディオアクションを参照してください。

プレーヤーがステージに表示されたら、他のオブジェクトに追加するのと同じように、モーションプロパティと変形プロパティをプレーヤーに追加できます。<audio> 要素は特別なタイプの HTML 要素であるため、以下に示すプロパティのサブセットのみを適用できます。

  • 不透明度
  • 切り抜き
  • 位置とサイズ
  • 変形

デバイスでのオーディオの使用

iOS

iOS(iPad を含むすべてのデバイス)の Safari では、ユーザーが携帯電話ネットワークを使用している場合、データ単位で料金が請求されることがあるので、プリロード、自動再生および再生アクションは無効にしておきます。ユーザーがオーディオを再生するまでデータは読み込まれません。

ユーザーイベントによってトリガーされたオーディオエレメントを、オーディオアクションを使用して呼び出すこともできます。オーディオアクションについて詳しくは、オーディオアクションを参照してください。

ボリュームプロパティで設定したボリュームキーフレームおよびコントロールは、iOS デバイスに対応していません。その場合、デバイス自体の音量調整を使用してボリュームを調整できます。

iOS 4.0 以前の iPhone および iPod touch では、オーディオはインライン再生されず、フルスクリーンモードで表示されていました。iOS 4.0 以降は、すべてのデバイスで、オーディオがインライン再生されます。

Android

オーディオエレメントについて、大抵は Android にも iOS と同じ制限があります。

ヒントとクロスブラウザーへの考慮事項

オーディオの同期

オーディオを使用して、ステージの構成に合わせて音を動かすことができます。ただし、Web の性質上、オーディオトラックがステージ上を動くエレメントと同期しなくなる可能性があります。特に長めのトラックでは、動きと音を調和させる際に再生の待ち時間が発生することがあります。

オーディオスプライト

オーディオスプライトを使用すると、別々の再生可能な部分から単一のオーディオファイルを作成できます。この手法は、すべてのオーディオを単一のファイルにダウンロードしてダウンロード時間を短縮するのに用いられます。

オーディオスプライトを使用するには、オーディオエレメントをシンボルに変換し、再生マーカーを用いてスプライトのセクションを呼び出します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー