Merge pull request #71 from AttorneyOnline/new_music_stuff

add channels and clientside looping

2 files changed, 23 insertions, 8 deletions

diff --git a/webAO/client.html b/webAO/client.html
index 8909fc9..c446480 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -362,7 +362,8 @@
 			<meta name="frame-title" lang="en" content="Settings">
 			<h2>Volume</h2>
 			<p>Music</p>
-			<audio id="client_musicaudio" onvolumechange="changeMusicVolume()" controls loop></audio>
+			<input id="client_mvolume" class="long" type="range" min="0" max="1" value="1" step="0.01"
+					onchange="changeMusicVolume()">
 
 			<p>SFX</p>
 			<audio id="client_sfxaudio" onvolumechange="changeSFXVolume()" controls></audio>
diff --git a/webAO/client.js b/webAO/client.js
index efb3132..d80141e 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -446,7 +446,7 @@ class Client extends EventEmitter {
 		document.querySelector('#client_chatboxselect [value="' + cookiechatbox + '"]').selected = true;
 		setChatbox(cookiechatbox);
 
-		document.getElementById("client_musicaudio").volume = getCookie("musicVolume") || 1;
+		document.getElementById("client_mvolume").value = getCookie("musicVolume") || 1;
 		changeMusicVolume();
 		document.getElementById("client_sfxaudio").volume = getCookie("sfxVolume") || 1;
 		changeSFXVolume();
@@ -736,8 +736,11 @@ class Client extends EventEmitter {
 	handleMC(args) {
 		const track = prepChat(args[1]);
 		let charID = Number(args[2]);
+		const showname = args[3] || "";
+		const looping = Boolean(args[4]);
+		const channel = Number(args[5]) || 0;
    
-		const music = viewport.music;
+		const music = viewport.music[channel];
 		let musicname;
 		music.pause();
 		if(track.startsWith("http")) {
@@ -745,6 +748,7 @@ class Client extends EventEmitter {
 		} else {
 			music.src = MUSIC_HOST + encodeURI(track.toLowerCase());
 		}
+		music.loop = looping;
 		music.play();
 
 		try {
@@ -1528,8 +1532,9 @@ class Viewport {
 		this.testimonyAudio = document.getElementById("client_testimonyaudio");
 		this.testimonyAudio.src = `${AO_HOST}sounds/general/sfx-guilty.wav`;
 
-		this.music = document.getElementById("client_musicaudio");
-		this.music.src = `${AO_HOST}sounds/music/trial (aa).mp3`;
+		this.music = new Array(3);
+		this.music.fill(new Audio(`${AO_HOST}sounds/music/trial (aa).mp3`))
+			.forEach(channel => channel.volume = 0.5);
 
 		this.updater = null;
 		this.testimonyUpdater = null;
@@ -1555,7 +1560,7 @@ class Viewport {
 	}
 
 	/**
-	 * Sets the volume of the blip sound.
+	 * Sets the volume of the blip sounds.
 	 * @param {number} volume
 	 */
 	set blipVolume(volume) {
@@ -1563,6 +1568,14 @@ class Viewport {
 	}
 
 	/**
+	 * Sets the volume of the music.
+	 * @param {number} volume
+	 */
+	set musicVolume(volume) {
+		this.music.forEach(channel => channel.volume = volume);
+	}
+
+	/**
 	 * Returns the path which the background is located in.
 	 */
 	get bgFolder() {
@@ -2387,7 +2400,8 @@ window.area_click = area_click;
  * Triggered by the music volume slider.
  */
 export function changeMusicVolume() {
-	setCookie("musicVolume", document.getElementById("client_musicaudio").volume);
+	viewport.musicVolume = document.getElementById("client_mvolume").value;
+	setCookie("musicVolume", document.getElementById("client_mvolume").value);
 }
 window.changeMusicVolume = changeMusicVolume;
 
@@ -3111,4 +3125,4 @@ export function toggleShout(shout) {
 		selectedShout = shout;
 	}
 }
-window.toggleShout = toggleShout;
\ No newline at end of file
+window.toggleShout = toggleShout;