亚伦影音工作室 发表于 2025-2-19 11:30

音量条直立不知道合理吗？

本帖最后由 亚伦影音工作室 于 2025-2-20 20:20 编辑 <br /><br /><style>
#dt{
      position:relative;
      width: 37px;
      height: 36px;background:#0000;
      bottom: -86px;border-radius: 0px;
   left: 10%;filter:invert(60%)hue-rotate(170deg);
      cursor: pointer;
    }
#mutedbnt{
   
      width: 37px;   
      height: 36px;background:#0000;
      
   left: 0%;filter:invert(60%)hue-rotate(170deg);
      cursor: pointer;
    }

#volumeSlider{margin: 0px 38px;
             position:relative;transform:rotate(-90deg);
         width: 100px; height: 4px;border-radius: 20px;
opacity:0.1;
}
#volumeSlider:hover {opacity:1; }

input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #61bd12;
}
::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}

::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f44336;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 4 10 4 0 / 0px 0px 0 2000px;
}


#loopbnt{
      position:relative;
      width: 30px;
      height: 25px;background:#0000;
      bottom: 15px;border-radius: 0px;
   left: 32%;filter:invert(0%)hue-rotate(180deg);
      cursor: pointer;
    }
#bnt{left: -10px;bottom: 0px;top:40px;position:relative; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer;cursor: pointer; }
#bnt:hover { mask: unset; }
#pic{position:absolute;top:25px; left:28px;background:#000;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px}
#tmsg {position:relative;
      font: normal 12px sans-serif;
      color: #000;
         bottom: 14px;
      left:670px;}
#prog {position:relative;
      width: 82%;
      height: 4px;background:#000;
      cursor: pointer;
         bottom: 23px;border-radius: 20px;
left:5%;}
#prog-bar {border-radius: 20px;
            height: 100%;
            background: #FF0000;
            width: 0%;
      }
            
</style>

<audio id="aud"   autoplay src="https://img4.oldkids.cn/upload/2025/01/25/blog_260855907_20250125143403551.mp3" ></audio>
    <br>
    <br>
<div id="bnt">
<div id="pic"></div>
<div id="picc"></div>
</div>
<br><div id="tmsg"></div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="dt">
<img src="https://pic1.imgdb.cn/item/67b414afd0e0a243d4006964.png"id="mutedbnt" onClick="pc()"/>
</div>
<inputtype="range" min="0.1" max="1" step="0.1" value="0.8" id="volumeSlider" >
<br>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
   
<br>
    <script>
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
      function pc() {
var img = document.getElementById("mutedbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b414afd0e0a243d4006964.png") {aud.muted= true;
img.src = "https://pic1.imgdb.cn/item/67b41c9bd0e0a243d4006b23.png"; volumeSlider.value=0;
} else {aud.muted= false;volumeSlider.value=0.8;
img.src = "https://pic1.imgdb.cn/item/67b414afd0e0a243d4006964.png";}
}
function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
/*进度条 进度时间*/
prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
aud.addEventListener('timeupdate', () => {
          varpercent= (aud.currentTime / aud.duration) * 100;
            progBar.style.width = percent + '%';
      });

aud.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});


let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
/*结束*/

bnt.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',image.play()) : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',image.stop() );
   
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 洢canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            //
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      //
      var width = this.width, height = this.height;
      if (width && height) {
            // 洢
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvasС
            canvas.width = width;
            canvas.height = height;
            //
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            //
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                //
                this.removeAttribute('src');
                // canvas
                canvas.style.position = 'absolute';
                //
                this.parentElement.insertBefore(canvas, this);
                //
                this.style.opacity = '0';
                // 洢canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image= document.getElementById("mutedbnt");
</script>

红影 发表于 2025-2-19 13:10

竖放挺好的，在贴子里要调个另外的地方，就更好了{:4_187:}

杨帆 发表于 2025-2-19 14:47

音量条横放、竖放与其使用背景及审美有关

不存在合理不合理，考虑其便捷性与灵敏度即可

谢谢亚伦老师精彩分享{:4_191:}

梦油 发表于 2025-2-19 16:48

欣赏精彩，问候亚伦。

小辣椒 发表于 2025-2-21 23:37

音画玩还是横的漂亮，图大，
页: [1]
查看完整版本: 音量条直立不知道合理吗？