Rich, Immersive, Audio With Resonance Audio, bring dynamic spatial sound into your VR, AR, gaming, or video experiences at scale.
Based on Google Resonance Audio project
Here is the code from the demo. That is it. Pure html!
<a-resonance-room
src-position="0.85 1.5 -0.7"
src="static/track.mp3"
loop="true",
autoplay="true",
width="4"
height="3"
depth="3.8"
helper="true"
left-wall="brick-bare"
right-wall="curtain-heavy"
front-wall="marble"
back-wall="glass-thin"
down-wall="marble"
up-wall="brick-bare"
><a-resonance-room><head>
<!--
... MORE HEAD STUFF ...
-->
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/resonance-audio/build/resonance-audio.min.js"></script>
<script src="https://cdn.rawgit.com/etiennepinchon/aframe-resonance/master/dist/aframe-resonance.min.js"></script>
</head>| Name | Description | Type | Default |
|---|---|---|---|
| helper | Show a helpers for the room and source. | boolean | false |
| src-position | Position of the audio source in the room. | vec3 | 0 0 0 |
| src | Path to audio file | string | "" |
| loop | Whether the audio should loop. | boolean | true |
| autoplay | Whether the audio should autoplay | boolean | true |
| width | Width of the room. | number | 2 |
| height | Height of the room. | number | 2 |
| depth | Depth of the room. | number | 2 |
| left-wall | Materials to apply on the left wall. | string | brick-bare |
| right-wall | Materials to apply on the right wall. | string | brick-bare |
| front-wall | Materials to apply on the front wall. | string | brick-bare |
| back-wall | Materials to apply on the back wall. | string | brick-bare |
| down-wall | Materials to apply on the down wall. | string | brick-bare |
| up-wall | Materials to apply on the up wall. | string | brick-bare |
- transparent
- acoustic-ceiling-tiles
- brick-bare
- brick-painted
- concrete-block-coarse
- concrete-block-painted
- curtain-heavy
- fiber-glass-insulation
- glass-thin
- glass-thick
- grass
- linoleum-on-concrete
- marble
- metal
- parquet-on-concrete
- plaster-smooth
- plywood-panel
- polished-concrete-or-tile
- sheetrock
- water-or-ice-surface
- wood-ceiling'
- wood-panel
- uniform
The audio source (regular HTML audio player) can be found in the element as audioEl.
<script type="text/javascript">
let el = document.querySelector('a-resonance-room');
el.audioEl.pause();
</script>First make sure you have Node installed.
On Mac OS X, it's recommended to use Homebrew to install Node + npm:
brew install node
To install the Node dependencies:
npm install
To serve the site from a simple Node development server:
npm start
Then launch the site from your favourite browser:
If you wish to serve the site from a different port:
PORT=8000 npm start
Google 😍😝
Distributed under an MIT License.