dreamland/lib/dever/components/audio.nvue

<template name="dever-audio">
	<view class="control">
		<view @click="open">
			<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="audio" v-if="durationTime">
			<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>
	</view>
</template>

<script>
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'
		},
	},
	data() {
		return {
			objectFit : 'fill',
			play : false,
			playButton : false,
			audio : false,
			currentTime: '', //当前播放时间
			duration:'',
			durationTime: '', //总时长
			current: '', //slider当前进度
			loading: false, //是否处于读取状态
			paused: true, //是否处于暂停状态
			seek: false //是否处于拖动状态
		};
	},
	watch: {
		//监听总时长改变
		duration(e) {
			//this.durationTime = this.format(e)
		},
		//监听当前进度改变
		current(e) {
			this.currentTime = this.format(e)
		}
	},
	mounted() {
		this.audio = uni.createInnerAudioContext();
		this.audio.src = this.src;
		this.audio.loop = this.loop;
		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;
		})
	},
	methods:{
		start : function()  {
			this.$emit('update:load', true);
			this.audio.play();
			this.play = true;
			this.playButton = true;
		},
		stop : function() {
			this.audio.pause();
			this.play = false;
			this.playButton = false;
		},
		open : function()  {
			if (!this.play) {
				this.start();
			} else {
				this.stop(true);
			}
		},
		//格式化时长
		format(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(e) {
			this.audio.seek(e.detail.value)
		}
	},
}
</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: 30rpx;
	background: #fff;
	border-radius: 20rpx;
	position: relative;
	z-index: 10;
	background: transparent;
	top: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;
}
.ico-music-play{
  background: url(http://www.huoxingkandiqiu.com/files/img/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>