vue实现炫酷音乐播放器代码
代码语言:html
所属分类:多媒体
代码描述:vue实现炫酷音乐播放器代码,包含列表、上一首下一首切换、播放暂停,进度条显示,音乐封面。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/material-design-iconic-font.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700"); @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700"); * { box-sizing: border-box; } body { margin: 0; padding: 0; display: grid; place-items: center; min-block-size: 100vh; } .animated { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .audioPlayer { position: relative; width: 317px; height: 574px; overflow: hidden; padding: 1.5rem; margin: 0 auto; background-color: #eef3f7; box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32); border-radius: 10px; } .audioPlayer .nav-icon { width: 15px; height: 12px; position: absolute; top: 1.125rem; left: 1.5rem; transform: rotate(0deg); transition: 0.25s ease-in-out; cursor: pointer; } .audioPlayer .nav-icon span { display: block; position: absolute; height: 2px; width: 100%; background: rgba(0, 0, 0, 0.75); border-radius: 6px; opacity: 1; left: 0; transform: rotate(0deg); transition: 0.5s ease-in-out; } .audioPlayer .nav-icon span:nth-child(1) { top: 0px; } .audioPlayer .nav-icon span:nth-child(2) { top: 5px; } .audioPlayer .nav-icon span:nth-child(3) { top: 10px; } .audioPlayer .nav-icon.isActive span:nth-child(1) { top: 5px; transform: rotate(135deg); } .audioPlayer .nav-icon.isActive span:nth-child(2) { opacity: 0; left: -60px; } .audioPlayer .nav-icon.isActive span:nth-child(3) { top: 5px; transform: rotate(-135deg); } .audioPlayer .audioPlayerList { color: rgba(0, 0, 0, 0.75); width: 17rem; transition: 0.5s; transform: translateX(-200%); position: absolute; margin-top: 1.5rem; overflow: auto; z-index: 10; will-change: transform; } .audioPlayer .audioPlayerList.isActive { transform: translateX(0); } .audioPlayer .audioPlayerList .item { margin-bottom: 1.5rem; border-left: 0.1rem solid transparent; transition: 0.2s; } .audioPlayer .audioPlayerList .item:hover { padding-left: 0.5rem; cursor: pointer; } .audioPlayer .audioPlayerList .item:hover .title, .audioPlayer .audioPlayerList .item:hover .artist { color: #cc0067; } .audioPlayer .audioPlayerList .item .title { color: black; font-size: 1rem; margin-bottom: 0.75rem; transition: 0.2s all; } .audioPlayer .audioPlayerList .item .artist { color: rgba(0, 0, 0, 0.5); font-size: 0.8rem; transition: 0.2s all; } .audioPlayer .audioPlayerList .item.isActive { border-left-color: #cc0067; padding-left: 1rem; color: darkorange; } .audioPlayer .audioPlayerList .debugToggle { cursor: pointer; color: red; } .audioPlayer .audioPlayerUI { margin-top: 1.5rem; will-change: transform, filter; transition: 0.5s; } .audioPlayer .audioPlayerUI.isDisabled { transform: scale(0.75) translateX(100%); filter: blur(5px) grayscale(100%); } .audioPlayer .audioPlayerUI .albumDetails { text-align: center; margin: 2rem 0; } .audioPlayer .audioPlayerUI .albumDetails p { margin: 0px; } .audioPlayer .audioPlayerUI .albumDetails p.title { font-size: 1rem; color: black; } .audioPlayer .audioPlayerUI .albumDetails p.artist { margin-top: 0.5rem; font-size: 0.75rem; font-weight: none; color: rgba(0, 0, 0, 0.75); transition-delay: 100ms; } .audioPlayer .audioPlayerUI .albumImage { width: 17rem; height: 17rem; overflow: hidden; margin: 0 auto; } .audioPlayer .audioPlayerUI .albumImage img { width: 98.5%; height: 100%; z-index: 10; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; border-radius: 10px; user-select: none; pointer-events: none; } .audioPlayer .audioPlayerUI .playerButtons { position: relative; margin: 0 auto; text-align: center; } .audioPlayer .audioPlayerUI .playerButtons .button { font-size: 2rem; display: inline-block; vertical-align: middle; padding: 0.5rem; margin: 0 0.25rem; color: #a3b3ce; border-radius: 50%; outline: 0; text-decoration: none; cursor: pointer; transition: 0.2s all; } .audioPlayer .audioPlayerUI .playerButtons .button.play { font-size: 4rem; margin: 0 1.5rem; } .audioPlayer .audioPlayerUI .playerButtons .button:hover { color: #cc0067; } .audioPlayer .audioPlayerUI .playerButtons .button:active { opacity: 0.75; transform: scale(1.1); } .audioPlayer .audioPlayerUI .playerButtons .button.isDisabled { color: #d0d8e6; cursor: initial; } .audioPlayer .audioPlayerUI .playerButtons .button.isDisabled:active { transform: none; } .audioPlayer .audioPlayerUI .currentTimeContainer { width: 100%; height: 1rem; display: flex; justify-content: space-between; } .audioPlayer .audioPlayerUI .currentTimeContainer .currentTime, .audioPlayer .audioPlayerUI .currentTimeContainer .totalTime { font-size: 0.5rem; font-family: monospace; color: rgba(0, 0, 0, 0.75); } .audioPlayer .audioPlayerUI .currentProgressBar { width: 100%; background-color: #d0d8e6; margin: 0.75rem 0; border-radius: 4px; } .audioPlayer .audioPlayerUI .currentProgressBar .currentProgress { background-color: #cc0067; width: 0px; height: 5px; transition: 100ms; border-radius: 4px; } .loader { margin: 60px auto; font-size: 10px; position: relative; text-indent: -9999em; } /* data change transitions */ .slide-fade-enter-active { transition: all 0.3s ease; } .slide-fade-leave-active { transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter, .slide-fade-leave-to { transform: translateY(10px); opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } /* pen specific formatting */ body { background-color: #dfe7ef; background-size: cover; background-attachment: fixed; color: rgba(255, 255, 255, 0.7); font-family: Raleway, sans-serif; padding: 3rem; z-index: 100; } .heading { text-align: center; margin: 0; margin: 2rem 0; font-family: Inconsolata, monospace; } .heading h1 { color: #ECEFF1; margin: 0; margin-bottom: 1rem; font-size: 1.75rem; } .heading p { margin: 0; font-size: 0.85rem; } .heading a { color: rgba(255, 255, 255, 0.8); transition: 0.3s; -webkit-text-decoration-style: dotted; text-decoration-style: dotted; } .heading a:hover { color: white !important; } .heading a:visited { color: rgba(255, 255, 255, 0.5); } </style> </head> <body> <main class="audioPlayer" id="app"> <a class="nav-icon" v-on:click="isPlaylistActive=!isPlaylistActive" :class="{'isActive': isPlaylistActive}" title="Music List"> <span></span> <span></span> <span></span> </a> <div class="audioPlayerList" :class="{'isActive': isPlaylistActive}"> <div class="item" v-for="(item,index) in musicPlaylist" v-bind:class="{ 'isActive':isCurrentSong(index) }" v-on:click="changeSong(index),isPlaylistActive=!isPlaylistActive"> <p class="title">{{ item.title }}</p> <p class="artist">{{ item.artist }}</p> </div> </div> <div class="audioPlayerUI" :class="{'isDisabled': isPlaylistActive}"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0