Adobe XD 最新機能!オーディオを追加して、音声再生する方法

3月のAdobe XDのアップデートでプロトタイプで音声再生をする機能が追加されました。他にもアンカーリンクのという機能でプロトタイプでリンク先に一気に飛ぶことが可能になりました。今回はオーディオを追加する方法をご紹介します。

前回アンカーリンクの使い方をご紹介しているので、こちらも御覧ください。

 

オーディオを追加する方法

 

今回はAKAI風キーボードを作ってみました。各ボタンにドレミの音を追加して、ドラムパッドにはドラムやスネアを割り当ててみました。

全てのボタンに音は割り当てていませんがこちらにプロトタイプのリンクを張っておきますので、試してみてください。再生アクションに問題が発生しましたと初めは出ますが、少し時間を置けば音声の再生は出来ると思います。

Adobe XD AKAI風キーボード

 

プロトタイプで音声の追加

 

要素が揃ったらプロトタイプに移行して、いつものように要素を選択しタップのトリガーを追加します。

オーディオ再生を選択

そして下の種類の中からオーディオ再生を選択します。

オーディオファイルの追加

そして用意している音声ファイルを追加することで、プロトタイプで選択した要素をタップしてオーディオ再生することができます。

全てのファイルで確認したわけではないですが、MP3やWAVどちらでも再生できました。

再設定も簡単

一度追加した音声は保存されるので他の要素にも再設定することができます。後でわかりやすいように、名前をしっかりつけておきましょう。

 

他のアクション(トランジションや自動アニメーション)中のオーディオ再生はできない

ピアノアプリのような上から音符が降りてきてタイミングで音を鳴らすプロトタイプを作ってみたかったのですが、自動アニメーション中の音声再生ができませんでした。

2つの音を同時に鳴らすことはできない

タップの他にもキーボードのキーによって音声を再生することができます。なので2つのキーを同時に押してみましたが、片方の音しか再生されませんでした。

オンラインのプロトタイプ共有では多少時間がかかる

オンラインの共有リンクに飛んだ後は、少しの間音声ファイルのロードに時間がかかります。その際は上のように「再生アクションに問題が発生しました。」と表示されます。なので少し時間を置いてからクリックしてみましょう。

 

今回のアップデートでかなりのことが出来るようになったと思います。今回のAKAI風キーボードをプロトタイプで試してみてください。

Adobe XD AKAI風キーボード

他にもAdobe XDのチュートリアルを紹介しています。

ではまた!

 

Adobe XD おすすめの本

僕はスキルシェアでAdobe XDやIllustratorを学びました。コーディングもここで学んでいます。
今だけ2ヶ月無料でのお試しもありますよ!
Udemyも動画をダウンロードしていつでも学ぶことが出来るのでおすすめですよ!

 

 

タイトルとURLをコピーしました