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

代码语言：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;
     background-image: url("//repo.bfw.wiki/bfwrepo/image/600d6cfee7691.png");
     background-size: 104%;
     border: 2.25px solid hsl(229deg 24% 26% / 0%);
     background-repeat: repeat;
     box-shadow: rgb(16 26 64 / 0%) 0px 0px 1px, rgb(16 26 64 / 10%) -4px 0px 3px, rgb(16 26 64 / 10%) -12px 2px 6px, rgb(16 26 64 / 10%) -23px 4px 10px, rgb(16 26 64 / 10%) -39px 8px 15px, rgb(16 26 64 / 10%) -60px 12px 21px;
  
  box-shadow: 0px 1px 0px 0px rgb(255 255 255 / 50%) inset, 0px 3px 2px -1px rgb(13 13 13 / 65%), 0px 6px 6px 0px rgb(0 0 0 / 15%), 0px -4px 4px 0px rgb(0 0 0 / 15%) inset, 0px 2px 4px 2px rgb(255 255 255 / 55%) inset, 0px 0px 1px 2px rgb(0 0 0 / 10%), 0 0.0625em 0.1875em  rgb(0 0 0 / 500%);
     position: relative;
     opacity: 1;
}




.song-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}
.progress-bar {
  width: 200px;
  height: 5px;
  border-radius: 15px;
  background: var(--bg);
}
#progress {
  border-radius: 5px;
  width: 40%;
  height: 5px;
  background: var(--song1);
}
.controls {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 60%;
}
</style>



</head>

<body  >
  <div class="player-wrapper">
  <header>
    <p1>playlist</p1>
    <p>best vibes of the week</p>
  </header>
  <div class="album"></div>
.........完整代码请登录后点击上方下载按钮下载查看