wavesurfer实现一个精致带声纹声波频谱图的音乐播放器代码-html代码-BFW代码库

代码语言：html
所属分类：多媒体
代码描述：wavesurfer实现一个精致带声纹声波频谱图的音乐播放器代码，支持音乐列表、音频进度拖拽、标题显示、封面显示等功能。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *, *::after, *::before {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    :root {
      --fontPrimary: 'El Messiri', sans-serif;
      --fontSecondary: 'STIX Two Text', serif;;
      --cTPrimary: #F7F8FC;
      --cTPrimary-dark: #E1E5F4;
      --cTSecondary: rgba(98,74,255,1);
      --cPrimary: #161616;
      --cPrimary-light: #151515;
      --cSecondary: linear-gradient(90deg, rgba(98,74,255,1) 0%, rgba(193,46,251,1) 100%);
      --shadow: rgb(38, 57, 77) 0px 20px 30px -13px, inset 10px 10px 30px -15px rgba(0,0,0,0.13);
      --shadowP: rgb(38, 57, 77) 0px 20px 30px -13px;
      --shadowS: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      --fontBig: 1.6rem;
      --fontMedium : 1.3rem;
      --fontSmall: 1rem;
      --fontMini: .7rem;
      --paddingMini: 5px;
      --paddingSmall: 10px;
      --paddingMedium: 20px;
      --paddingBig: 30px;
    }
    
    
    body {
      position: relative;
      background: url('//repo.bfw.wiki/bfwrepo/image/6430c7d5ddf77.png') no-repeat center center;
      background-size: cover;
      text-transform: capitalize;
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden;
      display: grid;
      align-items: center;
      justify-content: center;
      height: 100vh;
      color: var(--cPrimary);
      scroll-behavior: smooth;
    
    }
    
    /* public styles */
    .sbtn {
        position: relative;
        background-color: var(--cTPrimary);
        width: 64px;
        height: 64px;
        padding: var(--paddingMini);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;
        box-shadow:var(--shadow);
        transition: background-color 0.3s ease-in-out, transform .3s ease-in-out;
        overflow: hidden;
    }
    
    .sbtn::before {
        content: '';
        background-image: var(--cSecondary);
        border-radius: 20%;
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-100%, 0) rotate(10deg);
        transform-origin: top left;
        transition: 0.2s transform ease-out;
        will-change: transform;
        z-index: -1;
    }
    
    .sbtn:hover::before {
        transform: translate(0, 0);
    }
    
    .sbtn:hover {
      border: 3px solid transparent;
      transform: scale(1.1);
      will-change: transform;
    }
    
    .sbtn:hover svg{
      fill: var(--cTPrimary);
    }
    
    .text-gradient {
        background-color: rgb(193,46,251);
        background-image: var(--cSecondary);
        background-size: 100%;
        background-repeat: repeat;
        /* chrome - IE */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; 
        /* firefox */
        -moz-background-clip: text;
        -moz-text-fill-color: transparent;
    }
    
    .opacity50 {
        opacity: .5;
    }
    
    .nodisplay {
        display: none;
    }
    
    /* private styles */
    .glass-container {
        width: 500px;
        height: 800px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        border: 1px solid var(--cTPrimary);
        box-shadow:var(--shadow);
        background-color: rgba(255, 255, 255, .15);
        backdrop-filter: blur(5px);
    }
    
    .MP3container {
        position: relative;
        width: 90%;
        height: 95%;
        border-radius: 50px;
        background-color: var(--cTPrimary);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        padding: var(--paddingSmall);
        overflow: hidden;
    }
    
    .MP3container .header-wrapper {
        width: 100%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    
    .MP3container .header-wrapper .sbtn{
        transform: scale(.8);
    }
    
    .MP3container .songState {
        padding: var(--paddingMedium);
        background-color: var(--cPrimary);
        color: var(--cTPrimary);
        border-radius: 20px;
        width: 33.3333%;
        height: 70%;
        text-align: center;
        display: grid;
        align-content: center;
        font-size: var(--fontMini);
        box-shadow: var(--shadowS);
    }
    
    .MP3container .img-container {
        position: relative;
        border-radius: 50%;
        width: 230px;
        height: 230px;
        background-color: var(--cTPrimary-dark);
        margin: 0px 0;
        box-shadow:var(--shadow);
        transition: all 0.3s ease-in-out;
    }
    
    .MP3container .img-container img{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transition: all 0.3s ease-in-out;
    }
    
    .MP3container .song-info {
        width: 75%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        margin: 50px 0 0 0;
    }
    
    .MP3container .song-info .title {
        width: 100%;
        font-weight: bold;
        font-size: var(--fontMedium);
        padding-bottom: var(--paddingSmall);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .MP3container .song-info .author {
        width: 90%;
        font-weight: 300;
        opacity: .5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .MP3container .range-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        margin: 50px 0;
        min-height: 50px;
    }
    
    .MP3container .range-wrapper input{
        width: 70%;
        height: 75px;
        -webkit-appearance: none;  /* Override default CSS styles */
        appearance: none;
        background: var(--cPrimary); /* Grey background */
        outline: none; /* Remove outline */
        -webkit-transition: .2s; /* 0.2 seconds transition on hover */
        transition: all .2s;
        border-radius: 50px;
        cursor: pointer; /* Cursor on hover */
    }
    
    .MP3container .range-wrapper input::-webkit-slider-thumb{
        -webkit-appearance: none; /* Override default look */
        appearance: none;
        width: 0px; /* Set a specific slider handle width */
        height: 0px; /* Slider handle height */
        background: var(--cTSecondary); /* Green background */
        cursor: pointer; /* Cursor on hover */
    }
    
    .MP3container .range-wrapper input::-moz-range-thumb{
        width: 3px; /* Set a specific slider handle width */
        height: 10px; /* Slider handle height */
        background: var(--cTSecondary); /* Green background */
        cursor: pointer; /* Cursor on hover */
    }
    
    .MP3container .range-wrapper #waveform {
        width: 70%;
        cursor: pointer;
    }
    
    .MP3container .range-wrapper span{
        font-weight: bold;
    }
    
    
    .MP3container .controller {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 80%;
        margin-bottom: 20px;
    }
    
    .MP3container .controller .sbtn{
        border-radius: 50%;
        transform: scale(1);
    }
    
    .MP3container .controller .mbtn{
        border-radius: 50%;
        background-image: var(--cSecondary);
        transform: scale(1.2);
    }
    
    .MP3container .controller .sbtn:nth-child(2):before {
        transform: scale(0);
        display: none;
    }  
    
    .MP3container .controller .sbtn:nth-child(2):hover {
        transform: scale(1.3);
        border: none;
    }  
    
    .MP3container .controller .mbtn svg{
        fill: var(--cTPrimary);
        transition: transform 0.3s ease-in-out;
    }
    
    .controller .mbtn #pauseSVG{
        display: none;
    }
    
    .MP3container .footer-wrapper {
        background-color: var(--cPrimary);
        width: 90%;
        height: 10%;
        border-radius: 25px;
        margin: 5px 0;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        color: var(--cTPrimary);
    }
    
    .MP3container .footer-wrapper div {
        cursor: pointer;
    }
    
    .MP3container .footer-wrapper div svg {
        fill: var(--cTPrimary);
    }
    
    .MP3container .footer-wrapper div #heart-full {
        display: none;
    }
    
    .MP3container .footer-wrapper div {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: var(--paddingSmall);
        transition: transform 0.3s ease-in-out, background-image .3s ease-in-out;
    }
    
    .MP3container .footer-wrapper div:hover {
        transform: scale(1.1);
        background-image: var(--cSecondary);
        animation: scaleUP .3s ease-in-out alternate;
    }
    
    .MP3container .side-menu {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
        width: 0%;
        height: 73%;
        background-color: var(--cPrimary);
        z-index: 5;
        border-radius: 0 30px 30px 0;
        transition: width .3s ease-in-out;
        box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    }
    
    .MP3container .side-menu-opener {
        font-size: var(--fontMini);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: -75px;
        transform: translate(0, -50%) rotate(90deg);
        width: 110px;
        height: 40px;
        background-color: var(--cPrimary);
        color: var(--cTPrimary);
        border-radius: 30px 30px 0 0;
        cursor: pointer;
    }
    
    .MP3container .right-side-menu {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        background-image: var(--cSecondary);
        width: 0%;
        height: 70%;
        border-radius: 30px 0 0 30px;
        transition: width .3s ease-in-out;
        z-index: 5;
        box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    }
    
    .MP3container .right-side-opener {
        font-size: var(--fontMini);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: -75px;
        transform: translate(0, -50%) rotate(90deg) scale(-1);
        width: 110px;
        height: 40px;
        background-image: var(--cSecondary);
        color: var(--cTPrimary);
        border-radius: 30px 30px 0 0;
        cursor: pointer;
    }
    
    .infinity-loop {
        animation: loop 2s infinite ease-in-out;
        color: var(--colorSecondary); 
    }
    
    @keyframes scaleUP {
        from {
            transform: scale(.8);
        }
        to {
            transform: scale(1.1);
        }
    }
    
    @keyframes animateHeart {
        0% {
            transform: rotate(0deg);
        }
        10% {
            transform: rotate(35deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }
    
    @keyframes loop {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    @media screen and (max-width: 525px) {
        .glass-container {
            width: 100vw;
            height: 100vh;
            border-radius: 0;
        }
        
        .MP3container {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 0;
            padding: var(--paddingSmall);
            overflow: hidden;
        }
    
    .controller {
        justify-content: space-between;
    }
    }
    
   
    </style>

</head>


<body>
    <div class="glass-container">

        <div class="nodisplay">
            <div class="imgs">
                <img class="img" src="//repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png" alt="">
                <img class="img" src="//repo.bfw.wiki/bfwrepo/image/5fcd70565eba5.png" alt="">
                <img class="img" src="//repo.bfw.wiki/bfwrepo/image/600d6cfee7691.png" alt="">
                <img class="img" src="//repo.bfw.wiki/bfwrepo/icon/6286c7ad45af2.png" alt="">
                <img class="img" src="//repo.bfw.wiki/bfwrepo/image/600d6d2fbc572.png" alt="">
                <img class="img" src="//repo.bfw.wiki/bfwrepo/image/5ef9f1fd6dc30.png" alt="">
                <img class="img" src="//repo.bfw.wiki/bfwrepo/image/5fcd70565eba5.png" alt="">
                    <img class="img" src="//repo.bfw.wiki/bfwrepo/image/600d6d2fbc572.png" alt="">
                <img class="img" src="//repo.bfw.wiki/bfwrepo/image/5ef9f1fd6dc30.png" alt="">
                <img class="img" src="//repo.bfw.wiki/bfwrepo/image/5fcd70565eba5.png" alt="">
            </div>
        </div>



        <div class="MP3container">
            <div id="lyrics-menu" class="side-menu">
                <div id="lyrics-opener" class="side-menu-opener" title="Song's lyrics.">
                    lyrics
                </div>
            </div>
            <div id="songs-menu" class="right-side-menu">
                <div id="songs-opener" class="right-side-opener" title="Songs List.">
                    songs
                </div>
            </div>
            <div class="header-wrapper">
                <div class="sbtn">
                    <svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486.975 486.975">
                        <path d="M473.475,230.025h-427.4l116-116c5.3-5.3,5.3-13.8,0-19.1c-5.3-5.3-13.8-5.3-19.1,0l-139,139c-5.3,5.3-5.3,13.8,0,19.1
		l139,139c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1l-116-116h427.5c7.5,0,13.5-6,13.5-13.5
		S480.975,230.025,473.475,230.025z" />
                    </svg>
                </div>
                <div id="songState" class="songState">
                    connecting...
                </div>
                <div class="sbtn">
                    <svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
                        <path id="XMLID_241_"
                            d="M15,30h120c8.284,0,15-6.716,15-15s-6.716-15-15-15H15C6.716,0,0,6.716,0,15S6.716,30,15,30z" />
                        <path id="XMLID_242_"
                            d="M135,60H15C6.716,60,0,66.716,0,75s6.716,15,15,15h120c8.284,0,15-6.716,15-15S143.284,60,135,60z" />
                        <path id="XMLID_243_"
                            d="M135,120H15c-8.284,0-15,6.716-15,15s6.716,15,15,15h120c8.284,0,15-6.716,15-15S143.284,120,135,120z" />
                    </svg>
                </div>
            </div>
            <div class="img-container">
                <img id="thumbnail" src="./public/images/pexels-jot-2179483.jpg" alt="">
            </div>
            <div class="song-info">
                <div id="songTitle" class="title">Loading Song...</div>
                <div id="songAuthor" title="check your connection if it's took so lonk." class="author">check your connection if it's took so lonk.</div>
            </div>
            <div class="range-wrapper">
                <span id="songCurrentTime" class="text-gradient">00:00</span>
                <div id="waveform"></div>
                <span id="songDuration" class="opacity50">00:00</span>
            </div>
            <div class="controller">
                <div id="previousBtn" class="sbtn">
                    <svg width="20px" height="20px" style="transform: scale(-1);" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M21 4C21 3.44772 20.5523 3 20 3C19.4477 3 19 3.44772 19 4V20C19 20.5523 19.4477 21 20 21C20.5523 21 21 20.5523 21 20V4Z" />
                        <path
                            d="M3 4.94743C3 3.5226 4.61175 2.69498 5.7697 3.52521L16.2394 11.0318C17.2443 11.7523 17.2053 13.2593 16.1646 13.927L5.69492 20.6434C4.53019 21.3905 3 20.5542 3 19.1704V4.94743Z" />
                    </svg>
                </div>
                <div id="playBtn" class="sbtn mbtn">
                    <svg id="playSVG" width="26px" height="2.........完整代码请登录后点击上方下载按钮下载查看