VitePress

Appearance

サウンドについて ​

初期化が必要な理由 ​

ウェブブラウザには「ユーザーの操作なしに音を鳴らしてはいけない」 という自動再生のポリシーがあります。ページを開いた瞬間に勝手に 音が鳴るのを防ぐためのしくみで、音声の再生機能（AudioContext）は クリックなどのユーザー操作をきっかけにしないと有効化できません。

そのためa3jsでも、音を使う前にユーザーの操作をきっかけとした 初期化が必要です。この初期化が完了しないと音声は再生されません。

初期化の方法 ​

初期化はa3.initSound()で行います。必ずクリックなどの ユーザー操作のコールバック内で呼び出してください。

Viewのalert()の第2引数に渡すのが簡単な方法です。OKボタンの クリックをきっかけに初期化が実行されます。

js
await view.alert('音声が再生されます。', a3.initSound);

ボタンなど自分で用意したUIから初期化することもできます。

js
button.addEventListener('click', async () => {
  await a3.initSound();
});

全体の音量はa3.Sound.listener.setMasterVolume(0.5);のように 設定できます。

サウンドの種類 ​

a3jsで音を鳴らす方法は大きく2つあります。

1つ目はSoundクラスを使う方法です。音声ファイルを 読み込んで再生します。種類（type）が2つあります。

  • audio — 距離に関係なく一定音量で再生されます。BGMなどに 適しています（デフォルト）。
  • positional — 3D空間内の位置に基づいて音量や左右の定位が 変化するポジショナルオーディオです。効果音などに適しています。

2つ目はAcerola3D（.a3）ファイルに含まれるサウンドです。 アクションの再生に合わせて自動的に音が鳴ります。

Acerola3D内蔵サウンドのサンプル ​

足音のサウンドが含まれたAcerola3Dのモデルを再生するサンプルです。 walkやrunのアクションに合わせて足音が鳴ります。

js
import * as a3 from 'a3js';

const view = new a3.Window(600,300);
await view.alert('音声が再生されます。', a3.initSound);
a3.Sound.listener.setMasterVolume(0.3);
const obj = await new a3.Acerola3D('/a3js/assets/footfalls.a3').ready;
obj.setState('walk');
view.scene.add(obj);
await a3.asyncSleep(2000);
obj.setState('run');

Soundクラス ​

Soundクラスの詳しい使い方はSoundクラスのページを 参照してください。