TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							<html>

<head>
    <title>ArozOS Audio Test</title>
    <link rel="stylesheet" href="../../script/semantic/semantic.min.js">
    <script src="../../script/semantic/semantic.min.css"></script>
    <script src="../../script/jquery.min.js"></script>
    <!--<script src="ao_module.js"></script> DOES NOT EXIST IN GOLANG VERSION-->
    <style>
        .flip {
            -moz-transform: scale(-1, 1);
            -webkit-transform: scale(-1, 1);
            -o-transform: scale(-1, 1);
            -ms-transform: scale(-1, 1);
            transform: scale(-1, 1);
        }
        
        .selectable {
            padding: 15px !important;
            border: 1px solid transparent;
            border-radius: 10px;
        }
        
        .selectable:hover {
            border: 1px solid #839ff5;
            background-color: #ccd9ff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="ui container">
        <div class="ui basic segment">
            <div class="ui header">
                System Audio
                <div class="sub header">Test and adjust your global audio / volume settings</div>
            </div>
        </div>
       
        <div class="ui grid">
            <div class="five wide column selectable" align="center" onClick="PlaySound('left');"><i class="volume up huge icon flip"></i><br>Left Speaker</div>
            <div class="six wide column selectable" align="center" onClick="PlaySound('both');"><i class="computer huge icon"></i><br>Speaker Test</div>
            <div class="five wide column selectable" align="center" onClick="PlaySound('right');"><i class="volume up huge icon"></i><br>Right Speaker</div>
        </div>
        <br>
        <div class="ui segment">
            <h5>Master Volume</h5>
            <div class="ui slider">
                <input id="gblvol" min="0" max="100" type="range" value="0" style="width: 100%;">
            </div>
            <p>This Device Global Volume: <span id="numdis">0%</span></p>
            <small style="font-size:80%;">Some modules use stand-alone volume management system. Master volume may not be able to control all module's volume.</small>
        </div>
        <div style="display:none;">
            <audio id="both" controls><source src="../info/track/both.mp3" type="audio/mp3"></audio>
            <audio id="left" controls><source src="../info/track/left.mp3" type="audio/mp3"></audio>
            <audio id="right" controls><source src="../info/track/right.mp3" type="audio/mp3"></audio>
        </div>
    </div>
    <script>
        getGlobalVol();
        setInterval(getGlobalVol, 1000);

        function getGlobalVol() {
            var vol = localStorage.getItem("global_volume");
            if (vol == undefined || vol == "") {
                vol = 0;
                localStorage.setItem("global_volume", 0);
            }
            $("audio").prop("volume", parseFloat(vol));
            vol = parseFloat(vol) * 100; //Back to 0 - 100 scale
            vol = vol.toFixed(0);
            $("#gblvol").attr("value", vol);
            $("#numdis").html(vol + "%")

        }

        var b = document.getElementById("both");
        var l = document.getElementById("left");
        var r = document.getElementById("right");

        function PlaySound(keyword) {
            resetAllSoundTracks();
            if (keyword == "both") {
                b.play();
            } else if (keyword == "left") {
                l.play();
            } else {
                r.play();
            }
        }

        function resetAllSoundTracks() {
            b.pause();
            b.currentTime = 0;
            l.pause();
            l.currentTime = 0;
            r.pause();
            r.currentTime = 0;
        }

        $('input[type=range]').on('input', function() {
            $(this).trigger('change');
            var newval = ($(this).val());
            $("#numdis").html(newval + "%");
            newval = (newval / 100).toFixed(2);
            localStorage.setItem("global_volume", newval);
        });
    </script>
</body>

</html>