Skip to content

Commit

Permalink
Implement soundscape test page
Browse files Browse the repository at this point in the history
- Soundscape test page is now functional, complete with four sounds that
  can be started and stopped independently, which are all under a single
  TrackGroup
- Sound volume can be manipulated individually, and on the entire group
- Now using more cool stuff with data attributes
  • Loading branch information
almic committed Apr 12, 2024
1 parent c1cc768 commit bbc4f45
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 2 deletions.
Binary file added docs/audio/Drips.ogg
Binary file not shown.
Binary file added docs/audio/Night.ogg
Binary file not shown.
Binary file added docs/audio/River.ogg
Binary file not shown.
Binary file added docs/audio/Storm2.ogg
Binary file not shown.
76 changes: 76 additions & 0 deletions docs/js/soundscape.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,79 @@
/**
* Soundscape.js
*/

import { toggleText } from './main.js';
import MusicMixer from './lib/MusicMixer.js';

/* Web only; loading after interaction with page */
let mixer;
let ambienceTrack;
function loadMixer() {
mixer = new MusicMixer();
ambienceTrack = mixer.newTrackGroup('ambience');
ambienceTrack.volume(0.5);

ambienceTrack
.newTrack('storm', 'audio/Storm2.ogg')
.loop(true, 772_453, 772_453 + 2_233_599)
.volume(0.5);

ambienceTrack
.newTrack('rain', 'audio/River.ogg')
.loop(true, 31, 31 + 353_589)
.volume(0.5);

ambienceTrack
.newTrack('wildlife', 'audio/Night.ogg')
.loop(true, 572_933, 572_933 + 4_101_063)
.volume(0.5);

ambienceTrack
.newTrack('cave', 'audio/Drips.ogg')
.loop(true, 10, 10 + 544_625)
.volume(0.5);
}

/* Button functions */

function toggleTrack(self) {
const name = self.getAttribute('data-track');
const playing = self.getAttribute('data-playing') == 'true';
const track = ambienceTrack.track(name);
if (track) {
if (playing) {
track.getActiveSource().onended = null;
track.stop({ duration: 2 });
self.setAttribute('data-playing', 'false');
toggleText(self);
} else {
track.start({ duration: 2 });
self.setAttribute('data-playing', 'true');
toggleText(self);
track.getActiveSource().onended = () => {
if (self.getAttribute('data-playing') == 'true') {
self.setAttribute('data-playing', 'false');
toggleText(self);
}
};
}
}
}

function changeVolume(name, volume) {
if (name == 'ambience') {
ambienceTrack.volume(volume);
return;
}

const track = ambienceTrack.track(name);
if (track) {
track.volume(volume);
}
}

/* Web only; bind functions to global context */

window.loadMixer = loadMixer;
window.toggleTrack = toggleTrack;
window.changeVolume = changeVolume;
51 changes: 49 additions & 2 deletions docs/soundscape.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ <h1 id="title" class="center-text text-glow-responsive">
</h1>
<p class="center-text text-glow">
Play and loop multiple sounds on a track group.
<br>
This soundscape combines four sounds to imitate being in a cave at night while a storm blows outside.
</p>
<p class="moz-only center-text">
<span class="pop">
Expand All @@ -46,8 +48,53 @@ <h1 id="title" class="center-text text-glow-responsive">

<div class="flex-container flex-center flex-controls">
<button type="button" class="load-button glow-bright" onclick="hideButtons(this);loadMixer()">Click to load MusicMixer</button>


<div style="flex-basis:35%" hidden>
<div class="flex-container flex-column flex-center center-text">
<span>Group Volume</span>
<input type="range" min="0" max="1" value="0.5" step="0.001" oninput="changeVolume('ambience', Number(this.value))">
</div>
</div>
<div class="flex-break-row" hidden></div>
<div style="flex-basis:20%;flex-grow:1" hidden>
<div style="height:5rem" class="flex-container flex-column flex-center">
<button type="button"
data-track="storm"
data-toggle-text="Stop Storm"
onclick="toggleTrack(this)"
>Start Storm</button>
<input type="range" min="0" max="1" value="0.5" step="0.001" oninput="changeVolume('storm', Number(this.value))">
</div>
</div>
<div style="flex-basis:20%;flex-grow:1" hidden>
<div style="height:5rem" class="flex-container flex-column flex-center">
<button type="button"
data-track="rain"
data-toggle-text="Stop Rain"
onclick="toggleTrack(this)"
>Start Rain</button>
<input type="range" min="0" max="1" value="0.5" step="0.001" oninput="changeVolume('rain', Number(this.value))">
</div>
</div>
<div style="flex-basis:20%;flex-grow:1" hidden>
<div style="height:5rem" class="flex-container flex-column flex-center">
<button type="button"
data-track="wildlife"
data-toggle-text="Remove Wildlife"
onclick="toggleTrack(this)"
>Add Wildlife</button>
<input type="range" min="0" max="1" value="0.5" step="0.001" oninput="changeVolume('wildlife', Number(this.value))">
</div>
</div>
<div style="flex-basis:20%;flex-grow:1" hidden>
<div style="height:5rem" class="flex-container flex-column flex-center">
<button type="button"
data-track="cave"
data-toggle-text="Undrip Cave"
onclick="toggleTrack(this)"
>Drip Cave</button>
<input type="range" min="0" max="1" value="0.5" step="0.001" oninput="changeVolume('cave', Number(this.value))">
</div>
</div>
</div>

<hr>
Expand Down

0 comments on commit bbc4f45

Please sign in to comment.