原生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-wrappe.........完整代码请登录后点击上方下载按钮下载查看