Skip to content

Commit cf17e29

Browse files
fredjfredj
committed
Web audio spatialization
1 parent 9597ffa commit cf17e29

6 files changed

Lines changed: 161 additions & 0 deletions

File tree

‎demos/goat.mp3‎

36.5 KB
Binary file not shown.

‎demos/missing-goat.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<script src="https://cesium.com/downloads/cesiumjs/releases/1.107.1/Build/Cesium/Cesium.js"></script>
6+
<link
7+
href="https://cesium.com/downloads/cesiumjs/releases/1.107.1/Build/Cesium/Widgets/widgets.css"
8+
rel="stylesheet"
9+
/>
10+
<style>
11+
html,
12+
body,
13+
#cesiumContainer {
14+
height: 100%;
15+
margin: 0;
16+
}
17+
#play {
18+
position: absolute;
19+
right: 30px;
20+
top: 30px;
21+
font-family: monospace;
22+
font-weight: bold;
23+
font-size: 1.6em;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<audio src="goat.mp3"></audio>
30+
31+
<div id="cesiumContainer"></div>
32+
<button id="play" type="button">play</button>
33+
<script type="module">
34+
import { createViewer } from "./setup.js";
35+
import CesiumSphereCamera from "../packages/cesium-sphere-camera/cesium-sphere-camera.js";
36+
import CesiumBinoculars from "../packages/cesium-binoculars/cesium-binoculars.js";
37+
import CesiumAudio from "../packages/cesium-audio/cesium-audio.js";
38+
39+
createViewer("cesiumContainer").then((viewer) => {
40+
const sphereMode = new CesiumSphereCamera(viewer);
41+
const binocularsMode = new CesiumBinoculars(viewer);
42+
sphereMode.active = true;
43+
binocularsMode.active = true;
44+
45+
let init = false;
46+
let audioElement;
47+
let listener;
48+
document.querySelector("#play").addEventListener("click", () => {
49+
if (!init) {
50+
const audioCtx = new AudioContext();
51+
listener = audioCtx.listener;
52+
53+
// position of the listener
54+
listener.positionX.value = 0;
55+
listener.positionY.value = 0;
56+
listener.positionZ.value = 0;
57+
58+
// forward direction of the listener
59+
listener.forwardX.value = 0;
60+
listener.forwardY.value = 0;
61+
listener.forwardZ.value = -1;
62+
63+
// head of the listener
64+
listener.upX.value = 0;
65+
listener.upY.value = 1;
66+
listener.upZ.value = 0;
67+
68+
const panner = new PannerNode(audioCtx);
69+
// Head-related transfer function
70+
panner.panningModel = "HRTF";
71+
72+
panner.coneInnerAngle = 90;
73+
panner.coneOuterAngle = 160;
74+
panner.coneOuterGain = 0.3;
75+
76+
// panner.distanceModel = "linear";
77+
78+
// how quickly does the volume reduce as the panner moves away from the listener
79+
// panner.rolloffFactor = 10;
80+
81+
panner.orientationX.value = 0;
82+
panner.orientationY.value = 0;
83+
panner.orientationZ.value = -1;
84+
85+
// const audioElement = new Audio("goat.mp3");
86+
audioElement = document.querySelector("audio");
87+
const track = audioCtx.createMediaElementSource(audioElement);
88+
89+
track.connect(panner).connect(audioCtx.destination);
90+
91+
const cesiumAudio = new CesiumAudio(viewer, listener);
92+
init = true;
93+
}
94+
audioElement.play();
95+
// listener.positionY.value -= 1;
96+
listener.positionX.value -= 1;
97+
});
98+
});
99+
</script>
100+
</body>
101+
</html>

‎demos/setup.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export async function createViewer(container) {
1717
homeButton: false,
1818
fullscreenButton: false,
1919
scene3DOnly: true,
20+
requestRenderMode: true,
2021
baseLayer: new Cesium.ImageryLayer(
2122
new Cesium.UrlTemplateImageryProvider({
2223
url: "https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.swissimage/default/current/3857/{z}/{x}/{y}.jpeg",

‎packages/cesium-audio/LICENSE‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
BSD 3-Clause License
2+
3+
Copyright (c) 2020-present, camptocamp SA
4+
All rights reserved.
5+
6+
Redistribution and use in source and binary forms, with or without
7+
modification, are permitted provided that the following conditions are met:
8+
9+
1. Redistributions of source code must retain the above copyright notice, this
10+
list of conditions and the following disclaimer.
11+
12+
2. Redistributions in binary form must reproduce the above copyright notice,
13+
this list of conditions and the following disclaimer in the documentation
14+
and/or other materials provided with the distribution.
15+
16+
3. Neither the name of the copyright holder nor the names of its
17+
contributors may be used to endorse or promote products derived from
18+
this software without specific prior written permission.
19+
20+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎packages/cesium-audio/cesium-audio.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default class CesiumSound {
2+
constructor(viewer, listener) {
3+
viewer.scene.postRender.addEventListener((scene) => {
4+
5+
listener.positionX.value;
6+
// scene.camera.heading;
7+
8+
// distance to panner
9+
listener.positionZ.value;
10+
});
11+
}
12+
13+
// get/set listener
14+
// get/set audio position in cartesian3
15+
16+
}

‎packages/cesium-audio/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "@geoblocks/cesium-audio",
3+
"version": "0.0.0",
4+
"license": "BSD-3-Clause",
5+
"repository": "github:geoblocks/cesium-helpers",
6+
"main": "cesium-audio.js",
7+
"module": "cesium-audio.js",
8+
"publishConfig": {
9+
"access": "public"
10+
},
11+
"peerDependencies": {
12+
"cesium": "1.x"
13+
}
14+
}

0 commit comments

Comments
 (0)