newEdition/components/yz-audio/yz-audio.vue

<template>
	<view class="imt-audio">
		<template>
			<view class="top">
				<view class="audio-control-wrapper">
					<!-- <image :src="poster" mode="aspectFill" class="cover"></image> -->
					<image :src="require('./static/loading.png')" v-if="playState=='loading'" class="play loading">
					</image>
					<template v-else>
						<image :src="require('./static/playbtn.png')" alt="play" @click="play" class="play"
							v-if="playState=='pause'"></image>
						<image :src="require('./static/pausebtn.png')" alt="pause" @click="pause" class="play" v-else>
						</image>
					</template>
				</view>
			</view>
			<view class="audio-wrapper">
				<view class="audio-flex">
					<text>
						{{formatSeconds(currentTime)}}
					</text>
					<slider class="audio-slider" block-size="12" :max="duration" :value="currentTime"
						@change="sliderChange" @changing="sliderChanging"></slider>
					<text>
						{{formatSeconds(duration)}}
					</text>
				</view>

				<view class="slidebox">
					<slot name="extraCtrls">
						<text class="hItem extrButton" @click="$emit('Button1Click')"
							v-show="isButton1Visible">{{button1Text}}</text>
						<text class="hItem extrButton" @click="$emit('Button2Click')"
							v-show="isButton2Visible">{{button2Text}}</text>
						<text class="hItem extrButton" @click="$emit('Button3Click')"
							v-show="isButton3Visible">{{button3Text}}</text>
					</slot>
				</view>
			</view>
			<!--video在ios中不能完全隐藏，否则无法播放-->
			<video id="videoPlayer" class="videoPlayer" :src="src" autoplay="true" :muted="false" style="width: 10rpx;height:10rpx;"
				@play="playerOnPlay" @pause="playerOnPause" @ended="playerOnEnded" @timeupdate="playerOnTimeupdate"
				@waiting="playerOnWaiting" @error="playerOnError"></video>
		</template>
	</view>
</template>

<script>
	/*
	createInnerAudioContext()是audio组件的内部实现，不能熄屏播放、不能后台播放、不能倍速播放。
	getBackgroundAudioManager() 可以熄屏播放、后台播放，不能倍速播放。缺点是响应速度很慢，无法实现精细、及时的进度控制，而且可能被别的程序占用。
	因此这里只能用video来实现，video能倍速播放，不能熄屏播放、不能后台播放。而且避免了用createInnerAudioContext()实现的跳转到别的页面，还在播放的问题
	因此应用程序可以在需要后台播放的时候（需要用户操作触发），再暂停这个控件的播放，然后自己用getBackgroundAudioManager实现后台播放
	*/

	import Vue from 'vue';
	export default {
		props: {
			isButton1Visible: {
				type: Boolean,
				default: false
			},
			button1Text: {
				type: String,
				default: ''
			},
			isButton2Visible: {
				type: Boolean,
				default: false
			},
			button2Text: {
				type: String,
				default: ''
			},
			isButton3Visible: {
				type: Boolean,
				default: false
			},
			button3Text: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				src: "",
				poster: "",
				name: "...",
				singer: "...",
				duration: 0,
				currentTime: 0,
				playState: "pause", //"loading"/"playing"/"pause"
				isSliderChanging: false,
			};
		},
		created: function() {
			//自定义组件，需要传递第二个参数为this，否则后续的pause等操作不起作用
			this.videoCtx = uni.createVideoContext("videoPlayer", this);
		},
		methods: {
			setSrc: function(value) {
				this.src = value;
			},
			setPoster: function(value) {
				this.poster = value;
			},
			setName: function(value) {
				this.name = value;
			},
			setSinger: function(value) {
				this.singer = value;
			},
			playerOnPlay: function(e) {
				this.playState = "playing";
				this.$emit("play");
			},
			playerOnPause: function(e) {
				this.playState = "pause";
				this.$emit("pause");
			},
			playerOnEnded: function(e) {
				this.playState = "pause";
				this.$emit("ended");
			},
			playerOnTimeupdate: function(e) {
				this.playState = "playing";
				this.duration = e.detail.duration;
				this.currentTime = e.detail.currentTime;
				this.$emit("timeUpdate", e.detail);
			},
			playerOnWaiting: function(e) {
				this.playState = "loading";
				
			},
			playerOnError: function(e) {
				uni.showToast({
					title: "播放出错" + e
				});
				this.playState = "pause";
				this.$emit("error", e);
			},
			formatSeconds(seconds) {
				var result = typeof seconds === "string" ? parseFloat(seconds) : seconds;
				if (isNaN(result)) return "";
				let h = Math.floor(result / 3600) < 10 ?
					"0" + Math.floor(result / 3600) :
					Math.floor(result / 3600);
				let m = Math.floor((result / 60) % 60) < 10 ?
					"0" + Math.floor((result / 60) % 60) :
					Math.floor((result / 60) % 60) + h * 60;
				let s = Math.floor(result % 60) < 10 ?
					"0" + Math.floor(result % 60) :
					Math.floor(result % 60);
				return `${m}:${s}`;
			},
			stop: function() {
				this.videoCtx.stop();
			},
			seek: function(t) {
				this.videoCtx.seek(t);
			},
			play: function() {
				var that = this;
				this.videoCtx.play(); //在有的H5浏览器里，如果play不是用户触发的，则play()会报错

			},
			pause: function() {
				this.videoCtx.pause();
			},
			playbackRate: function(value) {
				this.videoCtx.playbackRate(value);
				//playbackRate不能在play之前或者之后立即调用，否则只有很少几率会成功
			},
			sliderChange: function(e) {
				this.isSliderChanging = false;
				//要通过e.detail.value获取，否则如果通过dom去读取slider的value
				//就会存在滚动条拖不动的情况
				this.videoCtx.seek(e.detail.value);
				this.$emit('sliderChangeComplate', e)
			},
			sliderChanging(e) {
				this.isSliderChanging = true;
				console.log(e, '当前正在改变')
			},
		},
	}
</script>

<style lang="scss">
	// @import './index.scss';
	@mixin textoverflow() {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	@keyframes rowup {
		0% {
			-webkit-transform: translate(-50%, -50%) rotate(0deg);
			transform-origin: center center;
		}

		100% {
			-webkit-transform: translate(-50%, -50%) rotate(360deg);
			transform-origin: center center;
		}
	}

	.imt-audio {
		position: relative;
		width: 100%;
		height: 81rpx;
		display: flex;
		box-sizing: border-box;
		background: #fff;
		overflow: hidden;

		.top {
			position: relative;
			width: 100rpx;
		}

		.audio-wrapper {
			display: flex;
			flex-direction: column;
			flex: 1;
			color: #fff;
			margin-left: 20rpx;
		}

		.slidebox {
			display: flex;
			justify-content: space-between;
			width: 96%;
		}

		/deep/ .uni-slider-tap-area {
			padding: 0;
		}

		/deep/ .uni-slider-wrapper {
			min-height: 0;
		}

		/deep/ .uni-slider-handle-wrapper {
			height: 6px;
		}

		.audio-slider {
			flex-grow: 1;
		}

		.play {
			width: 48rpx;
			height: 48rpx;
			z-index: 99;
			background: rgba(0, 0, 0, 0.4);
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			&.loading {
				width: 48rpx;
				height: 48rpx;
				animation: rotating_theme3 2s linear infinite;
			}
		}
	}
	
	.audio-flex {
		padding: 0 32rpx 0 0;
		display: flex;
		align-items: center;
		
		text {
			color: #70798D;
		}
	}

	@keyframes rotating {
		0% {
			transform: rotateZ(0deg)
		}

		100% {
			transform: rotateZ(360deg)
		}
	}

	@keyframes rotating_theme3 {
		0% {
			transform: translate(-50%, -50%) rotateZ(0deg)
		}

		100% {
			transform: translate(-50%, -50%) rotateZ(360deg)
		}
	}

	.hItem {
		margin-left: 16rpx;
	}

	.extrButton {
		font-size: 36rpx;
	}

	.videoPlayer {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: -1;
	}
</style>