js实现可拖拽快进快退老式碟片音乐播放器效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：js实现可拖拽快进快退老式碟片音乐播放器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
:root {
	--color-theme:rgb(2,176,236);
	--color-record-center:#fff;
	--color-record-inner:#131313;
	--color-record-groove:#000;
	--color-record-outer:#000;
	--spacing-groove:10%;
	--font-family:"Poppins",cursive;
	--turntable-height:clamp(300px,90vmin,500px);
	--disc-dimension:calc(var(--turntable-height) * .9)
}
html {
	box-sizing:border-box
}
*,*:before,*:after {
	box-sizing:inherit
}
html,body {
	margin:0;
	padding:0
}
body {
	width:100%;
	height:100vh;
	overflow:hidden;
	overscroll-behavior:contain
}
.layout {
	width:100vw;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center
}
.turntable {
	height:var(--turntable-height);
	display:inline-flex;
	gap:1rem;
	padding:calc(var(--turntable-height) * .05);
	background:rgb(233,233,233);
	border-radius:3px;
	box-shadow:12px 14px 18px 2px #a6a1a17f
}
.disc-container {
	aspect-ratio:1;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	border:2px solid #000;
	background:linear-gradient(45deg,rgb(255,255,255),rgb(66,66,66))
}
.disc {
	position:relative;
	aspect-ratio:1;
	width:91%;
	overflow:hidden;
	border-radius:50%;
	background:repeating-radial-gradient(var(--color-record-inner),var(--color-record-groove) 2px,var(--color-record-groove) 2px,var(--color-record-inner) 4px);
	cursor:grab
}
.disc.is-scratching {
	cursor:grabbing
}
.disc__que {
	--dim:10px;
	position:absolute;
	top:50%;
	right:30px;
	width:var(--dim);
	height:var(--dim);
	background:var(--color-theme);
	border-radius:50%
}
.disc__label {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
	width:calc(var(--disc-dimension) * .4);
	height:calc(var(--disc-dimension) * .4);
	background:no-repeat url(//repo.bfw.wiki/bfwrepo/icon/617245a85118d.png) center center;
	background-size:cover;
	border-radius:50%;
	pointer-events:none
}
.disc__middle {
	--dim:10px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:var(--dim);
	height:var(--dim);
	background:rgb(26,26,26);
	border-radius:50%
}
.disc__glare {
	width:var(--disc-dimension);
	height:15%;
	position:absolute;
	top:50%;
	transform:translateY(-50%) rotate(-30deg);
	background:rgba(255,255,255,.15);
	filter:blur(10px);
	pointer-events:none
}
.sidebar {
	display:flex;
	height:100%
}
.controls {
	height:100%;
	display:flex;
	align-items:flex-end
}
.controls__row {
	justify-content:center;
	gap:10px
}
.control {
	font-family:var(--font-family);
	text-transform:uppercase
}
.rewind {
	display:none
}
.button {
	border-radius:0;
	border:none;
	background:rgb(69,69,69);
	font-size:10px;
	padding:.4rem;
	color:#fff;
	line-height:1.3;
	cursor:pointer;
	box-shadow:1px 1px 0 1px #000,0 0 0 0 var(--color-theme);
	will-change:box-shadow;
	transition:box-shadow .2s ease-out,transform .05s ease-in
}
.button.is-active {
	transform:translate(1px,2px);
	box-shadow:0 0 5px 1px var(--color-theme)
}

</style>



</head>

<body >
  <div class="layout">
      <div class="turntable">
        <div class="disc-container">
          <div class="disc" id="disc">
            <div class="disc__que"></div>
            <div class="disc__label"></div>
            <div class="disc__middle"></div>
          </div>
          <div class="disc__glare"></div>
        </div>

        <div class="sidebar">
          <div class="controls">
            <div class="controls__row">
              <button class="control button" id="playToggle">Power</button>
              <button class="control button rewind" id="rewind">
                &lt;&lt;
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

      <script >
(function() {
    const e = document.createElement("link").relList;
    if (e && e.supports && e.supports("modulepreload")) return;
    for (const n of document.querySelectorAll('link[rel="modulepreload"]')) s(n);
    new MutationObserver(n => {
        for (const o of n)
            if (o.type === "childList")
                for (const a of o.addedNodes) a.tagName === "LINK" && a.rel === "modulepreload" && s(a);
    }).observe(document, {
        childList: !0,
        subtree: !0
    });

    function t(n) {
        const o = {};
        return n.integrity && (o.integri.........完整代码请登录后点击上方下载按钮下载查看