dreamland/lib/dever/components/audio.nvue

<template name="dever-audio">
	<view class="control">
		<view>
			<bing-lyric :lyrics="lyrics" :centerStyle="centerStyle" :curTime="currentTimeSecond" :areaStyle="cuAreaStyle" :selectControlStyle="selectControlStyle" :lyricStyle="lyricStyle"
					 @centerBtnClick="centerBtnClick" @copyLyrics="copy"></bing-lyric>
		</view>
		
		<view class="audio">
			<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">
				<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>
				
				<cover-image class="image" @click="last" src="@/static/music/last.png" mode="aspectFit"></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>
				
				<cover-image class="image" @click="next" src="@/static/music/next.png" mode="aspectFit"></cover-image>
			</view>
		</view>
	</view>
</template>

<script>
import bingLyric from '@/lib/bing-lyric/bing-lyric.vue'
import copyText from "@/lib/clipboard.thorui.js"; 
export default {
	name: "dever-audio",
	props: {
		src : {
			type    : String,
			value	: null
		},
		loop : {
			type    : Boolean,
			value	: false
		},
		pic : {
			type    : String,
			value	: null
		},
		auto : {
			type    : Boolean,
			value	: false
		},
		control : {
			type    : Boolean,
			value	: false
		},
		color: {
			type:String,
			default:'#169af3'
		},
		title : '',
		singer : '',
		lrc : '',
		lrc_color : '',
		lrc_atcolor : '',
		recycle : '',
	},
	components:{
		bingLyric
	},
	data() {
		return {
			objectFit : 'fill',
			play : false,
			playButton : false,
			audio : false,
			recycleStatus : false,
			top : 0,//图片位置
			currentTime: '', //当前播放时间
			duration:'',
			durationTime: '', //总时长
			current: '', //slider当前进度
			loading: false, //是否处于读取状态
			paused: true, //是否处于暂停状态
			seek: false ,//是否处于拖动状态
			currentTimeSecond: 0,//当前播放秒数
			centerStyle: {
				btnImg: '../../static/music/btn.png',
			},
			lyricStyle: {
				color: this.lrc_color ,//歌词颜色,
				activeColor: this.lrc_atcolor ,//当前播放的歌词的颜色,
				fontSize: '16px' ,//歌词字体尺寸
				activeFontSize: '16px' ,//当前播放的歌词的字体尺寸
				lineHeight: '40px' ,//每句歌词的显示区域的高度 以此来调整歌词间距
				activeLineHeight: '32px' ,//当前播放歌词的显示区域的高度
				selectedBGColor: 'inherit' ,//进入歌词选择模式时，被选择的歌词背景颜色
			},
			cuAreaStyle: {
				width: '100vw',
				height: '100vh',
				background : 'url('+this.pic+')',
			},
			selectControlStyle : {
				color : 'white',
				itemBackgroundColor : '#333333',
				backgroundColor : 'rgba(0,0,0,0)',
			},
			lyrics: [],
			
		};
	},
	watch: {
		//监听总时长改变
		duration(e) {
			//this.durationTime = this.format(e)
		},
		//监听当前进度改变
		current(e) {
			this.currentTime = this.format(e)
			this.currentTimeSecond = e;
		}
	},
	mounted() {
		
		//考虑换成getBackgroundAudioManager()
		if (this.Dever.source == 'h5') {
			this.audio = uni.createInnerAudioContext()
		} 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.recycleStatus = this.recycle;
		if (!this.lrc) {
			this.lyrics = [];
			this.top = '0';
		} else {
			this.lyrics = this.lrc;
			this.top = '0';
		}
		
		this.current = 0;
		this.audio.obeyMuteSwitch = false;
		this.audio.autoplay = this.auto;
		//音频进度更新事件
		this.audio.onTimeUpdate(() => {
			if (!this.seek) {
				this.current = this.audio.currentTime;
			}
			if (!this.durationTime) {
				this.duration = this.audio.duration;
				this.durationTime = this.format(this.audio.duration);
			}
		})
		//音频完成更改进度事件
		this.audio.onSeeked(() => {
			this.seek = false;
		})
		//音频播放完成事件
		this.audio.onEnded(() => {
			if (this.recycleStatus) {
				// 播放下一曲
				this.next();
			} else {
				this.play = false;
				this.playButton = false;
				this.audio.seek(0);
				this.start();
			}
		});
	},
	methods:{
		start : function()  {
			this.$emit('update:load', true);
			if (!this.play) {
				this.audio.play();
				this.play = true;
				this.playButton = true;
			}
		},
		stop : function() {
			if (this.play) {
				this.audio.pause();
				this.play = false;
				this.playButton = false;
			}
		},
		open : function()  {
			if (!this.play) {
				this.start();
			} else {
				this.stop(true);
			}
		},
		//上一曲
		last : function() {
			this.$emit('last');
		},
		//下一曲
		next : function() {
			this.$emit('next');
		},
		//多曲循环播放
		setRecycle : function() {
			this.recycleStatus = !this.recycleStatus;
			this.$emit('setRecycle');
		},
		//格式化时长
		format : function(num) {
			return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(
				Math.floor(num % 60)).length) + Math.floor(num % 60)
		},
		//完成拖动事件
		change : function(e) {
			this.audio.seek(e.detail.value)
		},
		copy : function(e) {
			var self = this;
			var value = '';
			for (var i in e.lyrics) {
				value += e.lyrics[i] + "\r\n";
			}
			copyText.getClipboardData(value, function(res) {
				if (res) {
					self.Dever.alert('复制成功');
				} else {
					self.Dever.alert('复制失败');
				}
			});
		},
		centerBtnClick : function(e) {
			this.currentTimeSecond = e.centerTime
			this.audio.seek(this.currentTimeSecond);
		},
	},
}
</script>
<style scoped>
.control {
	width: 100%;
	height: 100%;
	z-index: 2;
	background: transparent;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}
.poster{
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.audio {
	padding: 24rpx;
	background: #fff;
	border-radius: 20rpx;
	position: absolute;
	z-index: 100;
	background: #666666;
	background: hsla(0,0%,100%,.6);
	
	bottom: 10rpx;
	left: 20rpx;
	width: 78%;
}

.audio-wrapper {
	display: flex;
	align-items: center;
}

.audio-number {
	font-size: 24rpx;
	line-height: 1;
	color: #333;
	color: #fff;
}

.audio-slider {
	flex: 1;
	margin: 0 30rpx;
}
.audio-controll {
	display: flex;
	justify-content: space-around;
	margin-top: 26rpx;
}
.audio-controll .image {
	display: inline-block;
	height: 30rpx;
	width: 30rpx;
}
</style>