dreamland/lib/dever/components/audio.nvue

<template name="dever-audio">
	<view class="control">
		<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 @click="open" v-if="!lrc">
			<cover-image v-if="pic" class="poster" :src="pic" mode="aspectFill" style="height:auto">
			</cover-image>
			
			<cover-image
			class="ico-music-playing" v-if="playButton"></cover-image>
			
			<cover-image
			class="ico-music-play" v-if="!playButton"></cover-image>
		</view>
		
		<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" 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>
				
				<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 {
			time : {},
			objectFit : 'fill',
			play : false,
			playButton : false,
			audio : false,
			recycleStatus : false,
			audioClass : 'audio-lrc',
			currentTime: '', //当前播放时间
			duration:'',
			durationTime: '', //总时长
			current: 0, //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;
			this.timeUpdate(this.currentTimeSecond);
		}
	},
	mounted() {
		
		//考虑换成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.recycleStatus = this.recycle;
		if (!this.lrc) {
			this.lyrics = [];
			this.audioClass = 'audio';
		} else {
			if (this.lrc.length > 0) {
				this.lyrics = this.lrc;
			} else {
				this.lyrics = [];
			}
			
			this.audioClass = 'audio-lrc';
		}
		
		this.current = 0;
		
		//音频进度更新事件
		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.Dever.bgm().stop();
				this.audio.play();
				this.play = true;
				this.playButton = true;
				this.$emit('play', 'start');
			}
		},
		stop : function() {
			if (this.play) {
				this.audio.pause();
				this.play = false;
				this.playButton = false;
				this.$emit('play', 'stop');
			}
		},
		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);
		},
		timeUpdate : function(time) {
			if (this.play == true) {
				var currentTime = time;
				currentTime = parseInt(currentTime);
				if (!this.time[currentTime]) {
					this.time[currentTime] = currentTime;
					this.$emit('play', 'time', [this, currentTime]);
				}
			}
		}
	},
}
</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-lrc {
	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 {
	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;
}

.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;
}
.ico-music-play{
  background: url(@/static/music/speaker.png) no-repeat;
  background-size: cover;
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
}
.ico-music-playing{
  background: url(data:image/gif;base64,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) no-repeat;
  background-size: cover;
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
}
</style>