From 98b49c470e0130efb09e07e2f57ac98035b583fb Mon Sep 17 00:00:00 2001
From: douzhuo <17611323298@163.com>
Date: Tue, 22 Mar 2022 19:51:24 +0800
Subject: [PATCH] init test

---
 components/yz-audio/audioBg.js          |  87 +++++
 components/yz-audio/index.scss          | 119 +++++++
 components/yz-audio/static/backimg.png  | Bin 0 -> 594 bytes
 components/yz-audio/static/bg.png       | Bin 0 -> 1871 bytes
 components/yz-audio/static/bg_act.png   | Bin 0 -> 1994 bytes
 components/yz-audio/static/loading.png  | Bin 0 -> 331 bytes
 components/yz-audio/static/loading2.png | Bin 0 -> 333 bytes
 components/yz-audio/static/pausebtn.png | Bin 0 -> 189 bytes
 components/yz-audio/static/playbtn.png  | Bin 0 -> 274 bytes
 components/yz-audio/yz-audio.vue        | 432 ++++++++++++++++++++++++
 store/index.js                          |  54 +++
 11 files changed, 692 insertions(+)
 create mode 100644 components/yz-audio/audioBg.js
 create mode 100644 components/yz-audio/index.scss
 create mode 100644 components/yz-audio/static/backimg.png
 create mode 100644 components/yz-audio/static/bg.png
 create mode 100644 components/yz-audio/static/bg_act.png
 create mode 100644 components/yz-audio/static/loading.png
 create mode 100644 components/yz-audio/static/loading2.png
 create mode 100644 components/yz-audio/static/pausebtn.png
 create mode 100644 components/yz-audio/static/playbtn.png
 create mode 100644 components/yz-audio/yz-audio.vue
 create mode 100644 store/index.js

diff --git a/components/yz-audio/audioBg.js b/components/yz-audio/audioBg.js
new file mode 100644
index 0000000..e9507fd
--- /dev/null
+++ b/components/yz-audio/audioBg.js
@@ -0,0 +1,87 @@
+import {
+	mapState,
+	mapActions,
+	mapMutations
+} from 'vuex'
+export const audios = {
+	data() {
+		return {
+			isBgPlay: false, // 是否禁止拖拽进度条
+		}
+	},
+
+	computed: {
+		...mapState(['bgAudioMannager']),
+	},
+
+	methods: {
+		setAudio(obj) {
+			this.bgAudioMannager.title = '录音音频';
+			this.bgAudioMannager.src = obj.src
+			this.bgAudioMannager.startTime = obj.currentTime
+		},
+
+		setAudioFunc() {
+			this.bgAudioMannager.onCanplay(() => {
+				console.log('可以播放');
+			});
+			this.bgAudioMannager.onStop(() => {
+				console.log('停止播放');
+				this.isBgPlay = false
+			});
+
+			this.bgAudioMannager.onPause(() => {
+				console.log('暂停播放');
+				this.isBgPlay = false
+				// 设置当前暂停的视频播放位置
+				// this.seek(this.bgAudioMannager.currentTime)
+				// this.play()
+			});
+			
+			this.bgAudioMannager.onEnded(() => {
+				console.log('自然播放结束事件');
+				this.isBgPlay = false
+			});
+			
+			this.bgAudioMannager.onError((res) => {
+				console.log(res.errMsg);
+				console.log(res.errCode);
+			});
+
+			this.bgAudioMannager.onTimeUpdate(() => {
+				this.isBgPlay = true
+				this.duration = this.bgAudioMannager.duration;
+				this.currentTime = this.bgAudioMannager.currentTime;
+				this.$emit('timeUpdate', {
+					duration: this.bgAudioMannager.duration,
+					currentTime: this.bgAudioMannager.currentTime
+				})
+			});
+		},
+		
+		// 背景音频暂停
+		audioPause() {
+			this.bgAudioMannager.pause()
+		},
+		
+		// 背景音频播放
+		audioPlay() {
+			this.pause()
+			this.bgAudioMannager.play()
+		},
+		
+		//背景音频指定秒数播放
+		audioSeek(t) {
+			this.bgAudioMannager.seek(t)
+		},
+		
+		// 停止背景音频播放
+		stopAduio() {
+			console.log(this.bgAudioMannager)
+			this.bgAudioMannager.pause()
+			if (this.bgAudioMannager && this.bgAudioMannager.src) {
+				this.bgAudioMannager.src = ''
+			}
+		}
+	}
+}
diff --git a/components/yz-audio/index.scss b/components/yz-audio/index.scss
new file mode 100644
index 0000000..53c375b
--- /dev/null
+++ b/components/yz-audio/index.scss
@@ -0,0 +1,119 @@
+@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%;
+	display: flex;
+	box-sizing: border-box;
+	background: #fff;
+	overflow: hidden;
+	
+	.top {
+		width: 140rpx;
+		position: relative;
+	}
+
+	.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 {
+		padding-top: 10rpx;
+		margin-left: 150rpx;
+		position: absolute;
+		bottom: 40rpx;		
+		width: 75vw;
+		left: 0;
+		padding: 0;
+	}
+	
+
+	// .cover {
+	// 	width: 120rpx;
+	// 	height: 120rpx;
+	// 	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+	// 	position: absolute;
+	// 	top: 50%;
+	// 	left: 50%;
+	// 	transform: translate(-50%, -50%);
+	// 	animation-fill-mode: forwards;
+	// 	-webkit-animation-fill-mode: forwards;
+	// }
+
+	.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;
+		}
+	}
+}
+
+@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;
+}
\ No newline at end of file
diff --git a/components/yz-audio/static/backimg.png b/components/yz-audio/static/backimg.png
new file mode 100644
index 0000000000000000000000000000000000000000..fef382f116185b30f28f34dc2e04629f68bbf7d1
GIT binary patch
literal 594
zcmV-Y0<HatP)<h;3K|Lk000e1NJLTq002M$000mO1^@s6rssJn00001b5ch_0Itp)
z=>Px%3`s;mR9Hvtmp_OTK@`T{mkn4bihl@*Rza=Q!Z*nlf^daGU<<EQ{KIKuAt+Yb
zZKst8T3mA;cZe1#&LR-dMuaOi%vhY-sHGwVJyEn!viW2~PL5!_Nv?Bm+V}h3d-KiA
z&MYM71B3Hd)d>J+NgfuF%>X`-d@3T-&bhDa^(&6!LZi_*Lvj+pzAPWfcK{ZmD0&db
zad*8nRCSw(Tmo>M<Q@_E0bof)=B>5QR_Fg?Kp2Kw(=@$J^5Wkb0PsGGIp>~?+h7=m
z`_nX?C3$p6jm01crjjIiJ8lhCJpo{b<lZ4QW`ZENmL$oyEZ#GqR;z7lx7#fd$yWWJ
z1Hfr(?W480!FV?LPN(xiM7FG<{a!2<kBno2G3FG>haSBxl}e>*v)TOFGeA{uipX^j
zp#WGWdC)oc(TC5N{<eQUY~=^@09cHo=-4R7K~;B)$ZHYV?%CHZ=iCicDwQ(HHzWg3
zVP?Xtwf2H9Z;Uxda?Y3UZB5|3wRYZDV~n{^a>|znkODZ68E~cB?cVVf_PH<4xgEY5
zRb3E~lfHbPd+eN>^wp^9@(8QnOIs)uuEH2|m*i#NLMvPl1iM<T)@L7`G3I4<Y<$=i
z2EZ$8?I9mcwOZYors*dib~OXw-i86WKLWY`2<HA8%nZomL#SLXSL*fpuZ^eh;MI}a
gpP^Cj(Eo-14O9zw98BcVg8%>k07*qoM6N<$f}^t&A^-pY

literal 0
HcmV?d00001

diff --git a/components/yz-audio/static/bg.png b/components/yz-audio/static/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..b49474e16c4d52b439cc02f79a2c9d148863391b
GIT binary patch
literal 1871
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
JPDHLkV1kG;NMQf~

literal 0
HcmV?d00001

diff --git a/components/yz-audio/static/bg_act.png b/components/yz-audio/static/bg_act.png
new file mode 100644
index 0000000000000000000000000000000000000000..01b1d6c2da5fced5d570fd2441e2868a1368e616
GIT binary patch
literal 1994
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

literal 0
HcmV?d00001

diff --git a/components/yz-audio/static/loading.png b/components/yz-audio/static/loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..edd7142de8e5472375f74c11270c4d4c9e96be4a
GIT binary patch
literal 331
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDB3?!H8JlO)I)B}7%T!Hj|BEULZFH4|Oo{}KH
zV1|Y(`&TM2p4#6rcXq9VHy=>^xTlL_h{fsT1-uDC2NV^HCrlG!JR!7(qi|mH2_Yl)
z2SSGFY6>bA=Ve;G4dz)kPIzId++dJ>ZYI+VmftfcdrT{yW63%>qIenO%}CR9Aqj~Y
zyb=;O&dInJ>R+F!EYNm-ChH2jla|a2&&xP}R^q;L-H4B;gtbYbq4jhP8w-zvPl%rI
z3|3Ee4n4ocFSsHW9Mn@j(4c(d;w3S2r9}&(1OmA|-{!1{vN$)VO|{L|KzGJTb`K$s
sf*GDu92Olr!&Y*-nS;UatqCJToOf8HUY^M=pqCgtUHx3vIVCg!0LPw(3;+NC

literal 0
HcmV?d00001

diff --git a/components/yz-audio/static/loading2.png b/components/yz-audio/static/loading2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3483c9de5dde14271aa5948da74280a9f635783b
GIT binary patch
literal 333
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDB3?!H8JlO)I)B}7%T!HlT>C<Pyz)TDPlmUtz
zc_0KbgQq0OFPNd>%Knx0%8Tbr?eAdzlaT`yKk4b>7-Dfcc>!-i&;doo;tA7)I8O-W
za1_p4d_u^O{eh5Wx|xE?j`K3j-W%pwwoZsBR%1xKHqTf%L1<38pK|26(q}9_i=Llh
zN=ZL!8GPWtfgB*Nd#2J=ZFx?n(V*s>$%0=?p7FHU70aCM)(MC|ZDDXhl%t73Oz*R#
zfB}PH;7*?eF%?;b9TvTdv=bWHcK0wa_a)e$XwY8tAW9(c^b&@yTZ?&i2stw_e|yrr
zrd3e)prGF(8}^C9ThB1Y+-%6J6kt5Ca;_Q!!|X2+uei6*y94wTgQu&X%Q~loCIFeI
Bfx`d*

literal 0
HcmV?d00001

diff --git a/components/yz-audio/static/pausebtn.png b/components/yz-audio/static/pausebtn.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2bc86cf1406f07591eb276552cb2a509bf17d79
GIT binary patch
literal 189
zcmeAS@N?(olHy`uVBq!ia0vp^O+Z}D#0(^le%P=dNbv;tgt!9f|NsC0{qyhrtFMkh
z+BrZzV@Z%-FoVOh8)-mJyr+v}NW|e}3D(64B0Wuk4q6v_7$*88@>+z(@Y*t{_&ReJ
zXeRLSmNEn_Txhr>#GtKBjbY`=g^Cp+EDdKQLJe0Xg&bYcmAIBEN^Da6Jf%}9N~gXC
i8gRKC)R16RVPZIcBJ#r)Up}Bs3=E#GelF{r5}E*?rah4W

literal 0
HcmV?d00001

diff --git a/components/yz-audio/static/playbtn.png b/components/yz-audio/static/playbtn.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f51b61d3cd72bf3fb5a918138e1261ccdafe038
GIT binary patch
literal 274
zcmeAS@N?(olHy`uVBq!ia0vp^O(4v|3?wUbdCvhU=>VS)S0MfW|NobdKK}jl@8^%-
zUqAkM^Yqh)*I(bi{9@vpI1wn#SQ6wH%;50sMjDW_)YHW=B;(%OYa0cb40&8GN(*_2
z_seomEl^#-;<ZyK#?tkV1J4`%2dr|pFFl-7e9rRuo%3a<8xA?EtHcE*I!bdZuUsG*
za)C>0#fAmFtrJ5o@MvYQiiSj7XvM-=vEjoXriHisi&B2~uKG6Jbn)Nzoww?5iB>$?
z;=lK<-QVyBx+`jh58r<9+u?30+x;_hLH5o0-EJqdU02WATx15&!3>_RelF{r5}E)$
CYj?l^

literal 0
HcmV?d00001

diff --git a/components/yz-audio/yz-audio.vue b/components/yz-audio/yz-audio.vue
new file mode 100644
index 0000000..c246769
--- /dev/null
+++ b/components/yz-audio/yz-audio.vue
@@ -0,0 +1,432 @@
+<template>
+	<view class="imt-audio">
+		<template>
+			<view class="top">
+				<view class="audio-control-wrapper">
+					<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" @click="showTip">
+					<slot name="extraCtrls">
+						<image class="slide-img" :src="require('./static/backimg.png')" mode=""></image>
+					</slot>
+				</view>
+				<!-- 后台播放按钮区域 -->
+				<view class="popup" v-if="show" :class="{close: closeing}" @click="checkPlayer">
+					<template v-if="!isBgPlay">
+						<image :src="require('./static/bg.png')" mode=""></image>
+					</template>
+					<template v-else>
+						<image :src="require('./static/bg_act.png')" mode=""></image>
+					</template>
+					<text :class="{'act-test': isBgPlay}">后台播放</text>
+				</view>
+			</view>
+			<!--video在ios中不能完全隐藏，否则无法播放-->
+			<video id="videoPlayer" :autoplay="true" class="videoPlayer" :src="src" :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';
+	import {
+		mapMutations
+	} from 'vuex'
+	import {
+		audios
+	} from './audioBg.js'
+	export default {
+		mixins: [audios],
+		props: {
+			nowFileTime: {
+				type: [String, Number],
+				default: 0
+			},
+		},
+
+		watch: {
+			nowFileTime(oValue, nValue) {
+				this.duration = nValue
+			}
+		},
+
+		data() {
+			return {
+				src: '', // 
+				poster: "",
+				name: "...",
+				singer: "...",
+				duration: 0,
+				currentTime: 0,
+				playState: "pause", //"loading"/"playing"/"pause"
+				isSliderChanging: false,
+				isFirst: false, // 是否阻止第一次赋值
+				audio: null, // 音频对象
+				show: false, // 控制展示用的
+				closeing: false, //  默认关闭
+			};
+		},
+		created() {
+			// 自定义组件，需要传递第二个参数为this，否则后续的pause等操作不起作用
+			this.videoCtx = uni.createVideoContext("videoPlayer", this);
+			this.audio = uni.createInnerAudioContext();
+			this.audio.autoplay = false;
+			this.createAudio()
+			this.setAudioFunc()
+		},
+
+		mounted() {
+			this.audio.onCanplay((e) => {
+				if (this.audio.duration != 0) {
+					this.playState = "pause"
+					this.$forceUpdate()
+				}
+			})
+		},
+
+		methods: {
+			...mapMutations(['createAudio', 'stopAduio']),
+			setSrc(value) {
+				console.log(this, ' 我打印this')
+				this.src = value;
+				console.log(this.src, '我在这儿里更换src')
+				// 获取当前音频的总时长
+				this.audio.src = value;
+			},
+
+			setPoster(value) {
+				this.poster = value;
+			},
+			setName(value) {
+				this.name = value;
+			},
+			setSinger(value) {
+				this.singer = value;
+			},
+
+			playerOnPlay(e) {
+				this.playState = "playing";
+				console.log('playerOnPlay', e)
+				this.$emit("play");
+			},
+			playerOnPause(e) {
+				this.playState = "pause";
+				console.log('playerOnPause', e)
+				this.$emit("pause");
+			},
+			playerOnEnded(e) {
+				this.playState = "pause";
+				console.log('playerOnEnded', e)
+				this.$emit("ended");
+			},
+
+			playerOnTimeupdate(e) {
+				if (this.isFirst) this.playState = "playing";
+				this.isFirst = true
+				this.duration = e.detail.duration;
+				this.currentTime = e.detail.currentTime;
+				this.$emit("timeUpdate", e.detail);
+			},
+
+			playerOnWaiting(e) {
+				this.playState = "loading";
+				console.log('playerOnWaiting', e)
+			},
+			playerOnError(e) {
+				console.log('playerOnError', 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 `${h}:${m}:${s}`;
+			},
+			stop() {
+				this.videoCtx.stop();
+			},
+			seek(t) {
+				this.videoCtx.seek(t);
+			},
+			play() {
+				// if (this.videoCtx.currentTime != this.videoCtx.currentTime) {
+				// 	this.seek(this.currentTime)
+				// }
+				console.log('触发方法play')
+				this.videoCtx.play(); //在有的H5浏览器里，如果play不是用户触发的，则play()会报错
+				// 暂停后台播放
+				this.stopAduio()
+			},
+			pause() {
+				console.log('触发方法pause')
+				this.videoCtx.pause();
+			},
+			playbackRate(value) {
+				this.videoCtx.playbackRate(value);
+				//playbackRate不能在play之前或者之后立即调用，否则只有很少几率会成功
+			},
+			sliderChange(e) {
+				this.isSliderChanging = false;
+				//要通过e.detail.value获取，否则如果通过dom去读取slider的value
+				//就会存在滚动条拖不动的情况
+				// this.videoCtx.seek(e.detail.value);
+				let type = 'audio'
+				
+				if (this.bgAudioMannager.paused === false) {
+					type = 'bgAudio'
+				}
+				this.$emit('sliderChangeComplate', { ...e, isType: type })
+			},
+			sliderChanging(e) {
+				this.isSliderChanging = true;
+				console.log(e, '当前正在改变')
+			},
+			
+			// 关闭后台播放按钮
+			closeTip() {
+				this.closeing = false
+				setTimeout(() => {
+					this.show = false
+				}, 250)
+			},
+			
+			// 展示后台播放按钮
+			showTip() {
+				this.show = true
+				setTimeout(() => {
+					this.closeing = true
+				}, 50)
+			},
+
+			// 点击后台播放音频事件
+			backAudio() {
+				this.pause()
+				let obj = {
+					src: this.src,
+					currentTime: this.currentTime
+				}
+				this.setAudio(obj)
+			},
+
+			// 切换播放源
+			checkPlayer() {
+				this.closeTip()
+				if (this.bgAudioMannager.paused === false) {
+					this.stopAduio()
+				} else {
+					this.backAudio()
+				}
+			}
+		},
+	}
+</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;
+
+		.top {
+			position: relative;
+			width: 100rpx;
+		}
+
+		.audio-wrapper {
+			position: relative;
+			padding: 0 20rpx;
+			display: flex;
+			flex: 1;
+			color: #fff;
+			
+			.popup {
+				position: absolute;
+				right: 32rpx;
+				top: -122rpx;
+				z-index: 100;
+				width: 136rpx;
+				height: 122rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				background: #fff;
+				border: 1rpx solid #E0E0E0;
+				transition: all 0.25s linear;
+				opacity: 0;
+				
+				image {
+					width: 32rpx;
+					height: 32rpx;
+				}
+				
+				text {
+					margin-top: 10rpx;
+					color: #333;
+					font-size: 24rpx;
+				}
+				
+				.act-test {
+					color: #2671E2;
+				}
+			}
+			
+			.close {
+				opacity: 1;
+			}
+		}
+
+		.slidebox {
+			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+			
+			.slide-img {
+				width: 32rpx;
+				height: 8rpx;
+			}
+		}
+
+		/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;
+		flex-grow: 1;
+		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>
diff --git a/store/index.js b/store/index.js
new file mode 100644
index 0000000..ee53307
--- /dev/null
+++ b/store/index.js
@@ -0,0 +1,54 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+	state: {
+		bgAudioMannager: null,
+	},
+	
+	mutations: {
+		createAudio(state) {
+			state.bgAudioMannager = uni.getBackgroundAudioManager();
+		},
+		
+		setSeekAudio(state, t) {
+			state.bgAudioMannager.seek(t)
+		},
+		
+		// 加载音频监听方法
+		initAudioMethod (state, obj) {
+			state.bgAudioMannager.onCanplay(() => {
+				state.bgAudioMannager.currentTime = obj.currentTime
+			});
+			state.bgAudioMannager.onStop(() => {
+				console.log('停止播放');
+			});
+			
+			state.bgAudioMannager.onPause(() => {
+				console.log('暂停播放');
+			});
+			state.bgAudioMannager.onEnded(() => {
+				//初始化 需要的参数
+				console.log('自然播放结束事件');
+			});
+			state.bgAudioMannager.onError((res) => {
+				console.log(res.errMsg);
+				console.log(res.errCode);
+			});
+		},
+		
+		// 停止全局音频播放
+		stopAduio(state) {
+			state.bgAudioMannager && state.bgAudioMannager.pause()
+			if (state.bgAudioMannager && state.bgAudioMannager.src) {
+				state.bgAudioMannager.src = ''
+			}
+		},
+	},
+	
+	action: {
+		
+	}
+})
\ No newline at end of file