这是一款使用 Vue 制作的富有质感的方形 HTML5 音乐播放器，播放器左上角以浮起的方式显示封面，右侧是使用 svg 绘制的播放控制按钮，包含了收藏、上一首、下一首和播放，下面部分显示歌名、歌手名和播放进度条。这款播放器简洁精致，可用作独立的播放器使用。

制作过程

1、HTML

<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>

2、CSS

.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;}...

3、Javascript

new Vue({    el: '#app',    data() {        return {            audio: null,            circleLeft: null,            barWidth: null,            duration: null,            currentTime: null,            isTimerPlaying: false,            tracks: [                {                    name: 'Dawn',                    artist: 'Skylike',                    cover: 'img/1.jpg',                    source: 'https://cdn.dowebok.com/mp3/2.mp3',                    url: 'https://www.dowebok.com/8636.html',                    favorited: false                },                ...            ],            currentTrack: null,            currentTrackIndex: 0,            transitionName: null        }    },    created() {        let vm = this        this.currentTrack = this.tracks[0]        this.audio = new Audio()        this.audio.src = this.currentTrack.source        this.audio.ontimeupdate = function () {            vm.generateTime()        }        this.audio.onloadedmetadata = function () {            vm.generateTime()        }        this.audio.onended = function () {            vm.nextTrack()            this.isTimerPlaying = true        }        for (let index = 0; index < this.tracks.length; index++) {            const element = this.tracks[index]            let link = document.createElement('link')            link.rel = 'prefetch'            link.href = element.cover            link.as = 'image'            document.head.appendChild(link)        }    },    methods: {        play() {            if (this.audio.paused) {                this.audio.play()                this.isTimerPlaying = true            } else {                this.audio.pause()                this.isTimerPlaying = false            }        },        prevTrack() {            this.transitionName = 'scale-in'            this.isShowCover = false            if (this.currentTrackIndex > 0) {                this.currentTrackIndex--            } else {                this.currentTrackIndex = this.tracks.length - 1            }            this.currentTrack = this.tracks[this.currentTrackIndex]            this.resetPlayer()        },        nextTrack() {            this.transitionName = 'scale-out'            this.isShowCover = false            if (this.currentTrackIndex < this.tracks.length - 1) {                this.currentTrackIndex++            } else {                this.currentTrackIndex = 0            }            this.currentTrack = this.tracks[this.currentTrackIndex]            this.resetPlayer()        },        ...    }})

到这里就制作完了，由于代码过长，上面所展示的并不是全部的，如需下载代码，请前往：

https://www.dowebok.com/8636.html