audio-pause

pages.json

@@ -1,5 +1,11 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+		    "path" : "pages/show/show",
+		    "style": {
+		    	"navigationBarTitleText": "数字新视窗"
+		    }
+		},
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -14,10 +20,6 @@
 		    "path" : "pages/bind/bind",
 		    "style" : {}
 		},
-		{
-		    "path" : "pages/show/show",
-		    "style" : {}
-		},
 		{
 		    "path" : "pages/show/show2",
 		    "style" : {}

pages/show/show.js

@@ -1,210 +1,183 @@
 let data = {
-	"code": 200,
-	"msg": "操作成功",
-	"data": [
+	'code': 200,
+	'msg': '操作成功',
+	'data': [
 		{
-			"relaase_id": "4028e3d47fd34b5d017fd34c08e60003",
-			"relaase_name": "fsfsdf",
-			"bgm_name": "res_01",
-			"bgm_main": "yuekan-BGM31.mp3",
-			"release_start": "2022-03-30 00:00:00.0",
-			"release_end": "2022-04-24 00:00:00.0",
-			"show_materials": [
+			'relaase_id': '4028e3d47fd34b5d017fd34c08e60003',
+			'relaase_name': 'fsfsdf',
+			'bgm_name': '主-res_01',
+			'bgm_main': 'https://qiniu.aiyxlib.com/kejibgm001.mp3',
+			'release_start': '2022-03-30 00:00:00.0',
+			'release_end': '2022-04-24 00:00:00.0',
+			'show_materials': [
 				{
-					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
-					"material_name": "bg-index.jpg",
-					"material_type": "0",
-					"deposit_url": "yuekan-4-content-background@2x.png",
-					"img_path": "yuekan-4-content-background@2x.png",
-					"device_direction": "1",
-					"duration": "4",
-					"effect": "animate__fadeInTopRight",
-					"bgm_name": "1-1",
-					"bgm_url": '',
-					"ranking": "1"
+					'release_id': '4028e3d47fd34b5d017fd34c08e60003',
+					'material_name': 'bg-index.jpg',
+					'material_type': '0',
+					'deposit_url': '1.jpg',
+					'img_path': '1.jpg',
+					'device_direction': '1',
+					'duration': '15',
+					'effect': 'animate__fadeInTopRight',
+					'bgm_name': 'img-1-1',
+					'bgm_url': '',
+					'ranking': '1'
 				},
 				{
-					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
-					"material_name": "s-j1.png",
-					"material_type": "0",
-					"deposit_url": "yuekan-6-shiguangji@2x.png",
-					"img_path": "yuekan-6-shiguangji@2x.png",
-					"device_direction": "1",
-					"duration": "3",
-					"effect": "animate__backInLeft",
-					"bgm_name": '1-2',
-					"bgm_url": 'yuekan-BGM27.mp3',
-					"ranking": "2"
+					'release_id': '4028e3d47fd34b5d017fd34c08e60003',
+					'material_name': 's-j1.png',
+					'material_type': '0',
+					'deposit_url': '4.png',
+					'img_path': '4.png',
+					'device_direction': '1',
+					
+					'duration': '15',
+					'effect': 'animate__backInLeft',
+					'bgm_name': 'img-1-2',
+					'bgm_url': '',
+					'ranking': '2'
 				},
 				{
-					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
-					"material_name": "Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4",
-					"material_type": "1",
-					"deposit_url": "1608277325000.mp4",
-					"img_path": "",
-					"device_direction": "1",
-					"duration": "0",
-					"effect": "false",
-					"bgm_name": null,
-					"bgm_url": null,
-					"ranking": "4"
-				}
-			]
+					'release_id': '4028e3d47fd34b5d017fd34c08e60003',
+					'material_name': 's-j1.png',
+					'material_type': '0',
+					'deposit_url': '7.jpg',
+					'img_path': '7.jpg',
+					'device_direction': '1',
+					'duration': '15',
+					'effect': 'animate__backInDown',
+					'bgm_name': 'img-1-2',
+					'bgm_url': '',
+					'ranking': '2'
 				},
 				{
-			"relaase_id": "4028e3d47fcfa36c017fd0063c4d001a",
-			"relaase_name": "111",
-			"bgm_name": "res_02",
-			"bgm_main": "yuekan-BGM31.mp3",
-			"release_start": "2022-03-28 00:00:00.0",
-			"release_end": "2022-03-28 00:00:00.0",
-			"show_materials": [{
-					"release_id": "4028e3d47fcfa36c017fd0063c4d001a",
-					"material_name": "s-j3.png",
-					"material_type": "0",
-					"deposit_url": "bj45_1@2x.png",
-					"img_path": "bj45_1@2x.png",
-					"device_direction": "1",
-					"duration": "3",
-					"effect": "animate__flip",
-					"bgm_name": '2-1',
-					"bgm_url": null,
-					"ranking": "1"
+					'release_id': '4028e3d47fd34b5d017fd34c08e60003',
+					'material_name': 's-j1.png',
+					'material_type': '0',
+					'deposit_url': '3.jpg',
+					'img_path': '3.jpg',
+					'device_direction': '1',
+					'duration': '15',
+					'effect': 'animate__rotateInDownLeft',
+					'bgm_name': 'img-1-2',
+					'bgm_url': '',
+					'ranking': '2'
 				},
 				{
-					"release_id": "4028e3d47fcfa36c017fd0063c4d001a",
-					"material_name": "s-t3.png",
-					"material_type": "0",
-					"deposit_url": "yuekan-1-read.jpg",
-					"img_path": "yuekan-1-read.jpg",
-					"device_direction": "1",
-					"duration": "10",
-					"effect": "animate__rotateInUpRight",
-					"bgm_name": '2-2',
-					"bgm_url": null,
-					"ranking": "2"
+					'release_id': '4028e3d47fd34b5d017fd34c08e60003',
+					'material_name': 's-j1.png',
+					'material_type': '0',
+					'deposit_url': '5.jpg',
+					'img_path': '5.jpg',
+					'device_direction': '1',
+					'duration': '15',
+					'effect': 'animate__zoomInDown',
+					'bgm_name': 'img-1-2',
+					'bgm_url': '',
+					'ranking': '2'
 				},
 				{
-					"release_id": "4028e3d47fcfa36c017fd0063c4d001a",
-					"material_name": "s-j1.png",
-					"material_type": "0",
-					"deposit_url": "bj_15@2x.png",
-					"img_path": "bj_15@2x.png",
-					"device_direction": "1",
-					"duration": "5",
-					"effect": "animate__jackInTheBox",
-					"bgm_name": '2-3',
-					"bgm_url": 'yuekan-BGM27.mp3',
-					"ranking": "3"
+					'release_id': '4028e3d47fd34b5d017fd34c08e60003',
+					'material_name': 'Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4',
+					'material_type': '1',
+					'deposit_url': '20220414085212.mp4',
+					'img_path': '',
+					'device_direction': '1',
+					'duration': '0',
+					'effect': 'false',
+					'bgm_name': null,
+					'bgm_url': null,
+					'ranking': '4'
+				}
+			]
 		},
 		{
-					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
-					"material_name": "bg-index.jpg",
-					"material_type": "0",
-					"deposit_url": "yuekan-6-shiguangji@2x.png",
-					"img_path": "yuekan-6-shiguangji@2x.png",
-					"device_direction": "1",
-					"duration": "2",
-					"effect": "animate__zoomInDown",
-					"bgm_name": '2-4',
-					"bgm_url": null,
-					"ranking": "1"
+			'relaase_id': '4028e3d47fcfa36c017fd0063c4d001a',
+			'relaase_name': '111',
+			'bgm_name': '主-res_02',
+			'bgm_main': 'https://qiniu.aiyxlib.com/aiguobgm001.mp3',
+			'release_start': '2022-03-28 00:00:00.0',
+			'release_end': '2022-03-28 00:00:00.0',
+			'show_materials': [{
+					'release_id': '4028e3d47fcfa36c017fd0063c4d001a',
+					'material_name': 's-j3.png',
+					'material_type': '0',
+					'deposit_url': '2.jpg',
+					'img_path': '2.jpg',
+					'device_direction': '1',
+					'duration': '15',
+					'effect': 'animate__flip',
+					'bgm_name': 'img-2-1',
+					'bgm_url': null,
+					'ranking': '1'
 				},
 				{
-					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
-					"material_name": "s-j1.png",
-					"material_type": "0",
-					"deposit_url": "yuekan-4-content-background@2x.png",
-					"img_path": "yuekan-4-content-background@2x.png",
-					"device_direction": "1",
-					"duration": "2",
-					"effect": "animate__slideInLeft",
-					"bgm_name": '2-5',
-					"bgm_url": null,
-					"ranking": "2"
+					'release_id': '4028e3d47fcfa36c017fd0063c4d001a',
+					'material_name': 's-t3.png',
+					'material_type': '0',
+					'deposit_url': '6.jpg',
+					'img_path': '6.jpg',
+					'device_direction': '1',
+					'duration': '15',
+					'effect': 'animate__rotateInUpRight',
+					'bgm_name': 'img-2-2',
+					'bgm_url': null,
+					'ranking': '2'
 				},
 				{
-					"release_id": "4028e3d47fcfa36c017fd0063c4d001a",
-					"material_name": "Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4",
-					"material_type": "1",
-					"deposit_url": "1608277325000.mp4",
-					"img_path": "",
-					"device_direction": "1",
-					"duration": "0",
-					"effect": "false",
-					"bgm_name": null,
-					"bgm_url": null,
-					"ranking": "4"
+					'release_id': '4028e3d47fcfa36c017fd0063c4d001a',
+					'material_name': 's-j1.png',
+					'material_type': '0',
+					'deposit_url': '8.jpg',
+					'img_path': '8.jpg',
+					'device_direction': '1',
+					'duration': '15',
+					'effect': 'animate__jackInTheBox',
+					'bgm_name': 'img-2-3',
+					'bgm_url': '',
+					'ranking': '3'
 				},
 				{
-					"release_id": "4028e3d47fcfa36c017fd0063c4d001a",
-					"material_name": "s-j1.png",
-					"material_type": "0",
-					"deposit_url": "bj_15@2x.png",
-					"img_path": "bj_15@2x.png",
-					"device_direction": "1",
-					"duration": "5",
-					"effect": "animate__jackInTheBox",
-					"bgm_name": '2-7',
-					"bgm_url": 'yuekan-BGM27.mp3',
-					"ranking": "3"
+					'release_id': '4028e3d47fd34b5d017fd34c08e60003',
+					'material_name': 'bg-index.jpg',
+					'material_type': '0',
+					'deposit_url': '9.jpg',
+					'img_path': '9.jpg',
+					'device_direction': '1',
+					'duration': '15',
+					'effect': 'animate__lightSpeedInRight',
+					'bgm_name': 'img-2-4',
+					'bgm_url': null,
+					'ranking': '1'
 				}
 			]
 		},
 		{
-			"relaase_id": "4028e3d47fd34b5d017fd34c08e60003",
-			"relaase_name": "fsfsdf",
-			"bgm_name": "res_03",
-			"bgm_main": "yuekan-BGM31.mp3",
-			"release_start": "2022-03-30 00:00:00.0",
-			"release_end": "2022-04-24 00:00:00.0",
-			"show_materials": [
-				
-				{
-					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
-					"material_name": "bg-index.jpg",
-					"material_type": "0",
-					"deposit_url": "yuekan-6-shiguangji@2x.png",
-					"img_path": "yuekan-6-shiguangji@2x.png",
-					"device_direction": "1",
-					"duration": "6",
-					"effect": "animate__fadeInTopRight",
-					"bgm_name": "3-1",
-					"bgm_url": '',
-					"ranking": "1"
-				},
-				{
-					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
-					"material_name": "s-j1.png",
-					"material_type": "0",
-					"deposit_url": "bj45_1@2x.png",
-					"img_path": "bj45_1@2x.png",
-					"device_direction": "1",
-					"duration": "3",
-					"effect": "animate__backInLeft",
-					"bgm_name": '3-2',
-					"bgm_url": 'yuekan-BGM27.mp3',
-					"ranking": "2"
-				},
-				{
-					"release_id": "4028e3d47fd34b5d017fd34c08e60003",
-					"material_name": "Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4",
-					"material_type": "1",
-					"deposit_url": "1608277325000.mp4",
-					"img_path": "",
-					"device_direction": "1",
-					"duration": "0",
-					"effect": "false",
-					"bgm_name": null,
-					"bgm_url": null,
-					"ranking": "4"
+			'relaase_id': '4028e3d47fcfa36c017fd0063c4d001a',
+			'relaase_name': '111',
+			'bgm_name': '主-res_02',
+			'bgm_main': 'https://qiniu.aiyxlib.com/01a.mp3',
+			'release_start': '2022-03-28 00:00:00.0',
+			'release_end': '2022-03-28 00:00:00.0',
+			'show_materials': [{
+					'release_id': '4028e3d47fcfa36c017fd0063c4d001a',
+					'material_name': 's-j3.png',
+					'material_type': '0',
+					'deposit_url': '10.jpg',
+					'img_path': '10.jpg',
+					'device_direction': '1',
+					'duration': '15',
+					'effect': 'animate__fadeInTopLeft',
+					'bgm_name': 'img-2-1',
+					'bgm_url': null,
+					'ranking': '1'
 				}
 			]
-		},
-	]
 		}
+	]
+};
 
 
 module.exports = {
 	data
-}
+};

pages/show/show.vue

@@ -2,16 +2,22 @@
 	<view class="main_container">
 		<view class="show-content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
 			<view v-for="(item, index) in show_materials" :key="index" :class="['show-item', item.material_type == 1 && itemIndex == index ? 'show-video' : '']">
-				<image
+				<!-- <image
 					:class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect : '']"
 					v-show="item.material_type == 0 && itemIndex == index"
 					:src="linkUrl"
 					mode="aspectFill"
+				></image> -->
+				<image
+					:class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect : '']"
+					v-show="item.material_type == 0 && itemIndex == index"
+					:src="require('@/static/source/'+linkUrl)"
+					mode="aspectFill"
 				></image>
 				<video
 					:id="'video' + index"
 					v-if="item.material_type == 1 && itemIndex == index"
-					:src="linkUrl"
+					:src="require('@/static/source/'+linkUrl)"
 					:controls="false"
 					:autoplay="autoplay"
 					:enable-progress-gesture="false"
@@ -25,30 +31,14 @@
 					@timeupdate="timeUpdate"
 					initial-time="initial_time"
 				>
-				<!-- <cover-view
-					style="z-index:99;position: fixed;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
-					<image style="width: 40px;height: 40px;"></image>
-				</cover-view> -->
 				</video>
 			</view>
 		</view>
-		<!-- <swiper @change="changeMaterial()"  style="height: 100%;">
-				<swiper-item v-for="(item, index) in show_materials" :key="index" :class="['show-item', item.material_type == 1 && itemIndex == index ? 'show-video' : '']">
-					<view class="item"  v-if="item.material_type == 1 && itemIndex == index">
-						<video id="myVideo" ref="myVideo" 
-							:src="linkUrl" :autoplay="autoplay" :controls="false" :enable-progress-gesture="false" object-fit="contain" @ended="videoPlayEnd"></video>
-						<cover-view
-							style="z-index:99;position: fixed;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
-							<image style="width: 40px;height: 40px;"></image>
-						</cover-view>
-					</view>
-					<view class="item" v-if="item.material_type == 0 && itemIndex == index">
-							<image  :src="linkUrl" :class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect:'']"></image>
+		<view class="show-audio" @click="pauseAudio">
+			<image :class="['audio_round',!isPauseAudio ? 'animate_round' : '']" src="~@/static/images/audio_01.png"></image>
+			<image class="audio_zz" src="~@/static/images/audio_02.png"></image>
 		</view>
-				</swiper-item>
-		</swiper> -->
-		<view class="show-audio"></view>
-		<view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{ infoTxt }}--{{ audioName }}</view>
+		<!-- <view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{ infoTxt }}--{{ audioName }}</view> -->
 
 		<!-- <view v-if="!deviceInfoShow" class="local-data">
 			<text class="title">欢迎使用数字新视窗</text>
@@ -61,7 +51,7 @@
 </template>
 
 <script>
-import one from './show2.js';
+import one from './show.js';
 let innerAudioContext = uni.createInnerAudioContext();
 export default {
 	components: {},
@@ -91,7 +81,8 @@ export default {
 			isAutoSwitch: true,
 			moveX: 0, //滑动的x轴距离
 			moveY: 0, //滑动的y轴距离
-			like_state: 0 //-1：左滑，0：没滑动，1：右滑
+			pageState: 0,//-1：左滑，0：没滑动，1：右滑
+			isPauseAudio: false
 		};
 	},
 	onLoad() {
@@ -149,31 +140,32 @@ export default {
 					state = 2;
 				}
 			}
-			this.like_state = state;
+			this.pageState = state;
 			this.moveX = moveX;
 			this.moveY = moveY;
-			// console.log('开始滑动：', this.moveX, this.moveY, this.like_state);
+			// console.log('开始滑动：', this.moveX, this.moveY, this.pageState);
 		},
 		touchEnd(event) {
 			// console.log(`移动距离:${Math.abs(this.moveX)}`);
 			// if (Math.abs(this.moveX) > 60 ) {
-			// 		if (this.like_state == 1) {
+			// 		if (this.pageState == 1) {
 			// 			this.itemIndex++;
 			// 			this.flagIndex++;
 			// 			this.isAutoSwitch = true;
-			// 		} else if (this.like_state == -1) {
+			// 		} else if (this.pageState == -1) {
 			// 			this.itemIndex--;
 			// 			this.flagIndex--;
 			// 			this.isAutoSwitch = false;
 			// 		}
 			// 		this.changIndex();
 			// }
+			// 上下滑动
 			if (Math.abs(this.moveY) > 60) {
-				if (this.like_state == -2) {
+				if (this.pageState == -2) {
 					this.itemIndex++;
 					this.flagIndex++;
 					this.isAutoSwitch = true;
-				} else if (this.like_state == 2) {
+				} else if (this.pageState == 2) {
 					this.itemIndex--;
 					this.flagIndex--;
 					this.isAutoSwitch = false;
@@ -263,6 +255,13 @@ export default {
 			}
 			// 销毁-创建音频-播放音频
 			innerAudioContext = uni.createInnerAudioContext();
+			console.log(innerAudioContext.paused)
+			console.log(this.isPauseAudio)
+			if(this.isPauseAudio){
+				innerAudioContext.pause();
+			}else{
+				innerAudioContext.play();
+			}
 			this.playVoice(this.audioSrc);
 		},
 		// 视频
@@ -323,27 +322,33 @@ export default {
 			}
 			that.video_real_time = currentTime; //实时播放进度
 		},
+		pauseAudio(){
+			this.isPauseAudio = !this.isPauseAudio;
+			if(this.isPauseAudio){
+				innerAudioContext.pause()
+			}else{
+				innerAudioContext.play();
+			}
+		},
 		// 音频
 		playVoice(src) {
+			const _this = this;
 			if (innerAudioContext != undefined) {
 				innerAudioContext.stop();
 			}
 			innerAudioContext = uni.createInnerAudioContext();
+			// if(_this.isPauseAudio){
+			// 	innerAudioContext.pause();
+			// }else{
+			// 	innerAudioContext.play();
+			// }
 			innerAudioContext.stop();
 			innerAudioContext.src = src;
 			innerAudioContext.autoplay = true;
 			innerAudioContext.loop = true;
 			innerAudioContext.onPlay(() => {
 				this.infoTxt = '音频开始播放';
-				// console.log('开始播放');
-			});
-			innerAudioContext.onError(res => {
-				if(this.show_materials[this.itemIndex].material_type != 1){
-					console.log(res.errMsg);
-					console.log(res.errCode);
-					innerAudioContext.destroy();
-				}
-				// innerAudioContext.stop();
+				console.log('开始播放');
 			});
 			innerAudioContext.onPause(function() {
 					console.log('onPause');
@@ -352,6 +357,13 @@ export default {
 				this.infoTxt = '音频停止';
 				// console.log('停止');
 			});
+			innerAudioContext.onError(res => {
+				if(this.show_materials[this.itemIndex].material_type != 1){
+					console.log(res.errMsg);
+					console.log(res.errCode);
+					innerAudioContext.destroy();
+				}
+			});
 			innerAudioContext.onEnded(() => {
 				this.infoTxt = '音频自然播放结束事件';
 				// console.log('音频自然播放结束事件');
@@ -401,10 +413,28 @@ export default {
 	position: fixed;
 	bottom: 79.16rpx;
 	right: 46.52rpx;
-	width: 159.72rpx;
-	height: 152.08rpx;
-	background: url(~@/static/images/an-yy.png) no-repeat;
-	background-size: cover;
+	width: 122.91rpx;
+	height: 113.88rpx;
+}
+.show-audio .audio_round{
+	width: 113.19rpx;
+	height: 113.19rpx;
+}
+.show-audio .audio_zz{
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 40.27rpx;
+	height: 84.02rpx;
+	z-index: 999;
+}
+.animate_round{
+	animation: circle 2s linear infinite;
+}
+@keyframes circle {
+    100% {
+			transform: rotate(360deg);
+	}
 }
 .show-audio uni-image {
 	width: 159.72rpx;