js+css实现拖动音乐盘改变播放进度的音乐播放器效果代码
代码语言:html
所属分类:多媒体
代码描述:js+css实现拖动音乐盘改变播放进度的音乐播放器效果代码
代码标签: js css 拖动 光盘 改变 播放 进度 音乐 播放器
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Gentium+Basic:700|Gentium+Book+Basic:700|PT+Serif:700|Fira+Sans|Roboto&display=swap" rel="stylesheet"> <style> html { box-sizing: border-box; } html *, html *::before, html *::after { box-sizing: inherit; } body { background-color: #f0f0f0; color: #2d2d2d; margin: 0; font-family: 'Fira Sans', sans-serif; font-family: 'Roboto', sans-serif; -webkit-tap-highlight-color: transparent; overflow: hidden; } button { background: none; border: none; outline: none; font: inherit; -webkit-appearance: none; cursor: pointer; } .svg-icon { width: 2em; height: 2em; fill: currentColor; } .app { --app-gap: 3rem; height: 100vh; padding: 0 2rem; display: flex; flex-direction: column; align-items: center; gap: var(--app-gap); overflow-x: hidden; } @media (max-width: 600px) { .app { font-size: 12px; } } .disk-container { perspective: 600px; } #song { display: none; } .disk { display: flex; align-items: center; justify-content: center; width: 18em; height: 18em; background-image: url("//repo.bfw.wiki/bfwrepo/icon/6286c7ad45af2.png"); background-size: contain; border-radius: 50%; cursor: pointer; /* pointer-events: none; */ box-shadow: 0px 0px 30px 5px #5f5f5f5e; transform: rotateX(60deg); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .disk.focus { /* transform: scale(1.1) rotateX(30deg); */ } .innerdisk { width: 100px; height: 100px; border-radius: 50%; background-color: #fff; background-image: url("//repo.bfw.wiki/bfwrepo/icon/6286c7c06413b.jpg"); background-size: contain; } .disk.active { pointer-events: auto; } .timechange { margin-bottom: calc(-1 * var(--app-gap)); text-align: center; transform: translateY(-100px) scale(2); opacity: 0; transition: all 0.4s 0.1s ease-in; } .timechange.active { transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: none; opacity: 1; } .song-info { } .singer { text-align: center; margin: 0 auto; text-transform: capitalize; font-size: 1.3em; font-weight: normal; } .title { flex: 1; --offset: 0; position: relative; display: table; margin: 0.2em auto; text-transform: capitalize; font-size: 4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: 'PT Serif', serif; font-family: 'Gentium Basic', serif; font-family: 'Gentium Book Basic', serif; } .title::after { content: ' '; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-border-start: 2px solid currentColor; border-inline-start: 2px solid currentColor; background-color: hsla(0, 0%, 93%, 0.8); transform: translateX(calc(var(--offset)*1px)); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .times { display: flex; justify-content: space-between; width: 100%; } .currenttime { } .duration { color: hsl(0, 0%, 78%); } .music-ctrl { display: flex; align-items: center; justify-content: center; filter: drop-shadow(0px 0px 20px hsla(0, 0%, 50%, 0.3)) } .music-ctrl button { display: flex; align-items: center; justify-content: center; } .music-ctrl__play { width: 5.4em; height: 5.4em; margin: 0 -1em; border-radius: 50%; background-color: #cfc5ac; color: #fff; position: relative; z-index: 1; } .music-ctrl__play .svg-icon { position: absolute; font-size: 1.5em; transition: .3s opacity; } .music-ctrl__play .svg-icon:last-child { opacity: 0; } .playing .svg-icon:first-child { opacity: 0; } .playing .svg-icon:last-child { opacity: 1; } .music-ctrl__prev, .music-ctrl__next { background-color: #f5f5f3; color: #cfc5ac; height: 3em; } .music-ctrl__prev { border-radius: 2em 0 0 2em; padding: 0 2.8em 0 1.5em; } .music-ctrl__next { border-radius: 0 2em 2em 0; padding: 0 1.5em 0 2.8em; } </style> </head> <body > <div class="app"> <audio id="song" controls hidden> <source src="//repo.bfw.wiki/bfwrepo/sound/5c89fd22dea6948307.mp3" type='audio/mpeg; codecs="mp3"'> </audio> <h2 class="timechange">0</h2> <div class="disk-container"> <div class="disk"> <div class="innerdisk"></div> </div> </div> <div class="song-info"> <h2 class="singer">David Bowie</h2> <h1 class="title">Dollar Days</h1> <div class="times"> <span class="currenttime">00:00</span> <span class="duration"></span> </div> </div> <div class="music-ctrl"> <button class="music-ctrl__prev"> <svg class="svg-icon" viewBox="0 0 20 20"> <path xmlns="http://www.w3.org/2000/svg" d="M14.959 4.571L7.756 9.52s-.279.201-.279.481.279.479.279.479l7.203 4.951c.572.38 1.041.099 1.041-.626V5.196c0-.727-.469-1.008-1.041-.625zM6 4H5c-.553 0-1 .048-1 .6v10.8c0 .552.447.6 1 .6h1c.553 0 1-.048 1-.6V4.6c0-.552-.447-.6-1-.6z"/> </svg> </button> <button class="music-ctrl__play"> <svg class="svg-icon" viewBox="0 0 20 20"> <path d="M15 10.001c0 .299-.305.514-.305.514l-8.561 5.303C5.51 16.227 5 15.924 5 15.149V4.852c0-.777.51-1.078 1.135-.67l8.561 5.305c-.001 0 .304.215.304.514z"/> </svg> <svg class="svg-icon" viewBox="0 0 20 20"> <path xmlns="http://www.w3.org/2000/svg" d="M15 3h-2c-.553 0-1 .048-1 .6v12.8c0 .552.447.6 1 .6h2c.553 0 1-.048 1-.6V3.6c0-.552-.447-.6-1-.6zM7 3H5c-.553 0-1 .048-1 .6v12.8c0 .552.447.6 1 .6h2c.553 0 1-.048 1-.6V3.6c0-.552-.447-.6-1-.6z"/> </svg> </button> <button class="music-ctrl__next"> <svg class="svg-icon" viewBox="0 0 20 20"> <path xmlns="http://www.w3.org/2000/svg" d="M12.244 9.52L5.041 4.571C4.469 4.188 4 4.469 4 5.196v9.609c0 .725.469 1.006 1.041.625l7.203-4.951s.279-.199.279-.478c0-.28-.279-.481-.279-.481zM14 4h1c.553 0 1 .048 1 .6v10.8c0 .552-.447.6-1 .6h-1c-.553 0-1-.048-1-.6V4.6c0-.552.447-.6 1-.6z"/> </svg> </button> </div> </div> <script> /* author: Mojtaba Seyedi author URI: http://mojtabaseyedi.com */ (function () { var SwipeContent = function (element) { this.element = element; this.delta = [false, false]; this.dragging = false; this.intervalId = false; initSwipeContent(this); }; function initSwipeContent(content) { content.element.addEventListener('mousedown', handleEvent.bind(content)); content.element.addEventListener('touchstart', handleEvent.bind(content)); }; function initDragging(content) { //add event listeners content.element.addEventListener('mousemove', handleEvent.bind(content)); content.element.addEventListener('touchmove', handleEvent.bind(content)); content.element.addEventListener('mouseup', handleEvent.bind(content)); content.element.addEventListener('mouseleave', handleEvent.bind(content)); content.element.addEventListener('touchend', handleEvent.bind(content)); }; function cancelDragging(content) { //remove event listeners if (content.intervalId).........完整代码请登录后点击上方下载按钮下载查看
网友评论0