lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛fix(audio): 修复音乐播放时不能拖动进度条和音量的问题

Browse Source
This commit is contained in:
jmal 2021-04-24 17:54:10 +08:00
parent 3881a69eab
commit 56282cd545
4 changed files with 45 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -15,6 +15,7 @@
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
},
"dependencies": {
"@moefe/vue-aplayer": "^2.0.0-beta.5",
"ant-design-vue": "^1.6.5",
"clipboard": "^2.0.6",
"cropperjs": "^1.5.6",

10
public/index.html
View File

@ -18,20 +18,20 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.js"></script>
<!--element-ui.js-->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<!--pl-table.js-->
<link rel="stylesheet" href="https://unpkg.com/pl-table@2.7.5/themes/index.css">
<script src="https://unpkg.com/pl-table@2.7.5/lib/index.js"></script>
<!--viewer css-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.7.1/viewer.min.css">
<!--vue-aplayer-->
<script src="//cdn.jsdelivr.net/npm/vue-aplayer"></script>
<!--vue-aplayer-theme-->
<script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
</head>
<body>
<noscript>

66
src/components/preview/AudioPreview.vue
View File

@ -1,19 +1,19 @@
<template>
<div ref="audioPreview" v-if="show">
<div class="audio-player"
v-aplayerDrag="{ x: transformX, y: transformY }"
v-aplayerDrag="{ x: transformX, y: transformY }"
@mouseenter="closeBarShow = true" @mouseleave="closeBarShow = false" @touchmove="closeBarShow = true" @touchend="touchend">
<aplayer
<a-player
ref="audioPlayer"
autoplay
listFolded
loop.sync="all"
order.sync="list"
:mini.sync="mini"
:music.sync="music"
:list="list"
:lrc-type="0">
</aplayer>
:audio="list"
:lrc-type="0"
>
</a-player>
<div v-show="closeBarShow" class="close-bar" @click="close">
<svg-icon class="audio-player-close" icon-class="close"/>
</div>
@ -36,19 +36,12 @@ export default {
data() {
return {
pc: this.$pc,
transformX: !this.$pc ? 20: (document.body.clientWidth-500)/2,
transformY: 0,
transformX: !this.$pc ? document.body.clientWidth - 100: (document.body.clientWidth-500)/2,
transformY: !this.$pc ? document.body.clientHeight/2 - 100 : 0,
show: false,
closeBarShow: false,
music: {
id: '',
src: '', // 音频文件的 URL
title: '', // 歌曲名称
artist: '', // 演唱者
pic: '', // 封面图片 URL
lrc: '', // LRC 歌词或者歌词文件的 URL
theme: '', // 歌曲的主题色，会覆盖播放器的主题色
},
// api ==> https://aplayer.netlify.app/docs/guide/options.html#volume
audios: [],
list: [],
mini: !this.$pc,
audioPlayerDoc: undefined
@ -65,31 +58,40 @@ export default {
},
mounted() {
Bus.$on('onAddAudio',(newFile, audioCoverUrl) => {
this.show = true
if (!this.show) {
this.show = true
}
let url = fileConfig.previewUrl(this.$store.state.user.name, newFile, this.$store.getters.token)
if(!this.$store.state.user.token){
url = fileConfig.publicPreviewUrl(newFile.id, window.shareId);
}
let music = newFile.music
let fileName = newFile.name.substring(0,newFile.name.length - newFile.suffix.length-1)
this.music = {
let musicOperation = {
id: newFile.id,
src: url,
title: music.songName ? music.songName : fileName,
url: url,
name: music.songName ? music.songName : fileName,
artist: music.songName ? music.singer : fileName,
pic: music.songName ? audioCoverUrl+newFile.id :'',
lrc: '',
theme: 'pic'
cover: music.songName ? audioCoverUrl+newFile.id :'',
type: newFile.contentType
}
let musicIndex = this.list.findIndex(item => item.id === newFile.id)
let musicIndex = this.audios.findIndex(item => item.id === newFile.id)
if(musicIndex < 0){
this.list.push(this.music)
this.$nextTick(()=>{
this.$refs.audioPlayer.play()
})
if(this.audios.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.audios.push(musicOperation)
setTimeout(() => {
this.list = this.audios
setTimeout(() => {
this.$refs.audioPlayer.switch(this.audios.length - 1)
}, 0)
}, 0)
} else {
let listMusic = this.audioPlayerDoc.querySelectorAll('.aplayer-list ol li')[musicIndex]
listMusic.click()
this.$refs.audioPlayer.switch(musicIndex)
}
})
},
@ -98,7 +100,7 @@ export default {
this.show = false
this.audioPlayerDoc = undefined
this.$refs.audioPlayer.pause()
this.list.splice(0, this.list.length)
this.audios.splice(0, this.audios.length)
},
touchend() {
const that = this

9
src/main.js
View File

@ -37,10 +37,11 @@ Vue.use(EVueContextmenu)
Vue.use(vant.ImagePreview)
Vue.component('Aplayer', VueAPlayer)
VueAPlayer.disableVersionBadge = true
Vue.config.productionTip = false
import APlayer from '@moefe/vue-aplayer';
Vue.use(APlayer, {
defaultCover: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60',
productionTip: false, // 是否在控制台输出版本信息
});
new Vue({
el: '#app',