|
|
@@ -0,0 +1,153 @@
|
|
|
+function Control(el, { value = 0,
|
|
|
+ min = 0,
|
|
|
+ max = 100,
|
|
|
+ minAngle = 0,
|
|
|
+ maxAngle = 270,
|
|
|
+ width = 200,
|
|
|
+ wheelSpeed = 0.1,
|
|
|
+ step = 1 } = {}) {
|
|
|
+
|
|
|
+ const img = document.createElement('img')
|
|
|
+ img.src = '1@3x.png'
|
|
|
+ img.width = width
|
|
|
+ el.append(img)
|
|
|
+
|
|
|
+ const ratio = (maxAngle - minAngle) / (max - min)// сколько градусов 1 ед. велью
|
|
|
+ const getAngle = () => (value - min) * ratio + minAngle // текущий угол ползунка
|
|
|
+
|
|
|
+ this.setValue = newValue => { //проверить, вдруг в этом объекте есть onchange
|
|
|
+ if (newValue > max) newValue = max
|
|
|
+ if (newValue < min) newValue = min
|
|
|
+ if (typeof this.onchange === 'function') {
|
|
|
+ this.onchange(newValue)
|
|
|
+ }
|
|
|
+ value = newValue //и запустить его с новым value
|
|
|
+ img.style.transform = `rotate(${getAngle()}deg)`
|
|
|
+ }
|
|
|
+ this.getValue = () => value
|
|
|
+
|
|
|
+ img.onmousewheel = e => {
|
|
|
+ const { deltaY } = e
|
|
|
+ const newValue = value + deltaY * wheelSpeed
|
|
|
+ this.setValue(newValue)
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onclick = e => {
|
|
|
+ const { layerX } = e
|
|
|
+ const { width } = img
|
|
|
+ layerX > width / 2 ? this.setValue(value + step) : this.setValue(value - step)
|
|
|
+ }
|
|
|
+
|
|
|
+ const toDeg = rad => ((rad * 180) / Math.PI + 360 + 90) % 360
|
|
|
+ let prevMouseAngle = null
|
|
|
+
|
|
|
+ img.onmousedown = e => {
|
|
|
+ const y = e.layerY - img.height / 2
|
|
|
+ const x = e.layerX - img.width / 2
|
|
|
+ prevMouseAngle = toDeg(Math.atan2(y, x))
|
|
|
+ e.preventDefault()
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmousemove = e => {
|
|
|
+ if (prevMouseAngle === null) return
|
|
|
+ const y = e.layerY - img.height / 2
|
|
|
+ const x = e.layerX - img.width / 2
|
|
|
+ let currentAngle = toDeg(Math.atan2(y, x))
|
|
|
+ let moveAngleDiff = (currentAngle - prevMouseAngle)
|
|
|
+ this.setValue(value + moveAngleDiff / ratio)
|
|
|
+ prevMouseAngle = currentAngle
|
|
|
+ }
|
|
|
+
|
|
|
+ img.onmouseout = img.onmouseup = () => {
|
|
|
+ prevMouseAngle = null
|
|
|
+ }
|
|
|
+
|
|
|
+ this.setValue(value)
|
|
|
+}
|
|
|
+
|
|
|
+// const volumeControl = new Control(container1, { value: 13, min: 0, max: 100, minAngle: 0, maxAngle: 270, width: 150 })
|
|
|
+// volumeControl.onchange = value => console.log(value) //на каждый setValue
|
|
|
+// console.log(volumeControl.getValue())
|
|
|
+// setTimeout(() => volumeControl.setValue(80), 2000)
|
|
|
+//пришейте к нему тэг audio для громкости
|
|
|
+
|
|
|
+function setRGB() {
|
|
|
+ box.style.backgroundColor = `rgb(${red.getValue().toFixed(0)},${green.getValue().toFixed(0)},${blue.getValue().toFixed(0)})`
|
|
|
+ box.children[0].innerText = `color rgb:${red.getValue().toFixed(0)},${green.getValue().toFixed(0)},${blue.getValue().toFixed(0)}`
|
|
|
+}
|
|
|
+
|
|
|
+const red = new Control(containerRgb, { min: 0, max: 255, width: 100 })
|
|
|
+red.onchange = setRGB
|
|
|
+const green = new Control(containerRgb, { min: 0, max: 255, width: 100 })
|
|
|
+green.onchange = setRGB
|
|
|
+const blue = new Control(containerRgb, { min: 0, max: 255, width: 100 })
|
|
|
+blue.onchange = setRGB
|
|
|
+
|
|
|
+// громкость звука
|
|
|
+const volume = new Control(volMus, {
|
|
|
+ value: 1, min: 0, max: 1, width: 100, wheelSpeed: 0.001, step: 0.1
|
|
|
+})
|
|
|
+volume.onchange = controlAudio
|
|
|
+// скорость проигрывания
|
|
|
+const speedTrack = new Control(speedMus, {
|
|
|
+ value: 1, min: 0.5, max: 1.5, width: 100, wheelSpeed: 0.001, step: 0.1
|
|
|
+})
|
|
|
+speedTrack.onchange = controlAudio
|
|
|
+// прогресс трека
|
|
|
+const progressTrack = new Control(progressMus, {
|
|
|
+ value: 0, min: 0, max: 100, width: 100, wheelSpeed: 0.01, step: 1
|
|
|
+})
|
|
|
+
|
|
|
+// отрисовка изначальных данных в хтмл
|
|
|
+volMus.children[0].innerText = `${(volume.getValue() * 100).toFixed(0)}%`
|
|
|
+speedMus.children[0].innerText = `${(speedTrack.getValue() * 100).toFixed(0)}%`
|
|
|
+progressMus.children[0].innerText = `${progressTrack.getValue().toFixed(0)}%`
|
|
|
+
|
|
|
+// ф-я контейнер для контроллеров
|
|
|
+function controlAudio() {
|
|
|
+ track.volume = volume.getValue()
|
|
|
+ volMus.children[0].innerText = `${(volume.getValue() * 100).toFixed(0)}%`
|
|
|
+ track.playbackRate = speedTrack.getValue()
|
|
|
+ speedMus.children[0].innerText = `${(speedTrack.getValue() * 100).toFixed(0)}%`
|
|
|
+ track.currentTime = (track.duration / 100) * progressTrack.getValue()
|
|
|
+ progressMus.children[0].innerText = `${progressTrack.getValue().toFixed(0)}%`
|
|
|
+}
|
|
|
+
|
|
|
+btn.onclick = regulatorPlayTrack()
|
|
|
+
|
|
|
+function regulatorPlayTrack() {
|
|
|
+ let chek = false//чек для плей и стоп
|
|
|
+ let stopAnim;
|
|
|
+ let stopGlyuk;
|
|
|
+ return function () {
|
|
|
+ // функция для визуального ефекта прогресса проигрывания
|
|
|
+ let reDraw = function () {
|
|
|
+ progressTrack.setValue((track.currentTime * 100) / track.duration)
|
|
|
+ progressMus.children[0].innerText = `${progressTrack.getValue().toFixed(0)}%`
|
|
|
+ console.log(3);
|
|
|
+ }
|
|
|
+ // рандом боди при проигрывание
|
|
|
+ let glyuk = function () {
|
|
|
+ body.style.backgroundColor = `rgb(${Math.round(Math.random() * 255).toFixed(0)},${Math.round(Math.random() * 255).toFixed(0)},${Math.round(Math.random() * 255).toFixed(0)})`
|
|
|
+ }
|
|
|
+ // добавляем клас для замены отрисовки кнопки
|
|
|
+ btn.classList.toggle("active");
|
|
|
+ if (!chek) {
|
|
|
+ track.play()
|
|
|
+ progressTrack.onchange = ''
|
|
|
+ chek = true
|
|
|
+ stopAnim = setInterval(reDraw, 100);
|
|
|
+ stopGlyuk = setInterval(glyuk, 300);
|
|
|
+ } else {
|
|
|
+ track.pause()
|
|
|
+ progressTrack.onchange = controlAudio
|
|
|
+ chek = false
|
|
|
+ clearInterval(stopAnim)
|
|
|
+ clearInterval(stopGlyuk)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
