A music player that connects to your cloud/distributed storage.
feat: audio volume
+27
-8
+26
-8
src/components/engine/audio/element.js
+26
-8
src/components/engine/audio/element.js
···
20
20
* @implements {Actions}
21
21
*/
22
22
class AudioEngine extends BroadcastableDiffuseElement {
23
+
#VOLUME_KEY;
24
+
23
25
constructor() {
24
26
super();
25
27
···
36
38
this.$isPlaying.set = fn("isPlaying", this.$isPlaying.set).replicate;
37
39
}
38
40
39
-
// TODO: Get volume from previous session if possible
40
-
// const VOLUME_KEY = `@elements/engine/audio/${this.groupId}/volume`;
41
-
// const vol = localStorage.getItem(VOLUME_KEY);
41
+
// Get volume from previous session if possible
42
+
this.#VOLUME_KEY = `@components/engine/audio/${this.group}/volume`;
43
+
const volume = localStorage.getItem(this.#VOLUME_KEY);
44
+
45
+
this.#volume = signal(volume ? parseInt(volume) : 0.5);
46
+
this.volume = this.#volume.get;
42
47
}
43
48
44
49
// SIGNALS
45
50
46
51
#items = signal(/** @type {Audio[]} */ ([]));
47
-
#volume = signal(0.5);
52
+
#volume;
48
53
49
54
$hasEnded = signal(false);
50
55
$isPlaying = signal(false);
···
54
59
hasEnded = this.$hasEnded.get;
55
60
isPlaying = this.$isPlaying.get;
56
61
items = this.#items.get;
57
-
volume = this.#volume.get;
58
62
59
63
// LIFECYCLE
60
64
···
75
79
});
76
80
}
77
81
78
-
// Monitor volume
79
-
// NOTE: Support different volume levels for audio elements?
82
+
// Monitor volume signal
80
83
this.effect(() => {
81
84
Array.from(this.querySelectorAll("de-audio-item audio")).forEach(
82
85
(node) => {
···
85
88
audio.volume = this.#volume.value;
86
89
},
87
90
);
91
+
92
+
localStorage.setItem(this.#VOLUME_KEY, this.#volume.value.toString());
88
93
});
89
94
}
90
95
91
-
// ACTIONS (PRIVATE)
96
+
// ACTIONS
97
+
98
+
/**
99
+
* @type {Actions["adjustVolume"]}
100
+
*/
101
+
adjustVolume(args) {
102
+
if (args.audioId) {
103
+
this.withAudioNode(args.audioId, (audio) => {
104
+
audio.volume = args.volume;
105
+
});
106
+
} else {
107
+
this.#volume.value = args.volume;
108
+
}
109
+
}
92
110
93
111
/**
94
112
* @type {Actions["pause"]}
+1
src/components/engine/audio/types.d.ts
+1
src/components/engine/audio/types.d.ts
···
1
1
import type { SignalReader } from "@common/signal.d.ts";
2
2
3
3
export type Actions = {
4
+
adjustVolume: (_: { audioId?: string; volume: number }) => void;
4
5
pause: (_: { audioId: string }) => void;
5
6
play: (_: { audioId: string; volume?: number }) => void;
6
7
reload: (_: { audioId: string; play: boolean; progress?: number }) => void;