three+gsap实现三维立方体及波形频谱声音播放器代码
代码语言:html
所属分类:多媒体
代码描述:three+gsap实现三维立方体及波形频谱声音播放器代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet"> <style> html, body { margin: 0; padding: 0; overflow: hidden; height: 100vh; width: 100vw; background:linear-gradient(to top, #5ee7df 0%, #b490ca 100%); position: relative; } button { font-family: "maghfirearegular"; font-size: 3rem; background: transparent; border: none; color: white; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; cursor: pointer; opacity: 0; } #canvas { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; } #audio { display: none; } input { visibility: hidden; background-color: transparent; position: fixed; bottom: 1rem; width: 90vw; left: 5vw; } input[type="range"] { height: 24px; -webkit-appearance: none; margin: 10px 0; } input[type="range"]:focus { outline: none; } input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000; background: #ffffff5e; border-radius: 1px; border: 0px solid #000000; } input[type="range"]::-webkit-slider-thumb { box-shadow: 0px 0px 0px #000000; border: 0px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -6.5px; } input[type="range"]:focus::-webkit-slider-runnable-track { background: #ffffff5e; } input[type="range"]::-moz-range-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000; background: #ffffff5e; border-radius: 1px; border: 0px solid #000000; } input[type="range"]::-moz-range-thumb { box-shadow: 0px 0px 0px #000000; border: 0px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #ffffff; cursor: pointer; } input[type="range"]::-ms-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; } input[type="range"]::-ms-fill-lower { background: #ffffff5e; border: 0px solid #000000; border-radius: 2px; box-shadow: 0px 0px 0px #000000; } input[type="range"]::-ms-fill-upper { background: #ffffff5e; border: 0px solid #000000; border-radius: 2px; box-shadow: 0px 0px 0px #000000; } input[type="range"]::-ms-thumb { margin-top: 1px; box-shadow: 0px 0px 0px #000000; border: 0px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #ffffff; cursor: pointer; } input[type="range"]:focus::-ms-fill-lower { background: #ffffff5e; } input[type="range"]:focus::-ms-fill-upper { background: #ffffff5e; } </style> </head> <body > <button id='go'>play audio</button> <audio id="audio" crossorigin="anonymous" controls src="//repo.bfw.wiki/bfwrepo/sound/5e148aa3821f2.mp3"></audio> <input type="range" id="seek" max="370.44" value="0"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/SplitText3.js"></script> <script > const noize = new SimplexNoise(); const go = document.querySelector("#go"); const audio = document.querySelector("#audio"); audio.crossOrigin = "anonymous"; const seekSlider = document.getElementById("seek"); const xVal = -1 * window.innerWidth; const fftSize = 4096; const mapper = gsap.utils.mapRange( 0, fftSize / 4, (window.innerWidth / 2) * -1, window.innerWidth / 2 ); go.disabled = true; audio.load(); audio.addEventListener("canplaythrough", () => { go.disabled = false; }); gsap.registerPlugin(SplitText); let mySplitText = new SplitText("#go", { type: "chars" }); let chars = mySplitText.chars; gsap.set(go, { autoAlpha: 1 }); gsap.from(chars, { duration: 0.8, opacity: 0, y: -40, ease: "sine.out", stagger: 0.08, delay: 0.2 }); // audio variables initialised in click handler for play button var context, s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0