喇叭的两个作用你看到了吗？
本帖最后由 亚伦影音工作室 于 2025-2-22 17:31 编辑 <br /><br /><style>#dt{
position:relative;
width: 37px;
height: 36px;background:#0000;
bottom: -18px;border-radius: 0px;
left: 0%;filter:invert(70%)hue-rotate(170deg);
cursor: pointer;
}
#mutedbnt{
width: 37px;
height: 36px;background:#0000;
left: 0%;filter:invert(60%)hue-rotate(170deg);
cursor: pointer;
}
#volumeSlider{margin: -8px 38px;
position:relative;
width: 200px; height: 4px;border-radius: 20px;
}
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:#61ba00;
cursor: pointer;
bottom: 23px;border-radius: 20px;
left:5%;
}
#prog-bar {
height: 100%;
background: #FF0000;
width: 0%;border-radius: 20px;
}
</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 class="now"></div></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 + '%';
let p = (coordEnd - coordStart) / this.offsetWidth
});
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>
亚伦这个是很明显的l音量控制了 欣赏美曲，问候亚伦。 小辣椒 发表于 2025-2-19 10:19
亚伦这个是很明显的l音量控制了
终于把动态喇叭用在音控上了，有时间再用音画上！ 亚伦影音工作室 发表于 2025-2-19 11:06
终于把动态喇叭用在音控上了，有时间再用音画上！
白天手机上来瞄了一眼，效果好像不是现在这样的 动态喇叭加上去做帖里面更加漂亮了{:4_199:}
页:
[1]