原生js实现一个音乐播放器代码-html代码-BFW代码库

原生js实现一个音乐播放器代码

代码语言：html

所属分类：多媒体

代码描述：原生js实现一个音乐播放器代码，可实现多首曲目切换，背景与专辑照片同步切换。

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


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

<head>

  <meta charset="UTF-8">

  <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap');
:root {
  --cubic: .4s cubic-bezier(0.1, 0.7, 1.0, 0.1);
  
  --bg: #ddd;
  --player-bg: #eef5f9;
  --navy: #3d415b;
  --grey: #a0aebb;
  --icon: #99acb7;
  --lightgrey: #ced3e2;
  --bold-text: #4e5068;
  
  --song1: #d1a1d8;
}
body {
  padding:0;
  margin:0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url('//repo.bfw.wiki/bfwrepo/image/600d6cfee7691.png');
  font-family: 'Oxygen', sans-serif;
      

}
ion-icon {
  font-size: 2em;
  color: var(--icon);
  margin: 5px;
  transition: .4s;
  cursor: pointer;
}
#play {
  font-size: 2.5em;
  color: var(--navy);
}
h, p, p1 {
  transform: var(--cubic);
}
h {
  font-size: 1em;
  color: var(--bold-text);
  font-weight: 600;
  text-transform: capitalize;
}
p {
  color: var(--grey);
  font-size: 0.8em;
  font-weight: 600;
  text-transform: capitalize;
}
p1 {
  color: var(--lightgrey);
  font-size: 0.7em;
  text-transform: uppercase;
}
.player-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 500px;
  width: 300px;
  border-radius: 15px;
  background: var(--player-bg);
  z-index: 1;
  box-shadow: inset 1px 1px 2px rgb(0 0 0 / 27%), 1px 1px 1px rgb(255 255 255 / 71%);
}
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.album::before {
    position: absolute;
    z-index: -1 !important;
    transform: translate(-2px,0px) scaleY(1.0125);
    filter: brightness(0.94) blur(0.2px) saturate(0.9);
    content: "";
    width: calc(100% + 6px);
    height: calc(100% + 4px);
    margin: auto !important;
    background: inherit;
    opacity: 0.75;
    display: flex;
    border-radius: 7px;
}

.album::after {
     background: url(//repo.bfw.wiki/bfwrepo/image/61f74cb7b5e82.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_280,h_280,/quality,q_90);
     mix-blend-mode: screen;
     mix-blend-mode: difference;
     opacity: 0.1;
     content: "";
     position: absolute;
     display: flex;
     z-index: 
1 !important;
     background-size: cover;
     background-repeat: no-repeat;
     height: 240px;
     width: 240px;
     background-position: 50% 50%;
     transform: 
translate(-1px, 0px);
}

.album {
     height: 240px;
     width: 240px;
     border-radius: 5px;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
.........完整代码请登录后点击上方下载按钮下载查看