2 years ago · 4e137b8923
--- a/Звук/Sound/.DS_Store
+++ b/Звук/Sound/.DS_Store
--- a/Звук/Sound/Dz10Js.html
+++ b/Звук/Sound/Dz10Js.html
@@ -0,0 +1,130 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <link rel="stylesheet" href="style.css">
			
 
				+</head>
			
 
				+<style>
			
 
				+
			
 
				+    #container1 {
			
 
				+        padding-top: 20px;
			
 
				+        padding-bottom: 20px;
			
 
				+        display: flex;
			
 
				+        justify-content: space-between;
			
 
				+    }
			
 
				+
			
 
				+</style>
			
 
				+
			
 
				+<body>
			
 
				+
			
 
				+    <div id="container1"></div>
			
 
				+    <script>
			
 
				+        function Control(el, { value = 50,
			
 
				+            min = 0,
			
 
				+            max = 100,
			
 
				+            minAngle = -90,
			
 
				+            maxAngle = 90,
			
 
				+            wheelSpeed = 0.1,
			
 
				+            step = 1 } = {}) {
			
 
				+
			
 
				+            const img = document.createElement('img')
			
 
				+            img.src = 'img/1@3x.png'
			
 
				+            el.append(img)
			
 
				+
			
 
				+            const ratio = (maxAngle - minAngle) / (max - min) //цена единицы value в градусах
			
 
				+            const getAngle = () => (value - min) * ratio + minAngle //подсчитали отступ в единицах, пересчитали в градусы и прибавили к стартовому углу
			
 
				+
			
 
				+
			
 
				+            this.setValue = (newValue) => {
			
 
				+                if (newValue < min) {
			
 
				+                    newValue = min
			
 
				+                }
			
 
				+
			
 
				+                if (newValue > max) {
			
 
				+                    newValue = max
			
 
				+                }
			
 
				+
			
 
				+                value = newValue
			
 
				+
			
 
				+                if (typeof this.onchange === 'function') {
			
 
				+                    this.onchange(value)
			
 
				+                }
			
 
				+
			
 
				+                img.style.transform = `rotate(${getAngle()}deg)`
			
 
				+            }
			
 
				+
			
 
				+            this.getValue = () => value
			
 
				+
			
 
				+            img.onmousewheel = (e) => {
			
 
				+                const { deltaY } = e
			
 
				+                //console.log(deltaY)
			
 
				+                e.preventDefault()
			
 
				+
			
 
				+                this.setValue(value + deltaY * wheelSpeed)
			
 
				+            }
			
 
				+
			
 
				+            img.onclick = (e) => {
			
 
				+                const { layerX } = e
			
 
				+                console.log(e, layerX)
			
 
				+                if (layerX > img.width / 2)
			
 
				+                    this.setValue(value + step)
			
 
				+                else
			
 
				+                    this.setValue(value - step)
			
 
				+            }
			
 
				+
			
 
				+            this.setValue(value)
			
 
				+        }
			
 
				+
			
 
				+        const volumeControl = new Control(container1, { value: 75, minAngle: -90 })
			
 
				+        volumeControl.onchange = (value) => {
			
 
				+            hit.volume = value / 100
			
 
				+            console.log('ON CHANGE', value)
			
 
				+        }
			
 
				+
			
 
				+        const hit = document.createElement("audio");
			
 
				+        hit.setAttribute("controls", "");
			
 
				+        hit.src = "hit/kalush_-_stefanija_(z2.fm).mp3";
			
 
				+        hit.style.paddingLeft = "60px"
			
 
				+        document.body.append(hit);
			
 
				+
			
 
				+        //на каждый setValue
			
 
				+        //console.log(volumeControl.getValue())
			
 
				+        //пришейте к нему тэг audio для громкости
			
 
				+
			
 
				+        function setRGB() {
			
 
				+            let redBlock = red.getValue()
			
 
				+            let greenBlock = green.getValue()
			
 
				+            let blueBlock = blue.getValue()
			
 
				+            let rgbBlock = (block.style.background = `rgb(${redBlock},${greenBlock},${blueBlock})`)
			
 
				+            console.log('setRGB')
			
 
				+            //какой то блок, которому меняем цвет через rgba и значения крутилок
			
 
				+        }
			
 
				+
			
 
				+        const red = new Control(container1, { min: 0, max: 255 })
			
 
				+        red.onchange = setRGB
			
 
				+        const green = new Control(container1, { min: 0, max: 255 })
			
 
				+        green.onchange = setRGB
			
 
				+        const blue = new Control(container1, { min: 0, max: 255 })
			
 
				+        blue.onchange = setRGB
			
 
				+
			
 
				+        const block = document.createElement("div");
			
 
				+        block.style.width = "700px";
			
 
				+        block.style.height = "300px";
			
 
				+        block.style.paddingLeft = "370px"
			
 
				+        document.body.append(block);
			
 
				+
			
 
				+        
			
 
				+
			
 
				+        // setTimeout(() => volumeControl.setValue(80), 2000)
			
 
				+    </script>
			
 
				+
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+
			
 
				+
			
 
				+</html>
			
--- a/Звук/Sound/hit/.DS_Store
+++ b/Звук/Sound/hit/.DS_Store
--- a/Звук/Sound/hit/kalush_-_stefanija_(z2.fm).mp3
+++ b/Звук/Sound/hit/kalush_-_stefanija_(z2.fm).mp3
--- a/Звук/Sound/img/1@3x.png
+++ b/Звук/Sound/img/1@3x.png