Add volume slider

src/GameManager.js

@@ -17,7 +17,8 @@ class EJS_GameManager {
             toggleShader: this.Module.cwrap('shader_enable', 'null', ['number']),
             getDiskCount: this.Module.cwrap('get_disk_count', 'number', []),
             getCurrentDisk: this.Module.cwrap('get_current_disk', 'number', []),
-            setCurrentDisk: this.Module.cwrap('set_current_disk', 'null', ['number'])
+            setCurrentDisk: this.Module.cwrap('set_current_disk', 'null', ['number']),
+            setVolume: this.Module.cwrap('set_volume', 'null', ['number'])
         }
         this.mkdir("/home");
         this.mkdir("/home/web_user");
@@ -134,6 +135,9 @@ class EJS_GameManager {
     setCurrentDisk(disk) {
         this.functions.setCurrentDisk(disk);
     }
+    setVolume(volume) {
+        this.functions.setVolume(volume);
+    }
 }
 
 window.EJS_GameManager = EJS_GameManager;

src/css/main.css

@@ -951,3 +951,135 @@
     right: .025rem;
     border: 0;
 }
+
+.ejs_volume_parent {
+    padding-right: 15px;
+    max-width: 110px;
+    align-items: center;
+    display: flex;
+    flex: 1;
+    position: relative;
+}
+.ejs_volume_parent::-webkit-media-controls{
+    display: none;
+}
+.ejs_volume_parent input[type='range']{
+    -webkit-appearance:none;
+    border:0;
+    border-radius:28px;
+    color:rgba(var(--ejs-primary-color), 1);
+    display:block;
+    margin:0;
+    padding:0;
+    transition:box-shadow 0.3s ease;
+    width:100%
+}
+.ejs_volume_parent input[type='range']::-webkit-slider-runnable-track{
+    background-color:rgba(255,255,255,0.25)
+    box-shadow:0 0 0 5px rgba(var(--ejs-primary-color), 0.5);
+    outline:0
+    background:transparent;
+    border:0;
+    border-radius:3px;
+    height:6px;
+    transition:box-shadow 0.3s ease;
+    user-select:none;
+    background-image:linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%))
+}
+.ejs_volume_parent input[type='range']::-webkit-slider-thumb{
+    background:#fff;
+    border:0;
+    border-radius:100%;
+    box-shadow:0 1px 1px rgba(0,0,0,0.15),0 0 0 1px rgba(47,52,61,0.2);
+    height:14px;
+    position:relative;
+    transition:all 0.2s ease;
+    width:14px;
+    -webkit-appearance:none;
+    margin-top:-4px
+}
+.ejs_volume_parent input[type='range']::-moz-range-track{
+    background-color:rgba(255,255,255,0.25)
+    box-shadow:0 0 0 5px rgba(var(--ejs-primary-color), 0.5);
+    outline:0
+    background:transparent;
+    border:0;
+    border-radius:3px;
+    height:6px;
+    transition:box-shadow 0.3s ease;
+    user-select:none
+}
+.ejs_volume_parent input[type='range']::-moz-range-thumb{
+    background:#fff;
+    border:0;
+    border-radius:100%;
+    box-shadow:0 1px 1px rgba(0,0,0,0.15),0 0 0 1px rgba(47,52,61,0.2);
+    height:14px;
+    position:relative;
+    transition:all 0.2s ease;
+    width:14px
+}
+.ejs_volume_parent input[type='range']::-moz-range-progress{
+    background:currentColor;
+    border-radius:3px;
+    height:6px
+}
+.ejs_volume_parent input[type='range']::-ms-track{
+    background-color:rgba(255,255,255,0.25)
+    box-shadow:0 0 0 5px rgba(var(--ejs-primary-color), 0.5);
+    outline:0
+    background:transparent;
+    border:0;
+    border-radius:3px;
+    height:6px;
+    transition:box-shadow 0.3s ease;
+    user-select:none;
+    color:transparent
+}
+.ejs_volume_parent input[type='range']::-ms-fill-upper{
+    background:transparent;
+    border:0;
+    border-radius:3px;
+    height:6px;
+    transition:box-shadow 0.3s ease;
+    user-select:none
+}
+.ejs_volume_parent input[type='range']::-ms-fill-lower{
+    background:transparent;
+    border:0;
+    border-radius:3px;
+    height:6px;
+    transition:box-shadow 0.3s ease;
+    user-select:none;
+    background:currentColor
+}
+.ejs_volume_parent input[type='range']::-ms-thumb{
+    background:#fff;
+    border:0;
+    border-radius:100%;
+    box-shadow:0 1px 1px rgba(0,0,0,0.15),0 0 0 1px rgba(47,52,61,0.2);
+    height:14px;
+    position:relative;
+    transition:all 0.2s ease;
+    width:14px;
+    margin-top:0
+}
+.ejs_volume_parent input[type='range']::-ms-tooltip{
+    display:none
+}
+.ejs_volume_parent input[type='range']:focus{
+    outline:0
+}
+.ejs_volume_parent input[type='range']::-moz-focus-outer{
+    border:0
+}
+
+.ejs_volume_parent input[type='range']:active::-webkit-slider-thumb {
+    box-shadow:0 1px 1px rgba(0,0,0,0.15),0 0 0 1px rgba(47,52,61,0.2),0 0 0 3px rgba(255,255,255,0.5)
+}
+.ejs_volume_parent input[type='range']:active::-moz-range-thumb {
+    box-shadow:0 1px 1px rgba(0,0,0,0.15),0 0 0 1px rgba(47,52,61,0.2),0 0 0 3px rgba(255,255,255,0.5)
+}
+.ejs_volume_parent input[type='range']:active::-ms-thumb {
+    box-shadow:0 1px 1px rgba(0,0,0,0.15),0 0 0 1px rgba(47,52,61,0.2),0 0 0 3px rgba(255,255,255,0.5)
+}

src/emulator.js

@@ -154,6 +154,8 @@ class EmulatorJS {
         this.debug = (window.EJS_DEBUG_XX === true);
         this.cheats = [];
         this.started = false;
+        this.volume = 0.5;
+        this.muted = false;
         this.paused = true;
         this.listeners = [];
         this.config = config;
@@ -636,6 +638,7 @@ class EmulatorJS {
         this.handleResize();
         this.updateCheatUI();
         this.updateGamepadLabels();
+        this.setVolume(this.volume);
         this.elements.parent.focus();
         this.callEvent("start");
     }
@@ -925,6 +928,60 @@ class EmulatorJS {
         spacer.style = "flex:1;";
         this.elements.menu.appendChild(spacer);
         
+        const volumeSettings = this.createElement("div");
+        volumeSettings.classList.add("ejs_volume_parent");
+        const muteButton = addButton("Mute", '<svg viewBox="0 0 640 512"><path d="M412.6 182c-10.28-8.334-25.41-6.867-33.75 3.402c-8.406 10.24-6.906 25.35 3.375 33.74C393.5 228.4 400 241.8 400 255.1c0 14.17-6.5 27.59-17.81 36.83c-10.28 8.396-11.78 23.5-3.375 33.74c4.719 5.806 11.62 8.802 18.56 8.802c5.344 0 10.75-1.779 15.19-5.399C435.1 311.5 448 284.6 448 255.1S435.1 200.4 412.6 182zM473.1 108.2c-10.22-8.334-25.34-6.898-33.78 3.34c-8.406 10.24-6.906 25.35 3.344 33.74C476.6 172.1 496 213.3 496 255.1s-19.44 82.1-53.31 110.7c-10.25 8.396-11.75 23.5-3.344 33.74c4.75 5.775 11.62 8.771 18.56 8.771c5.375 0 10.75-1.779 15.22-5.431C518.2 366.9 544 313 544 255.1S518.2 145 473.1 108.2zM534.4 33.4c-10.22-8.334-25.34-6.867-33.78 3.34c-8.406 10.24-6.906 25.35 3.344 33.74C559.9 116.3 592 183.9 592 255.1s-32.09 139.7-88.06 185.5c-10.25 8.396-11.75 23.5-3.344 33.74C505.3 481 512.2 484 519.2 484c5.375 0 10.75-1.779 15.22-5.431C601.5 423.6 640 342.5 640 255.1S601.5 88.34 534.4 33.4zM301.2 34.98c-11.5-5.181-25.01-3.076-34.43 5.29L131.8 160.1H48c-26.51 0-48 21.48-48 47.96v95.92c0 26.48 21.49 47.96 48 47.96h83.84l134.9 119.8C272.7 477 280.3 479.8 288 479.8c4.438 0 8.959-.9314 13.16-2.835C312.7 471.8 320 460.4 320 447.9V64.12C320 51.55 312.7 40.13 301.2 34.98z"/></svg>', () => {
+            muteButton.style.display = "none";
+            unmuteButton.style.display = "";
+            this.muted = true;
+            this.setVolume(0);
+        }, volumeSettings);
+        const unmuteButton = addButton("Unmute", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M301.2 34.85c-11.5-5.188-25.02-3.122-34.44 5.253L131.8 160H48c-26.51 0-48 21.49-48 47.1v95.1c0 26.51 21.49 47.1 48 47.1h83.84l134.9 119.9c5.984 5.312 13.58 8.094 21.26 8.094c4.438 0 8.972-.9375 13.17-2.844c11.5-5.156 18.82-16.56 18.82-29.16V64C319.1 51.41 312.7 40 301.2 34.85zM513.9 255.1l47.03-47.03c9.375-9.375 9.375-24.56 0-33.94s-24.56-9.375-33.94 0L480 222.1L432.1 175c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94l47.03 47.03l-47.03 47.03c-9.375 9.375-9.375 24.56 0 33.94c9.373 9.373 24.56 9.381 33.94 0L480 289.9l47.03 47.03c9.373 9.373 24.56 9.381 33.94 0c9.375-9.375 9.375-24.56 0-33.94L513.9 255.1z"/></svg>', () => {
+            muteButton.style.display = "";
+            unmuteButton.style.display = "none";
+            this.muted = false;
+            this.setVolume(this.volume);
+        }, volumeSettings);
+        unmuteButton.style.display = "none";
+        
+        const volumeSlider = this.createElement("input");
+        volumeSlider.setAttribute("data-range", "volume");
+        volumeSlider.setAttribute("type", "range");
+        volumeSlider.setAttribute("min", 0);
+        volumeSlider.setAttribute("max", 1);
+        volumeSlider.setAttribute("step", 0.01);
+        volumeSlider.setAttribute("autocomplete", "off");
+        volumeSlider.setAttribute("role", "slider");
+        volumeSlider.setAttribute("aria-label", "Volume");
+        volumeSlider.setAttribute("aria-valuemin", 0);
+        volumeSlider.setAttribute("aria-valuemax", 100);
+    
+        this.setVolume = (volume) => {
+            volumeSlider.setAttribute("value", volume);
+            volumeSlider.setAttribute("aria-valuenow", volume*100);
+            volumeSlider.setAttribute("aria-valuetext", (volume*100).toFixed(1) + "%");
+            volumeSlider.setAttribute("style", "--value: "+volume*100+"%;margin-left: 5px;position: relative;z-index: 2;");
+            if (this.gameManager) this.gameManager.setVolume(volume);
+        }
+        this.setVolume(this.volume);
+        
+        this.addEventListener(volumeSlider, "change mousemove touchmove mousedown touchstart mouseup", (e) => {
+            setTimeout(() => {
+                this.volume = parseFloat(volumeSlider.value);
+                this.setVolume(this.volume);
+                unmuteButton.style.display = (this.volume === 0) ? "" : "none";
+                muteButton.style.display = (this.volume === 0) ? "none" : "";
+            }, 5);
+        })
+        
+        volumeSettings.appendChild(volumeSlider);
+        
+        
+        
+        //this.volume this.muted
+        
+        this.elements.menu.appendChild(volumeSettings);
+        
         this.settingParent = this.createElement("div");
         this.settingsMenuOpen = false;
         const settingButton = addButton("Settings", '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z"/></svg>', () => {