小巧的播放器开源(复制粘贴就能用)

分类实验室日期2021-02-12 22:52:42访问165评论1

预览


HTML

<template>
<div class="app-music" :class="{active:sHide}">
<div class="music-box" :class="{active:sHide}">
<div class="music-img" :class="{rotate:state,max:!state}" @click="showHide">
<img :src="current.img">
</div>
<div class="music-control">
<audio :src="current.url" :autoplay="autoplay" ref="music" />
<div class="prev" @click="prev"> <img ><!--图标URL自己设置--> </div>
<div class="togglePlay" @click="togglePlay"> <img v-show="!state"><!--图标URL自己设置--> <img v-show="state"><!--图标URL自己设置--> </div>
<div class="next" @click="next"> <img ><!--图标URL自己设置-->
</div>
</div>
<div class="music-info" :class="{playing:state,active:sHide}">
<h2>{{current.name}} - {{current.author.join('&')}}</h2>
<p>{{currentTime==0?'00:00':currentTimeStr}}/{{totalTimeStr}}</p>
<div><span :style="{width:progress+'%'}"></span></div>
</div>
</div>
</div>
</template>

JavaScript

export default {
name: "music.vue",
data() {
return {
list:[
{
name:'一起走过的日子',
author:['汪小敏'],
img:'汪小敏.jpg',
url:'一起走过的日子.mp3'
},
{
name:'笑看风云',
author:['汪小敏'],
img:'汪小敏.jpg',
url:'笑看风云.mp3'
},
{
name:'月半小夜曲',
author:['open'],
img:'月半小夜曲.jpg',
url:'月半小夜曲.mp3'
}
],
current: {
url: '',
name: '',
author: [],
img:''
},
currentTime: 0,
totalTime: 0,
state:this.autoplay,
progress:0,
currentTimeStr:0,
totalTimeStr:0,
sHide:true//点击增加class
}
},
async created() {
await this.init()
},
watch:{
currentTime(old){
let min = Math.floor(old/60)
let second = old % 60
if (min<10){
min = '0'+min
}
if(second<10){
second = '0'+second
}
this.currentTimeStr = `${min}:${second}`
},
totalTime(old){
let min = Math.floor(old/60)
let second = old % 60
if (min<10){
min = '0'+min
}
if(second<10){
second = '0'+second
}
this.totalTimeStr = `${min}:${second}`
}
},
methods: {
//点击增加class
async showHide () {
this.sHide = !this.sHide
},
async init() {
this.current = this.list[0]
await this.$nextTick()
if (process.client){
this.$refs.music.addEventListener('loadeddata', () => {
this.totalTime = Math.floor(this.$refs.music.duration)
})
this.$refs.music.addEventListener('timeupdate', () => {
this.currentTime = Math.floor(this.$refs.music.currentTime)
this.progress = (this.currentTime/this.totalTime).toFixed(2)*100
})
this.$refs.music.addEventListener('ended', () => {
this.next()
})
}
},
async prev() {
if (this.list.indexOf(this.current) > 0) {
this.current = this.list[this.list.indexOf(this.current) - 1]
await this.$nextTick()
this.togglePlay()
}
},
async next() {
if (this.list.indexOf(this.current) >= this.list.length-1) {
this.$refs.music.pause()
this.state = false
return
}
this.current = this.list[this.list.indexOf(this.current) + 1]
await this.$nextTick()
this.togglePlay()
},
togglePlay() {
if (this.$refs.music.paused) {
this.$refs.music.play()
this.state = true
return
}
this.state = false
this.$refs.music.pause()
}
},
props: {
autoplay: {
type: Boolean,
default: false
}
}
}

CSS

.app-music {
position: fixed;
top: 50%;
right: 0px;
z-index: 1;
transition: all 0.6s ease;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12), 0 20px 20px rgba(95, 23, 101, 0.2);
}
.app-music.active {
right: -214px;
box-shadow: 0 0 white;
}
.music-box.active {
background-color: #fff0;
}
.music-info.active {
display: none;
}
.music-img {
position: absolute;
width: 84px;
height: 84px;
top: -32px;
left: 16px;
z-index: 1;
border-radius: 50%;
transition: all 0.6s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 20px 20px -10px rgba(108, 29, 171, 0.3);
}
.music-img.rotate{
top: -40px;
animation: rotate infinite 6s linear;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.music-img.max {
transform: matrix(0.879404, -0.476076, 0.476076, 0.879404, 0, 0);
}
.music-box {
position: relative;
width: 320px;
height: 74px;
display: flex;
flex-wrap: wrap;
border-radius: 8px;
background-color: #fff;
}
.music-img::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
width: 16px;
height: 16px;
border-radius: 100%;
background-image: linear-gradient(45deg, white, #dabad1);
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.music-box .music-img img {
width: 84px;
height: 84px;
border-radius: 50%;
}
.music-control {
position: absolute;
display: flex;
right: 0;
width: 200px;
height: 100%;
padding: 8px;
}
.music-control > div {
display: flex;
padding: 2px;
height: 50px;
width: 50px;
margin-top: 6px;
border-radius: 4px;
transition: background-color 0.6s ease;
}
.music-control > div:hover {
background-color: #ddd;
}
.music-control > div img {
width: 24px;
margin-left: 10px;
}
.music-info {
z-index: -1;
position: absolute;
left: 10px;
width: 300px;
padding: 4px 10px 4px 100px;
transition: all 0.6s ease;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: rgba(255, 246, 246, 0.65);
}
.music-info.playing {
transform: translateY(-100%);
}
.music-info h2 {
text-align: center;
font-size: 13px;
font-weight: 500;
color: #313131;
}
.music-info p {
text-align: center;
}
.music-info > div {
height: 3px;
border-radius: 3px;
overflow: hidden;
background-color: #ddd;
}
.music-info span {
display: block;
width: 35%;
height: 3px;
background-color: #ec51a5;
}

扫描加入网页设计QQ群、建站如此简单

本文地址: https://www.usuuu.com/article/2XbILGi1

  • 暂无评论