|
|
@@ -1,18 +1,25 @@
|
|
|
<template name="dever-audio">
|
|
|
<view class="control">
|
|
|
- <view>
|
|
|
+ <view v-if="lrc">
|
|
|
<bing-lyric :lyrics="lyrics" :centerStyle="centerStyle" :curTime="currentTimeSecond" :areaStyle="cuAreaStyle" :selectControlStyle="selectControlStyle" :lyricStyle="lyricStyle"
|
|
|
@centerBtnClick="centerBtnClick" @copyLyrics="copy"></bing-lyric>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="!lrc">
|
|
|
+ <cover-image :src="pic" mode="widthFix" ></cover-image>
|
|
|
+
|
|
|
+ <cover-image class="image" v-if="!play" @click="open" src="@/static/music/play.png" mode="aspectFit"></cover-image>
|
|
|
+ <cover-image class="image" v-if="play" @click="open" src="@/static/music/pause.png" mode="aspectFit"></cover-image>
|
|
|
</view>
|
|
|
|
|
|
- <view class="audio">
|
|
|
+ <view :class="audioClass">
|
|
|
<view class="audio-wrapper">
|
|
|
<view class="audio-number">{{currentTime}}</view>
|
|
|
<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value"
|
|
|
@change="change"></slider>
|
|
|
<view class="audio-number">{{durationTime}}</view>
|
|
|
</view>
|
|
|
- <view class="audio-controll">
|
|
|
+ <view class="audio-controll" v-if="lrc">
|
|
|
<cover-image class="image" v-if="!recycleStatus" @click="setRecycle" src="@/static/music/recycle.png" mode="aspectFit"></cover-image>
|
|
|
|
|
|
<cover-image class="image" v-if="recycleStatus" @click="setRecycle" src="@/static/music/recycled.png" mode="aspectFit"></cover-image>
|
|
|
@@ -75,7 +82,7 @@ export default {
|
|
|
playButton : false,
|
|
|
audio : false,
|
|
|
recycleStatus : false,
|
|
|
- top : 0,//图片位置
|
|
|
+ audioClass : 'audio-lrc',
|
|
|
currentTime: '', //当前播放时间
|
|
|
duration:'',
|
|
|
durationTime: '', //总时长
|
|
|
@@ -126,27 +133,29 @@ export default {
|
|
|
//考虑换成getBackgroundAudioManager()
|
|
|
if (this.Dever.source == 'h5') {
|
|
|
this.audio = uni.createInnerAudioContext()
|
|
|
+ this.audio.src = this.src;
|
|
|
+ this.audio.obeyMuteSwitch = false;
|
|
|
+ this.audio.autoplay = this.auto;
|
|
|
+ //this.audio.loop = this.loop;
|
|
|
} else {
|
|
|
this.audio = uni.getBackgroundAudioManager()
|
|
|
this.audio.title = this.title;
|
|
|
this.audio.singer = this.singer;
|
|
|
this.audio.coverImgUrl = this.pic;
|
|
|
- }
|
|
|
-
|
|
|
- this.audio.src = this.src;
|
|
|
- //this.audio.loop = this.loop;
|
|
|
+ this.audio.src = this.src;
|
|
|
+ }
|
|
|
+
|
|
|
this.recycleStatus = this.recycle;
|
|
|
if (!this.lrc) {
|
|
|
this.lyrics = [];
|
|
|
- this.top = '0';
|
|
|
+ this.audioClass = 'audio';
|
|
|
} else {
|
|
|
this.lyrics = this.lrc;
|
|
|
- this.top = '0';
|
|
|
+ this.audioClass = 'audio-lrc';
|
|
|
}
|
|
|
|
|
|
this.current = 0;
|
|
|
- this.audio.obeyMuteSwitch = false;
|
|
|
- this.audio.autoplay = this.auto;
|
|
|
+
|
|
|
//音频进度更新事件
|
|
|
this.audio.onTimeUpdate(() => {
|
|
|
if (!this.seek) {
|
|
|
@@ -259,7 +268,7 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
-.audio {
|
|
|
+.audio-lrc {
|
|
|
padding: 24rpx;
|
|
|
background: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
@@ -273,6 +282,19 @@ export default {
|
|
|
width: 78%;
|
|
|
}
|
|
|
|
|
|
+.audio {
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ background: transparent;
|
|
|
+
|
|
|
+ bottom: 0rpx;
|
|
|
+ left: 0rpx;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
.audio-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
dever