添加全局音乐播放组件
This commit is contained in:
jmal
parent
b5e8c8321e
commit
85950d56b0
30
src/assets/js/color-thief.min.js
vendored
Normal file
30
src/assets/js/color-thief.min.js
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
/*
|
||||
* Color Thief v2.0
|
||||
* by Lokesh Dhakar - http://www.lokeshdhakar.com
|
||||
*
|
||||
* Thanks
|
||||
* ------
|
||||
* Nick Rabinowitz - For creating quantize.js.
|
||||
* John Schulz - For clean up and optimization. @JFSIII
|
||||
* Nathan Spady - For adding drag and drop support to the demo page.
|
||||
*
|
||||
* License
|
||||
* -------
|
||||
* Copyright 2011, 2015 Lokesh Dhakar
|
||||
* Released under the MIT license
|
||||
* https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE
|
||||
*
|
||||
* @license
|
||||
*/
|
||||
var CanvasImage=function(a){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),document.body.appendChild(this.canvas),this.width=this.canvas.width=a.width,this.height=this.canvas.height=a.height,this.context.drawImage(a,0,0,this.width,this.height)};CanvasImage.prototype.clear=function(){this.context.clearRect(0,0,this.width,this.height)},CanvasImage.prototype.update=function(a){this.context.putImageData(a,0,0)},CanvasImage.prototype.getPixelCount=function(){return this.width*this.height},CanvasImage.prototype.getImageData=function(){return this.context.getImageData(0,0,this.width,this.height)},CanvasImage.prototype.removeCanvas=function(){this.canvas.parentNode.removeChild(this.canvas)};var ColorThief=function(){};/*!
|
||||
* quantize.js Copyright 2008 Nick Rabinowitz.
|
||||
* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
|
||||
* @license
|
||||
*/
|
||||
/*!
|
||||
* Block below copied from Protovis: http://mbostock.github.com/protovis/
|
||||
* Copyright 2010 Stanford Visualization Group
|
||||
* Licensed under the BSD License: http://www.opensource.org/licenses/bsd-license.php
|
||||
* @license
|
||||
*/
|
||||
if(ColorThief.prototype.getColor=function(a,b){var c=this.getPalette(a,5,b),d=c[0];return d},ColorThief.prototype.getPalette=function(a,b,c){"undefined"==typeof b&&(b=10),("undefined"==typeof c||c<1)&&(c=10);for(var d,e,f,g,h,i=new CanvasImage(a),j=i.getImageData(),k=j.data,l=i.getPixelCount(),m=[],n=0;n<l;n+=c)d=4*n,e=k[d+0],f=k[d+1],g=k[d+2],h=k[d+3],h>=125&&(e>250&&f>250&&g>250||m.push([e,f,g]));var o=MMCQ.quantize(m,b),p=o?o.palette():null;return i.removeCanvas(),p},!pv)var pv={map:function(a,b){var c={};return b?a.map(function(a,d){return c.index=d,b.call(c,a)}):a.slice()},naturalOrder:function(a,b){return a<b?-1:a>b?1:0},sum:function(a,b){var c={};return a.reduce(b?function(a,d,e){return c.index=e,a+b.call(c,d)}:function(a,b){return a+b},0)},max:function(a,b){return Math.max.apply(null,b?pv.map(a,b):a)}};var MMCQ=function(){function a(a,b,c){return(a<<2*i)+(b<<i)+c}function b(a){function b(){c.sort(a),d=!0}var c=[],d=!1;return{push:function(a){c.push(a),d=!1},peek:function(a){return d||b(),void 0===a&&(a=c.length-1),c[a]},pop:function(){return d||b(),c.pop()},size:function(){return c.length},map:function(a){return c.map(a)},debug:function(){return d||b(),c}}}function c(a,b,c,d,e,f,g){var h=this;h.r1=a,h.r2=b,h.g1=c,h.g2=d,h.b1=e,h.b2=f,h.histo=g}function d(){this.vboxes=new b(function(a,b){return pv.naturalOrder(a.vbox.count()*a.vbox.volume(),b.vbox.count()*b.vbox.volume())})}function e(b){var c,d,e,f,g=1<<3*i,h=new Array(g);return b.forEach(function(b){d=b[0]>>j,e=b[1]>>j,f=b[2]>>j,c=a(d,e,f),h[c]=(h[c]||0)+1}),h}function f(a,b){var d,e,f,g=1e6,h=0,i=1e6,k=0,l=1e6,m=0;return a.forEach(function(a){d=a[0]>>j,e=a[1]>>j,f=a[2]>>j,d<g?g=d:d>h&&(h=d),e<i?i=e:e>k&&(k=e),f<l?l=f:f>m&&(m=f)}),new c(g,h,i,k,l,m,b)}function g(b,c){function d(a){var b,d,e,f,g,h=a+"1",j=a+"2",k=0;for(i=c[h];i<=c[j];i++)if(o[i]>n/2){for(e=c.copy(),f=c.copy(),b=i-c[h],d=c[j]-i,g=b<=d?Math.min(c[j]-1,~~(i+d/2)):Math.max(c[h],~~(i-1-b/2));!o[g];)g++;for(k=p[g];!k&&o[g-1];)k=p[--g];return e[j]=g,f[h]=e[j]+1,[e,f]}}if(c.count()){var e=c.r2-c.r1+1,f=c.g2-c.g1+1,g=c.b2-c.b1+1,h=pv.max([e,f,g]);if(1==c.count())return[c.copy()];var i,j,k,l,m,n=0,o=[],p=[];if(h==e)for(i=c.r1;i<=c.r2;i++){for(l=0,j=c.g1;j<=c.g2;j++)for(k=c.b1;k<=c.b2;k++)m=a(i,j,k),l+=b[m]||0;n+=l,o[i]=n}else if(h==f)for(i=c.g1;i<=c.g2;i++){for(l=0,j=c.r1;j<=c.r2;j++)for(k=c.b1;k<=c.b2;k++)m=a(j,i,k),l+=b[m]||0;n+=l,o[i]=n}else for(i=c.b1;i<=c.b2;i++){for(l=0,j=c.r1;j<=c.r2;j++)for(k=c.g1;k<=c.g2;k++)m=a(j,k,i),l+=b[m]||0;n+=l,o[i]=n}return o.forEach(function(a,b){p[b]=n-a}),d(h==e?"r":h==f?"g":"b")}}function h(a,c){function h(a,b){for(var c,d=1,e=0;e<k;)if(c=a.pop(),c.count()){var f=g(i,c),h=f[0],j=f[1];if(!h)return;if(a.push(h),j&&(a.push(j),d++),d>=b)return;if(e++>k)return}else a.push(c),e++}if(!a.length||c<2||c>256)return!1;var i=e(a),j=0;i.forEach(function(){j++});var m=f(a,i),n=new b(function(a,b){return pv.naturalOrder(a.count(),b.count())});n.push(m),h(n,l*c);for(var o=new b(function(a,b){return pv.naturalOrder(a.count()*a.volume(),b.count()*b.volume())});n.size();)o.push(n.pop());h(o,c-o.size());for(var p=new d;o.size();)p.push(o.pop());return p}var i=5,j=8-i,k=1e3,l=.75;return c.prototype={volume:function(a){var b=this;return b._volume&&!a||(b._volume=(b.r2-b.r1+1)*(b.g2-b.g1+1)*(b.b2-b.b1+1)),b._volume},count:function(b){var c=this,d=c.histo;if(!c._count_set||b){var e,f,g,h=0;for(e=c.r1;e<=c.r2;e++)for(f=c.g1;f<=c.g2;f++)for(g=c.b1;g<=c.b2;g++)index=a(e,f,g),h+=d[index]||0;c._count=h,c._count_set=!0}return c._count},copy:function(){var a=this;return new c(a.r1,a.r2,a.g1,a.g2,a.b1,a.b2,a.histo)},avg:function(b){var c=this,d=c.histo;if(!c._avg||b){var e,f,g,h,j,k=0,l=1<<8-i,m=0,n=0,o=0;for(f=c.r1;f<=c.r2;f++)for(g=c.g1;g<=c.g2;g++)for(h=c.b1;h<=c.b2;h++)j=a(f,g,h),e=d[j]||0,k+=e,m+=e*(f+.5)*l,n+=e*(g+.5)*l,o+=e*(h+.5)*l;k?c._avg=[~~(m/k),~~(n/k),~~(o/k)]:c._avg=[~~(l*(c.r1+c.r2+1)/2),~~(l*(c.g1+c.g2+1)/2),~~(l*(c.b1+c.b2+1)/2)]}return c._avg},contains:function(a){var b=this,c=a[0]>>j;return gval=a[1]>>j,bval=a[2]>>j,c>=b.r1&&c<=b.r2&&gval>=b.g1&&gval<=b.g2&&bval>=b.b1&&bval<=b.b2}},d.prototype={push:function(a){this.vboxes.push({vbox:a,color:a.avg()})},palette:function(){return this.vboxes.map(function(a){return a.color})},size:function(){return this.vboxes.size()},map:function(a){for(var b=this.vboxes,c=0;c<b.size();c++)if(b.peek(c).vbox.contains(a))return b.peek(c).color;return this.nearest(a)},nearest:function(a){for(var b,c,d,e=this.vboxes,f=0;f<e.size();f++)c=Math.sqrt(Math.pow(a[0]-e.peek(f).color[0],2)+Math.pow(a[1]-e.peek(f).color[1],2)+Math.pow(a[2]-e.peek(f).color[2],2)),(c<b||void 0===b)&&(b=c,d=e.peek(f).color);return d},forcebw:function(){var a=this.vboxes;a.sort(function(a,b){return pv.naturalOrder(pv.sum(a.color),pv.sum(b.color))});var b=a[0].color;b[0]<5&&b[1]<5&&b[2]<5&&(a[0].color=[0,0,0]);var c=a.length-1,d=a[c].color;d[0]>251&&d[1]>251&&d[2]>251&&(a[c].color=[255,255,255])}},{quantize:h}}();
|
||||
@ -1,15 +1,22 @@
|
||||
<template>
|
||||
<div ref="audioPreview" v-show="show">
|
||||
<div class="audio-player" v-aplayerDrag="{ x: transformX, y: transformY }">
|
||||
<div class="audio-player"
|
||||
v-aplayerDrag="{ x: transformX, y: transformY }"
|
||||
@mouseenter="closeBarShow = true" @mouseleave="closeBarShow = false">
|
||||
<!-- <div class="audio-player"> -->
|
||||
<aplayer
|
||||
ref="audioPlayer"
|
||||
autoplay
|
||||
listFolded
|
||||
loop.sync="all"
|
||||
order.sync="list"
|
||||
:mini.sync="mini"
|
||||
:audio="audio"
|
||||
:lrc-type="3">
|
||||
:lrctype="3">
|
||||
</aplayer>
|
||||
<div v-show="closeBarShow" class="close-bar" @click="close">
|
||||
<svg-icon class="audio-player-close" icon-class="close"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -17,6 +24,7 @@
|
||||
<script>
|
||||
import '@/utils/directives.js'
|
||||
import Bus from '@/assets/js/bus'
|
||||
import colorThief from '@/assets/js/color-thief.min.js'
|
||||
export default {
|
||||
name: 'AudioPreview',
|
||||
components: {
|
||||
@ -29,7 +37,8 @@ export default {
|
||||
return {
|
||||
transformX: (document.body.clientWidth-500)/2,
|
||||
transformY: 0,
|
||||
show: true,
|
||||
show: false,
|
||||
closeBarShow: false,
|
||||
audio: [],
|
||||
mini: false,
|
||||
}
|
||||
@ -38,28 +47,33 @@ export default {
|
||||
this.onPicClick = this.onPicClick.bind(this);
|
||||
let pic = document.querySelector('.aplayer-pic')
|
||||
pic.addEventListener('click', this.onPicClick);
|
||||
Bus.$on('onAddAudio',function(newFile){
|
||||
console.log(this.$refs)
|
||||
this.show = false
|
||||
// let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + newFile.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + newFile.id
|
||||
// let musicOperation = {
|
||||
// id: newFile.id,
|
||||
// name: newFile.name,
|
||||
// artist: newFile.name,
|
||||
// url: url,
|
||||
// type: newFile.contentType,
|
||||
// cover: 'https://images.unsplash.com/photo-1495420378468-78588a508652?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
|
||||
// }
|
||||
// let musicIndex = this.audio.findIndex(item => item.id===newFile.id)
|
||||
// if(musicIndex < 0){
|
||||
// this.audio.push(musicOperation)
|
||||
// this.$nextTick(()=>{
|
||||
// this.$refs.audioPlayer.switch(this.audio.length-1)
|
||||
// })
|
||||
// }else{
|
||||
// console.log(this.$refs.audioPlayer)
|
||||
// this.$refs.audioPlayer.switch(musicIndex)
|
||||
// }
|
||||
Bus.$on('onAddAudio',newFile => {
|
||||
this.show = true
|
||||
let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + newFile.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + newFile.id
|
||||
let musicOperation = {
|
||||
id: newFile.id,
|
||||
name: newFile.name,
|
||||
artist: newFile.name,
|
||||
url: url,
|
||||
type: newFile.contentType,
|
||||
cover: 'https://images.unsplash.com/photo-1495420378468-78588a508652?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80',
|
||||
}
|
||||
let musicIndex = this.audio.findIndex(item => item.id===newFile.id)
|
||||
if(musicIndex < 0){
|
||||
if(this.audio.length === 1){
|
||||
let loop = document.querySelector('.aplayer-icon.aplayer-icon-loop');
|
||||
loop.style.display = 'inline'
|
||||
let order = document.querySelector('.aplayer-icon.aplayer-icon-order');
|
||||
order.style.display = 'inline'
|
||||
}
|
||||
this.audio.push(musicOperation)
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.audioPlayer.switch(this.audio.length-1)
|
||||
})
|
||||
}else{
|
||||
console.log(this.$refs.audioPlayer)
|
||||
this.$refs.audioPlayer.switch(musicIndex)
|
||||
}
|
||||
})
|
||||
},
|
||||
watch: {
|
||||
@ -67,12 +81,15 @@ export default {
|
||||
methods: {
|
||||
close(){
|
||||
this.show = false
|
||||
// this.$emit('update:status', false)
|
||||
this.audio.splice(0,this.audio.length)
|
||||
},
|
||||
onPicClick() {
|
||||
// this.mini = !this.mini
|
||||
console.log(this.$refs.audioPlayer)
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
Bus.$off('onAddAudio')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -80,12 +97,63 @@ export default {
|
||||
<style>
|
||||
.aplayer {
|
||||
/* position: relative; */
|
||||
width: 500px;
|
||||
width: 460px;
|
||||
margin: 0!important;
|
||||
/* -webkit-filter: blur(15px); */
|
||||
/* filter: blur(20px); */
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background: #ffffff45!important;
|
||||
/* background-color: rgba(255,255,255,0.72); */
|
||||
}
|
||||
.aplayer .aplayer-lrc:before {
|
||||
background: transparent!important;
|
||||
}
|
||||
.aplayer .aplayer-lrc:after {
|
||||
background: transparent!important;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list li.aplayer-list-light {
|
||||
background: #d4d4d475!important;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list li {
|
||||
border-top: .5px solid #d4d4d475!important;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list li:hover {
|
||||
background: #d4d4d475!important;
|
||||
}
|
||||
|
||||
.audio-player {
|
||||
z-index: 2005;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.close-bar {
|
||||
z-index: 2006;
|
||||
position: absolute;
|
||||
top: -36px;
|
||||
right: -36px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 36px;
|
||||
border-width: 36px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent transparent #d4d4d475;
|
||||
line-height: 36px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.close-bar:hover {
|
||||
cursor: pointer;
|
||||
border-color: transparent transparent transparent #69696975;
|
||||
}
|
||||
.audio-player-close {
|
||||
transform: rotate(-45deg);
|
||||
z-index: 2009;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 13px;
|
||||
}
|
||||
</style>
|
||||
1
src/icons/svg/close.svg
Normal file
1
src/icons/svg/close.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1585633534351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1772" width="32" height="32"><path d="M519.02036023 459.47959989L221.8941505 162.35411435a37.07885742 37.07885742 0 1 0-52.45354772 52.40502656l297.12476134 297.15010821L169.44060278 809.05863314a37.07885742 37.07885742 0 1 0 52.42964924 52.42892505l297.15010821-297.12476136 297.15010822 297.12476136a37.07885742 37.07885742 0 1 0 52.42892504-52.40430237l-297.12476135-297.1740067 297.12476135-297.12548553a37.07885742 37.07885742 0 1 0-52.42892504-52.42964924L519.04498291 459.47959989z" fill="#fff" p-id="1773"></path></svg>
|
||||
|
After Width: | Height: | Size: 642 B |
@ -29,8 +29,8 @@ import Viewer from 'v-viewer'
|
||||
|
||||
import APlayer from '@moefe/vue-aplayer';
|
||||
Vue.use(APlayer, {
|
||||
defaultCover: 'https://github.com/u3u.png', // 设置播放器默认封面图片
|
||||
productionTip: true, // 是否在控制台输出版本信息
|
||||
defaultCover: 'https://images.unsplash.com/photo-1495420378468-78588a508652?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80', // 设置播放器默认封面图片
|
||||
productionTip: false, // 是否在控制台输出版本信息
|
||||
});
|
||||
|
||||
Vue.use(Viewer)
|
||||
|
||||
@ -15,7 +15,7 @@ Vue.directive('aplayerDrag', {
|
||||
dialogHeaderEl.onmousedown = (e) => {
|
||||
// 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
|
||||
const disX = e.clientX - dialogHeaderEl.offsetLeft + 102;
|
||||
const disY = e.clientY - dialogHeaderEl.offsetTop + 14;
|
||||
const disY = e.clientY - dialogHeaderEl.offsetTop + 10;
|
||||
// 获取到的值带px 正则匹配替换
|
||||
let styL, styT;
|
||||
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
||||
@ -26,7 +26,7 @@ Vue.directive('aplayerDrag', {
|
||||
styL = +sty.left.replace(/\px/g, '')+binding.value.x;
|
||||
styT = +sty.top.replace(/\px/g, '')+binding.value.y;
|
||||
};
|
||||
console.log('styL',styL,'styT',styT,'disX',disX,'disY',disY)
|
||||
// console.log('styL',styL,'styT',styT,'disX',disX,'disY',disY)
|
||||
// 鼠标拖拽事件
|
||||
document.onmousemove = function (e) {
|
||||
// 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
|
||||
@ -54,6 +54,9 @@ Vue.directive('aplayerDrag', {
|
||||
document.onmouseup = function (e) {
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
// e.preventDefault()
|
||||
// e.stopPropagation()
|
||||
return false
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user