素材データを用意する
今回は音源データの配置と再生についてのお話です。
音源データ
音源データは、効果音ラボから借りる事ができます。(利用規約を確認しておきましょう)
ダウンロードしたデータは"audio01.mp3"という名前にして、"assets"フォルダに格納しておきます。
素材データの読み込み
A-Frameで利用するデータの読み込みをします。
音源データも、映像データや画像データと同様に"a-assets"タグに指定していきます。
audioタグ
"a-assets"タグの中に、"audio"タグを記述する事で音源データを読み込む事ができます。
アトリビュートの"id"を使って読み込んだデータにアクセスする事ができます。
"src"にはファイルへのパスを記述します。
index.html
<audio id="audio01" src="./assets/audio01.mp3" preload="auto"></audio>
a-soundタグ
"a-sound"タグを使う事で、読み込んだ音源データをVR空間に配置する事ができます。
アトリビュートである"src"には、先ほど"a-assets"タグで読み込んだ音源データの"id"を指定します。"position"は、音源が発生する場所(発生源)になります。
他のアトリビュートは次の表を参考にしてください。(他にもありますよ)
| アトリビュート名 | 記述例 | 意味 |
|---|---|---|
| src | #audio01 | 動画素材のid(#を忘れずに!!) |
| position | 0 1.2 -3 | 音源の発生位置 |
| autoplay | true/false | 自動再生のon/off |
| loop | true/false | 繰り返しon/off |
index.html
<a-sound id="my_sound01" src="#audio01" position="0 1.2 -3" autoplay="false" loop="true"></a-sound>
動作を確認してみる
ここまでのソースを載せておきますね。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="./main.js"></script>
</head>
<body>
<a-scene stats loading-screen="dotsColor: gray; backgroundColor: lightgray">
<a-sky color="#ECECEC"></a-sky>
<a-entity environment="preset: default;"></a-entity>
<a-plane position="0 0.05 -5" rotation="-90 0 0" width="6" height="6" color="#7BC8A4"></a-plane>
<a-camera id="my_camera">
<a-cursor></a-cursor>
</a-camera>
<a-assets timeout="1000">
<audio id="audio01" src="./assets/audio01.mp3" preload="auto"></audio>
<img id="img_play" src="./assets/img_play.png"></img>
<img id="img_pause" src="./assets/img_pause.png"></img>
</a-assets>
<a-sound id="my_sound01" src="#audio01" position="0 1.2 -3" autoplay="false" loop="true"></a-sound>
<a-image id="my_btn01" src="#img_pause" position="0 1.2 -3" scale="0.3 0.3 0.3"></a-image>
</a-scene>
</body>
</html>
この状態では、VR空間上にボタンが見えるだけですね。
次回は、ボタンのクリックと音源の制御についてのお話です。