the audio controls come with a volume slider

2 files changed, 7 insertions, 18 deletions

diff --git a/webAO/client.html b/webAO/client.html
index a47c093..857cbad 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -281,12 +281,10 @@
 			<br>
 			<br>
 			<div class="slider">Music
-				<input id="client_mvolume" class="long" type="range" min="0" max="100" value="80"
-					onchange="changeMusicVolume()">
+				<audio id="client_musicaudio" onvolumechange="changeMusicVolume()" controls loop></audio>
 			</div>
 			<div class="slider">SFX
-				<input id="client_svolume" class="long" type="range" min="0" max="100" value="70"
-					onchange="changeSFXVolume()">
+				<audio id="client_sfxaudio" onvolumechange="changeSFXVolume()" controls></audio>
 			</div>
 			<div class="slider">Blip
 				<input id="client_bvolume" class="long" type="range" min="0" max="100" value="60"
@@ -379,13 +377,6 @@
 	<input id="client_musicsearch" style="display:none"></input>
 	<select id="client_musiclist" size="5" onchange="musiclist_click(event)">
 	</select>
-	<span id="client_musiccontrol">
-		<audio id="client_musicaudio" controls loop></audio>
-	</span>
-	<span id="client_sound" style="display:none">
-	
-	
-	</span>
 </template>
 
 </html>
\ No newline at end of file
diff --git a/webAO/client.js b/webAO/client.js
index e7b2362..9eb4031 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -371,9 +371,9 @@ class Client extends EventEmitter {
 		document.querySelector('#client_themeselect [value="' + cookietheme + '"]').selected = true;
 		reloadTheme();
 
-		document.getElementById("client_mvolume").value = getCookie("musicVolume");
+		document.getElementById("client_musicaudio").volume = getCookie("musicVolume");
 		changeMusicVolume();
-		document.getElementById("client_svolume").value = getCookie("sfxVolume");
+		document.getElementById("client_sfxaudio").volume = getCookie("sfxVolume");
 		changeSFXVolume();
 		document.getElementById("client_bvolume").value = getCookie("blipVolume");
 		changeBlipVolume();
@@ -1847,8 +1847,7 @@ window.area_click = area_click;
  * Triggered by the music volume slider.
  */
 export function changeMusicVolume() {
-	viewport.music.volume = document.getElementById("client_mvolume").value / 100;
-	setCookie("musicVolume", document.getElementById("client_mvolume").value);
+	setCookie("musicVolume", document.getElementById("client_musicaudio").volume);
 }
 window.changeMusicVolume = changeMusicVolume;
 
@@ -1856,9 +1855,8 @@ window.changeMusicVolume = changeMusicVolume;
  * Triggered by the sound effect volume slider.
  */
 export function changeSFXVolume() {
-	viewport.sfxaudio.volume = document.getElementById("client_svolume").value / 100;
-	viewport.shoutaudio.volume = document.getElementById("client_svolume").value / 100;
-	setCookie("sfxVolume", document.getElementById("client_svolume").value);
+	viewport.shoutaudio.volume = document.getElementById("client_sfxaudio").volume;
+	setCookie("sfxVolume", document.getElementById("client_sfxaudio").volume);
 }
 window.changeSFXVolume = changeSFXVolume;