基于vue的音乐播放器-html代码-BFW代码库

代码语言：html
代码描述：基于vue的音乐播放器，可以收藏、分享、上一首、下一首、进度条显示、封面显示等，很强大
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mini Music Player - VueJS</title>
    <link href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap&subset=latin-ext" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        body {
            background: #dfe7ef;
            font-family: "Bitter", serif;
        }

        * {
            box-sizing: border-box;
        }

        .icon {
            display: inline-block;
            width: 1em;
            height: 1em;
            stroke-width: 0;
            stroke: currentColor;
            fill: currentColor;
        }

        .wrapper {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-size: cover;
        }
@media screen and (max-width: 700px), (max-height: 500px) {
            .wrapper {
                flex-wrap: wrap;
                flex-direction: column;
            }
        }

        .player {
            background: #eef3f7;
            width: 410px;
            min-height: 480px;
            box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32);
            border-radius: 15px;
            padding: 30px;
        }
@media screen and (max-width: 576px), (max-height: 500px) {
            .player {
                width: 95%;
                padding: 20px;
                margin-top: 75px;
                min-height: initial;
                padding-bottom: 30px;
                max-width: 400px;
            }
        }
        .player__top {
            display: flex;
            align-items: flex-start;
            position: relative;
            z-index: 4;
        }
@media screen and (max-width: 576px), (max-height: 500px) {
            .player__top {
                flex-wrap: wrap;
            }
        }
        .player-cover {
            width: 300px;
            height: 300px;
            margin-left: -70px;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
            border-radius: 15px;
            z-index: 1;
        }
@media screen and (max-width: 576px), (max-height: 500px) {
            .player-cover {
                margin-top: -70px;
                margin-bottom: 25px;
                width: 290px;
                height: 230px;
                margin-left: auto;
                margin-right: auto;
            }
        }
        .player-cover__item {
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 100%;
            height: 100%;
            border-radius: 15px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .player-cover__item:before {
            content: "";
            background: inherit;
            width: 100%;
            height: 100%;
            box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
            display: block;
            z-index: 1;
            position: absolute;
            top: 30px;
            transform: scale(0.9);
            filter: blur(10px);
            opacity: 0.9;
            border-radius: 15px;
        }
        .player-cover__item:after {
            content: "";
            background: inherit;
            width: 100%;
            height: 100%;
            box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
            display: block;
            z-index: 2;
            position: absolute;
            border-radius: 15px;
        }
        .player-cover__img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
            box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
            user-select: none;
            pointer-events: none;
        }
        .player-controls {
            flex: 1;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
@media screen and (max-width: 576px), (max-height: 500px) {
            .player-controls {
                flex-direction: row;
                padding-left: 0;
                width: 100%;
                flex: unset;
            }
        }
        .player-controls__item {
            display: inline-flex;
            font-size: 30px;
            padding: 5px;
            margin-bottom: 10px;
            color: #acb8cc;
            cursor: pointer;
            width: 50px;
            height: 50px;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: all 0.3s ease-in-out;
        }
@media screen and (max-width: 576px), (max-height: 500px) {
            .player-controls__item {
                font-size: 26px;
                padding: 5px;
                margin-right: 10px;
                color: #acb8cc;
                cursor: pointer;
                width: 40px;
                height: 40px;
                margin-bottom: 0;
            }
        }
        .player-controls__item::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #fff;
            transform: scale(0.5);
            opacity: 0;
            box-shadow: 0px 5px 10px 0px rgba(76, 70, 124, 0.2);
            transition: all 0.3s ease-in-out;
            transition: all 0.4s cubic-bezier(0.35, 0.57, 0.13, 0.88);
        }
@media screen and (min-width: 500px) {
            .player-controls__item:hover {
                color: #532ab9;
            }
            .player-controls__item:hover::before {
                opacity: 1;
                transform: scale(1.3);
            }
        }
@media screen and (max-width: 576px), (max-height: 500px) {
            .player-controls__item:active {
                color: #532ab9;
            }
            .player-controls__item:active::before {
                opacity: 1;
                transform: scale(1.3);
            }
        }
        .player-controls__item .icon {
            position: relative;
            z-index: 2;
        }
        .player-controls__item.-xl {
            margin-bottom: 0;
            font-size: 95px;
            filter: drop-shadow(0 11px 6px rgba(172, 184, 204, 0.45));
            color: #fff;
            width: auto;
            height: auto;
            display: inline-flex;
        }
@media screen and (max-width: 576px), (max-height: 500px) {
            .player-controls__item.-xl {
                margin-left: auto;
                font-size: 75px;
                margin-right: 0;
            }
        }
        .player-controls__item.-xl:before {
            display: none;
        }
        .player-controls__item.-favorite.active {
            color: red;
        }

        [v-cloak] {
            display: none;
        }

        [v-cloak] > * {
            display: none;
        }

        .progress {
            width: 100%;
            margin-top: -15px;
            user-select: none;
        }
        .progress__top {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
        }
        .progress__duration {
            color: #71829e;
            font-weight: 700;
            font-size: 20px;
            opacity: 0.5;
        }
        .progress__time {
            margin-top: 2px;
            color: #71829e;
            font-weight: 700;
            font-size: 16px;
            opacity: 0.7;
        }

        .progress__bar {
            height: 6px;
            width: 100%;
            cursor: pointer;
            background-color: #d0d8e6;
            display: inline-block;
            border-radius: 10px;
        }

        .progress__current {
            height: inherit;
            width: 0%;
            background-color: #a3b3ce;
            border-radius: 10px;
        }

        .album-info {
            color: #71829e;
            flex: 1;
            padding-right: 60px;
            user-select: none;
        }
@media screen and (max-width: 576px), (max-height: 500px) {
            .album-info {
                padding-right: 30px;
            }
        }
        .album-info__name {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 12px;
            line-height: 1.3em;
        }
@media screen and (max-width: 576px), (max-height: 500px) {
            .album-info__name {
                font-size: 18px;
                margin-bottom: 9px;
            }
        }
        .album-info__track {
            font-weight: 400;
            font-size: 20px;
            opacity: 0.7;
            line-height: 1.3em;
            min-height: 52px;
        }
@media screen and (max-width: 576px), (max-height: 500px) {
            .album-info__track {
                font-size: 18px;
                min-height: 50px;
            }
        }
        .scale-out-enter-active {
            transition: all .35s ease-in-out;
        }

        .scale-out-leave-active {
            transition: all .35s ease-in-out;
        }

        .scale-out-enter {
            transform: scale(0.55);
            pointer-events: none;
            opacity: 0;
        }

        .scale-out-leave-to {
            transform: scale(1.2);
            pointer-events: none;
            opacity: 0;
        }

        .scale-in-enter-active {
            transition: all .35s ease-in-out;
        }

        .scale-in-leave-active {
            transition: all .35s ease-in-out;
        }

        .scale-in-enter {
            transform: scale(1.2);
            pointer-events: none;
            opacity: 0;
        }

        .scale-in-leave-to {
            transform: scale(0.55);
            pointer-events: none;
            opacity: 0;
        }
    </style>

</head>
<body>

    <div class="wrapper" id="app">
        <div class="player">
            <div class="player__top">
                <div class="player-cover">
                    <transition-group :name="transitionName">
                        <div class="player-cover__item" v-if="$index === currentTrackIndex" :style="{ backgroundImage: `url(${track.cover})` }" v-for="(track, $index) in tracks" :key="$index"></div>
                    </transition-group>
                </div>
                <div class="player-controls">
                    <div class="player-controls__item -favorite" :class="{ active : currentTrack.favorited }" @click="favorite">
                        <svg class="icon">
                            <use xlink:href="#icon-heart-o"></use>
                        </svg>
                    </div>
                    <a :href="currentTrack.url" target="_blank" class="player-controls__item">
                        <svg class="icon">
                            <use xlink:href="#icon-link"></use>
                        </svg>
                    </a>
                    <div class="player-controls__item" @click="prevTrack">
                        <svg class="icon">
                            <use xlink:href="#icon-prev"></use>
                        </svg>
                    </div>
                    <div class="player-controls__item" @click="nextTrack">
                        <svg class="icon">
                            <use xlink:href="#icon-next"></use>
                        </svg>
                    </div>
                    <div class="player-controls__item -xl js-play" @click="play">
                        <svg class="icon">
                            <use xlink:href="#icon-pause" v-if="isTimerPlaying"></use>
                            <use xlink:href="#icon-play" v-else></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="progress" ref="progress">
                <div class="progress__top">
                    <div class="album-info" v-if="currentTrack">
                        <div class="album-info__name">
                            {{ currentTrack.artist }}
                        </div>
                        <div class="album-info__track">
                            {{ currentTrack.name }}
                        </div>
                    </div>
                    <div class="progress__duration">
                        {{ duration }}
                    </div>
                </div>
                <div class="progress__bar" @click="clickProgress">
                    <div class="progress__current" :style="{ width : barWidth }"></div>
                </div>
                <div class="progress__time">
                    {{ currentTime }}
                </div>
            </div>
            <div v-cloak></div>
        </div>
    </div>

    <svg xmlns="http://www.w3.org/2000/svg" hidden xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <symbol id="icon-heart-o" viewBox="0 0 32 32">
                <title>icon-heart-o</title>
                <path d="M22.88 1.952c-2.72 0-5.184 1.28-6.88 3.456-1.696-2.176-4.16-3.456-6.88-3.456-4.48 0-9.024 3.648-9.024 10.592 0 7.232 7.776 12.704 15.072 17.248 0.256 0.16 0.544 0.256 0.832 0.256s0.576-0.096 0.832-0.256c7.296-4.544 15.072-10.016 15.072-17.248 0-6.944-4.544-10.592-9.024-10.592zM16 26.56c-4.864-3.072-12.736-8.288-12.736-14.016 0-5.088 3.040-7.424 5.824-7.424 2.368 0 4.384 1.504 5.408 4.032 0.256 0.608 0.832 0.992 1.472 0.992s1.248-0.384 1.472-0.992c1.024-2.528 3.040-4.032 5.408-4.032 2.816 0 5.824 2.304 5.824 7.424 0.064 5.728-7.808 10.976-12.672 14.016z"></path>
                <path d="M16 30.144c-0.32 0-0.64-0.096-0.896-0.256-7.296-4.576-15.104-10.048-15.104-17.344 0-7.008 4.576-10.688 9.12-10.688 2.656 0 5.152 1.216 6.88 3.392 1.728-2.144 4.224-3.392 6.88-3.392 4.544 0 9.12 3.68 9.12 10.688 0 7.296-7.808 12.768-15.104 17.344-0.256 0.16-0.576 0.256-0.896 0.256zM9.12 2.048c-4.448 0-8.928 3.616-8.928 10.496 0 7.168 7.744 12.64 15.008 17.152 0.48 0.288 1.12 0.288 1.568 0 7.264-4.544 15.008-9.984 15.008-17.152 0-6.88-4.48-10.496-8.928-10.496-2.656 0-5.088 1.216-6.816 3.392l-0.032 0.128-0.064-0.096c-1.696-2.176-4.192-3.424-6.816-3.424zM16 26.688l-0.064-0.032c-3.808-2.4-12.768-8.032-12.768-14.112 0-5.152 3.072-7.52 5.952-7.52 2.432 0 4.48 1.536 5.504 4.096 0.224 0.576 0.768 0.928 1.376 0.928s1.152-0.384 1.376-0.928c1.024-2.56 3.072-4.096 5.504-4.096 2.848 0 5.952 2.336 5.952 7.52 0 6.080-8.96 11.712-12.768 14.112l-0.064 0.032zM9.12 5.248c-2.752 0-5.728 2.304-5.728 7.328 0 5.952 8.8 11.488 12.608 13.92 3.808-2.4 12.608-7.968 12.608-13.92 0-5.024-2.976-7.328-5.728-7.328-2.336 0-4.32 1.472-5.312 3.968-0.256 0.64-0.864 1.056-1.568 1.056s-1.312-0.416-1.568-1.056c-0.992-2.496-2.976-3.968-5.312-3.968z"></path>
                <path d="M6.816 20.704c0.384 0.288 0.512 0.704 0.48 1.12 0.224 0.256 0.384 0.608 0.384 0.96 0 0.032 0 0.032 0 0.064 0.16 0.128 0.32 0.256 0.48 0.384 0.128 0.064 0.256 0.16 0.384 0.256 0.096 0.064 0.192 0.16 0.256 0.224 0.8 0.576 1.632 1.12 2.496 1.664 0.416 0.128 0.8 0.256 1.056 0.32 1.984 0.576 4.064 0.8 6.112 0.928 2.688-1.92 5.312-3.904 8-5.792 0.896-1.088 1.92-2.080 2.912-3.104v-7.552c-0.096-0.128-0.192-0.288-0.32-0.416-0.768-1.024-1.184-2.176-1.6-3.296-0.768-0.416-1.536-0.8-2.336-1.12-0.128-0.064-0.256-0.096-0.384-0.16h-21.568v12.992c1.312 0.672 2.496 1.6 3.648 2.528z"></path>
            </symbol>
            <symbol id="icon-heart" viewBox="0 0 32 32">
                <title>icon-heart</title>
                <path d="M22.88 1.952c-2.72 0-5.184 1.28-6.88 3.456-1.696-2.176-4.16-3.456-6.88-3.456-4.48 0-9.024 3.648-9.024 10.592 0 7.232 7.776 12.704 15.072 17.248 0.256 0.16 0.544 0.256 0.832 0.256s0.576-0.096 0.832-0.256c7.296-4.544 15.072-10.016 15.072-17.248 0-6.944-4.544-10.592-9.024-10.592zM16 26.56c-4.864-3.072-12.736-8.288-12.736-14.016 0-5.088 3.040-7.424 5.824-7.424 2.368 0 4.384 1.504 5.408 4.032 0.256 0.608 0.832 0.992 1.472 0.992s1.248-0.384 1.472-0.992c1.024-2.528 3.040-4.032 5.408-4.032 2.816 0 5.824 2.304 5.824 7.424 0.064 5.728-7.808 10.976-12.672 14.016z"></path>
                <path d="M16 30.144c-0.32 0-0.64-0.096-0.896-0.256-7.296-4.576-15.104-10.048-15.104-17.344 0-7.008 4.576-10.688 9.12-10.688 2.656 0 5.152 1.216 6.88 3.392 1.728-2.144 4.224-3.392 6.88-3.392 4.544 0 9.12 3.68 9.12 10.688 0 7.296-7.808 12.768-15.104 17.344-0.256 0.16-0.576 0.256-0.896 0.256zM9.12 2.048c-4.448 0-8.928 3.616-8.928 10.496 0 7.168 7.744 12.64 15.008 17.152 0.48 0.288 1.12 0.288 1.568 0 7.264-4.544 15.008-9.984 15.008-17.152 0-6.88-4.48-10.496-8.928-10.496-2.656 0-5.088 1.216-6.816 3.392l-0.032 0.128-0.064-0.096c-1.696-2.176-4.192-3.424-6.816-3.424zM16 26.688l-0.064-0.032c-3.808-2.4-12.768-8.032-12.768-14.112 0-5.152 3.072-7.52 5.952-7.52 2.432 0 4.48 1.536 5.504 4.096 0.224 0.576 0.768 0.928 1.376 0.928s1.152-0.384 1.376-0.928c1.024-2.56 3.072-4.096 5.504-4.096 2.848 0 5.952 2.336 5.952 7.52 0 6.080-8.96 11.712-12.768 14.112l-0.064 0.032zM9.12 5.248c-2.752 0-5.728 2.304-5.728 7.328 0 5.952 8.8 11.488 12.608 13.92 3.808-2.4 12.608-7.968 12.608-13.92 0-5.024-2.976-7.328-5.728-7.328-2.336 0-4.32 1.472-5.312 3.968-0.256 0.64-0.864 1.056-1.568 1.056s-1.312-0.416-1.568-1.056c-0.992-2.496-2.976-3.968-5.312-3.968z"></path>
            </symbol>
            <symbol id="icon-infinity" viewBox="0 0 32 32">
                <title>icon-infinity</title>
                <path d="M29.312 20.832c-1.28 1.28-3.008 1.984-4.832 1.984s-3.52-0.704-4.832-1.984c-0.032-0.032-0.224-0.224-0.256-0.256v0 1.28c0 0.448-0.352 0.8-0.8 0.8s-0.8-0.352-0.8-0.8v-3.168c0-0.448 0.352-0.8 0.8-0.8h3.168c0.448 0 0.8 0.352 0.8 0.8s-0.352 0.8-0.8 0.8h-1.28c0.032 0.032 0.224 0.224 0.256 0.256 0.992 0.992 2.304 1.536 3.68 1.536 1.408 0 2.72-0.544 3.68-1.536 0.992-0.992 1.536-2.304 1.536-3.68s-0.544-2.72-1.536-3.68c-0.992-0.992-2.304-1.536-3.68-1.536-1.408 0-2.72 0.544-3.68 1.536l-8.416 8.448c-1.312 1.312-3.072 1.984-4.832 1.984s-3.488-0.672-4.832-1.984c-2.656-2.656-2.656-6.976 0-9.632s6.976-2.656 9.632 0c0.032 0.032 0.16 0.16 0.192 0.192l0.064 0.064v-1.28c0-0.448 0.352-0.8 0.8-0.8s0.8 0.352 0.8 0.8v3.168c0 0.448-0.352 0.8-0.8 0.8h-3.168c-0.448 0-0.8-0.352-0.8-0.8s0.352-0.8 0.8-0.8h1.28l-0.096-0.064c-0.032-0.032-0.16-0.16-0.192-0.192-0.992-0.992-2.304-1.536-3.68-1.536s-2.72 0.544-3.68 1.536c-2.048 2.0.........完整代码请登录后点击上方下载按钮下载查看