From e3658c1e45545c54e4605ef00606ac05606bbe8e Mon Sep 17 00:00:00 2001
From: Anne_LXM <liuxiaomei@dcloud.io>
Date: Fri, 24 May 2024 21:22:57 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4inner-audio=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?/=E6=96=B0=E5=A2=9Emovable-view=E6=B5=8B=E8=AF=95=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/API/inner-audio/inner-audio.test.js     |  74 ++++
 pages/API/inner-audio/inner-audio.uvue        | 319 ++++++++++--------
 .../movable-view/movable-view.test.js         |  30 ++
 3 files changed, 286 insertions(+), 137 deletions(-)
 create mode 100644 pages/API/inner-audio/inner-audio.test.js
 create mode 100644 pages/component/movable-view/movable-view.test.js

diff --git a/pages/API/inner-audio/inner-audio.test.js b/pages/API/inner-audio/inner-audio.test.js
new file mode 100644
index 00000000..8538001b
--- /dev/null
+++ b/pages/API/inner-audio/inner-audio.test.js
@@ -0,0 +1,74 @@
+describe('inner-audio', () => {
+  if (!process.env.uniTestPlatformInfo.startsWith('web')) {
+    it('app', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/API/inner-audio/inner-audio')
+    await page.waitFor('view');
+  });
+
+  function getData(key = '') {
+    return new Promise(async (resolve, reject) => {
+      const data = await page.data()
+      resolve(key ? data[key] : data)
+    })
+  }
+
+  it('onCanplay',async()=>{
+    await page.waitFor(1000)
+    await page.waitFor(async()=>{
+      return await getData('isCanplay')
+    })
+    console.log("获取缓冲信息",await getData('buffered'))
+    expect(await getData('buffered')).toBeGreaterThan(0)
+  })
+
+  it('play-onPlay-onTimeUpdate', async () => {
+    await page.callMethod('play')
+    await page.waitFor(3000);
+    expect(await getData('isPlaying')).toBeTruthy()
+    console.log("duration：",await getData('duration'),"currentTime：",await getData('currentTime'))
+    expect(await getData('duration')).toBe(175.109)
+    // console.log("isPaused",await getData('isPaused'))
+    // expect(await getData('currentTime')).toBeGreaterThan(0);
+    // expect(await getData('isPaused')).toBeFalsy();
+  });
+
+  it('seek-onSeeking-onSeeked', async () => {
+    await page.callMethod('onchange',20)
+    await page.waitFor(500);
+    expect(await getData('onSeekingTest')).toBeTruthy();
+    // expect(await getData('onWaitingTest')).toBeTruthy();
+    expect(await getData('onSeekedTest')).toBeTruthy();
+  });
+
+  it('pause-onPause', async () => {
+    await page.callMethod('pause')
+    await page.waitFor(500);
+    expect(await getData('isPlaying')).toBeFalsy()
+    // expect(await getData('isPaused')).toBeTruthy();
+  });
+
+  it('stop-onStop', async () => {
+    await page.callMethod('play')
+    await page.waitFor(2000);
+    // 第一次点停止时，不触发onStop事件
+    await page.callMethod('stop')
+    await page.callMethod('stop')
+    await page.waitFor(1000);
+    expect(await getData('isPlaying')).toBeFalsy()
+    // expect(await getData('isPaused')).toBeTruthy();
+  });
+
+  it('onEnded', async () => {
+    await page.callMethod('onchange',173)
+    await page.waitFor(500);
+    await page.callMethod('play')
+    await page.waitFor(3000);
+    // expect(await getData('isPlayEnd')).toBeTruthy();
+  });
+
+});
diff --git a/pages/API/inner-audio/inner-audio.uvue b/pages/API/inner-audio/inner-audio.uvue
index 093c831e..bf4991c4 100644
--- a/pages/API/inner-audio/inner-audio.uvue
+++ b/pages/API/inner-audio/inner-audio.uvue
@@ -1,22 +1,34 @@
 <template>
-	<view class="uni-padding-wrap">
-		<page-head title="audio"></page-head>
-		<view class="uni-common-mt">
-			<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
-		</view>
-		<!-- <view class="uni-common-mt play-time-area">
-			<text class="current-time">{{currentTime}}</text>
-			<text class="duration">{{duration}}</text>
-		</view>
-		<view class="play-button-area">
-			<image class="icon-play" :src="playImage" @click="play"></image>
-		</view> -->
-    <button type="primary" @click="play" class="uni-btn">播放</button>
-    <button type="primary" @click="pause" class="uni-btn">暂停</button>
-    <button type="primary" @click="stop" class="uni-btn">停止</button>
-    <button type="primary" @click="onchange('seek')" class="uni-btn">跳转到指定位置</button>
-    <button type="primary" @click="setAutoplay" class="uni-btn">是否自动开始播放</button>
-    <button type="primary" @click="setLoop" class="uni-btn">是否循环播放</button>
+  <view class="uni-padding-wrap">
+    <page-head title="audio"></page-head>
+    <view class="uni-common-mt">
+      <slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
+    </view>
+    <view class="uni-title">
+      <text class="uni-title-text">属性示例</text>
+    </View>
+    <text class="uni-text-box uni-common-mt">当前音频播放位置（保留小数点后 6 位）：{{currentTime}} s</text>
+    <text class="uni-text-box">音频的长度（单位:s）：{{duration}} s</text>
+    <text class="uni-text-box">当前是否停止状态：{{isPaused}}</text>
+    <text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text>
+    <text class="uni-text-box">当前音量：{{volume}}</text>
+    <!-- 设置音量无效 -->
+    <!-- <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button>
+    <button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button> -->
+
+    <text class="uni-subtitle-text uni-title">开始播放的位置（单位：s）</text>
+    <input :value="startTime" type="number" placeholder="开始播放的位置（单位：s）" class="uni-input"
+      @input="startTimeInput"></input>
+    <boolean-data :defaultValue="false" title="是否自动开始播放" @change="setAutoplay"></boolean-data>
+    <boolean-data :defaultValue="false" title="是否循环播放" @change="setLoop"></boolean-data>
+    <view class="uni-title">
+      <text class="uni-title-text">方法示例</text>
+    </View>
+    <button :disabled="isPlaying" type="primary" @click="play" class="uni-btn">播放</button>
+    <button :disabled="!isPlaying" type="primary" @click="pause" class="uni-btn">暂停</button>
+    <button :disabled="!isPlaying && !isPaused" type="primary" @click="stop" class="uni-btn">停止</button>
+    <button type="primary" @click="onchange(20)" class="uni-btn">跳转到指定位置20</button>
+
     <view class="uni-title">
       <text class="uni-title-text">格式/路径示例</text>
     </View>
@@ -26,168 +38,201 @@
     <navigator url="/pages/API/inner-audio/inner-audio-path" class="uni-btn">
       <button type="primary" @click="pause">音频路径示例</button>
     </navigator>
-	</view>
+  </view>
 </template>
 <script lang="uts">
-	const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
-	export default {
-		data() {
-			return {
-				title: "innerAudioContext",
-				isPlaying: false,
-				isPlayEnd: false,
-				currentTime: 0,
-				duration: 100,
-        pos:10,
-        paused:false,
-        _isChanging:false,
-        _audioContext: null as InnerAudioContext | null
-			}
-		},
-		computed: {
-			position() {
-				return this.isPlayEnd ? 0 : this.currentTime;
-			},
-			playImage() {
-				return this.isPlaying ? "/static/pause.png" : "/static/play.png"
-			}
-		},
+  const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
+  export default {
+    data() {
+      return {
+        title: "innerAudioContext",
+        currentTime: 0,
+        duration: 100,
+        startTime: 0,
+        buffered: 0,
+        volume: 0.5,
+        isCanplay: false,
+        isPlaying: false,
+        isPaused: true,
+        isPlayEnd: false,
+        _isChanging: false,
+        _audioContext: null as InnerAudioContext | null,
+        // 自动化测试
+        onSeekingTest:false,
+        onSeekedTest:false,
+        onWaitingTest:false
+      }
+    },
+    computed: {
+      position() {
+        return this.isPlayEnd ? 0 : this.currentTime;
+      },
+    },
     onReady() {
       this._audioContext = uni.createInnerAudioContext();
       this._audioContext!.src = audioUrl;
+      this.volume = this._audioContext!.volume;
       this.onCanplay()
     },
-		onUnload() {
-			if (this._audioContext != null && this.isPlaying) {
-				this.stop();
+    onUnload() {
+      if (this._audioContext != null && this.isPlaying) {
+        this.stop();
         this._audioContext!.destroy()
-			}
-		},
-		methods: {
-      setAutoplay(){
+      }
+    },
+    methods: {
+      onCanplay() {
+        this._audioContext!.onCanplay(() => {
+          console.log('音频进入可以播放状态事件');
+          this.isCanplay = true;
+          // 当音频可以播放时，获取缓冲信息
+          this.buffered = this._audioContext!.buffered;
+          this.duration = this._audioContext!.duration || 0;
+        });
+      },
+      onchanging() {
+        this._isChanging = true;
+      },
+      onchange(e) {
+        console.log(e, 'e');
+        let pos = typeof e === "number" ? e : e.detail.value;
+        this._audioContext!.seek(pos);
+        this.onSeeking()
+        this.onSeeked()
+        this._isChanging = false;
+      },
+      startTimeInput(e : InputEvent) {
+        let startTimeValue = Number(e.detail.value)
+        this._audioContext!.startTime = startTimeValue;
+        this.onchange(startTimeValue)
+      },
+      setAutoplay() {
         this._audioContext!.autoplay = !this._audioContext!.autoplay;
-        console.log(this._audioContext!.autoplay,'autoplay');
+        console.log(this._audioContext!.autoplay, 'autoplay');
       },
-      setLoop(){
+      setLoop() {
         this._audioContext!.loop = !this._audioContext!.loop;
-        console.log(this._audioContext!.loop,'loop');
+        console.log(this._audioContext!.loop, 'loop');
       },
-      onchanging() {
-      	this._isChanging = true;
+      play() {
+        if (!this.isCanplay) {
+          uni.showToast({
+            title: '音频未进入可以播放状态，请稍后再试'
+          });
+          return;
+        }
+        this.isPlaying = true;
+        this._audioContext!.play();
+        this.isPlayEnd = false;
+        if (this._audioContext!.startTime > 0) {
+          this.onchange(this._audioContext!.startTime)
+        }
+        this._audioContext!.onPlay(() => {
+          this.isPaused = false;
+          console.log('开始播放',this.isPaused);
+        });
+        this.onTimeUpdate()
+        this.onWaiting()
+        this.onError()
+        this.onEnded()
       },
-      onSeeking(){
+      onSeeking() {
         this._audioContext!.onSeeking(() => {
           console.log('音频进行 seek 操作事件');
+          this.onSeekingTest = true
         });
       },
-      onSeeked(){
+      onSeeked() {
         this._audioContext!.onSeeked(() => {
           console.log('音频完成 seek 操作事件');
+          this.onSeekedTest = true
         });
       },
-      onchange(e) {
-        let pos = e == 'seek' ? 20 : e.detail.value
-      	this._audioContext!.seek(pos);
-        this.onSeeking()
-        this.onSeeked()
-      	this._isChanging = false;
-      },
-      onCanplay(){
-        this._audioContext!.onCanplay(() => {
-          console.log('音频进入可以播放状态事件');
+      onWaiting() {
+        this._audioContext!.onWaiting(() => {
+          console.log('音频加载中事件');
+          this.onWaitingTest = true
         });
       },
-      onTimeUpdate(){
-        this._audioContext!.onTimeUpdate((e) => {
-          // console.log('onTimeUpdate:音频播放进度更新事件',e);
-        	if (this._isChanging === true) {
-        		return;
-        	}
-        	this.currentTime = this._audioContext!.currentTime || 0;
-        	this.duration = this._audioContext!.duration || 0;
+      onTimeUpdate() {
+        this._audioContext!.onTimeUpdate(() => {
+          // console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
+          if (this._isChanging === true) { return; }
+          this.currentTime = this._audioContext!.currentTime || 0;
+          if (this.currentTime > this.buffered) {
+            console.log('缓冲不足');
+          }
         });
       },
-      onPlay(){
-        this._audioContext!.onPlay(() => {
-        	console.log('开始播放');
-        });
+      increaseVolume() {
+        this.volume = Math.min(this.volume + 0.1, 1);
+        this.volume = parseFloat(this.volume.toFixed(1));
+        console.log('增加音量', this.volume);
+      },
+      decreaseVolume() {
+        this.volume = Math.max(this.volume - 0.1, 0);
+        this.volume = parseFloat(this.volume.toFixed(1));
+        console.log('减少音量', this.volume);
       },
-      onEnded(){
+      onEnded() {
         this._audioContext!.onEnded(() => {
           console.log('播放结束');
-        	this.currentTime = 0;
-        	this.isPlaying = false;
-        	this.isPlayEnd = true;
+          this.currentTime = 0;
+          this.startTime = 0
+          this.isPlaying = false;
+          this.isPaused = true;
+          this.isPlayEnd = true;
         });
       },
-      onError(){
+      onError() {
         this._audioContext!.onError((err) => {
-          console.log('err',err);
-        	this.isPlaying = false;
-        });
-      },
-      onWaiting(){
-        this._audioContext!.onWaiting(() => {
-          console.log('音频加载中事件');
+          console.log('err', err);
+          this.isPlaying = false;
+          this.isPaused = true;
         });
       },
-			play() {
-				// if (this.isPlaying) {
-				// 	this.pause();
-				// 	return;
-				// }
-				this.isPlaying = true;
-				this._audioContext!.play();
-        this.isPlayEnd = false;
-        this.onPlay()
-        this.onWaiting()
-        this.onTimeUpdate()
-        this.onError()
-        this.onEnded()
-			},
-      onPause(){
+      pause() {
+        this._audioContext!.pause();
         this._audioContext!.onPause(() => {
           console.log('音频暂停事件');
+          this.isPaused = true;
         });
+        this.isPlaying = false;
       },
-			pause() {
-				this._audioContext!.pause();
-        this.onPause()
-				this.isPlaying = false;
-			},
-      onStop(){
+      stop() {
+        console.log('stop');
+        this._audioContext!.stop();
         this._audioContext!.onStop(() => {
+          // 第一次点停止时，不触发
+          this.isPaused = true;
           console.log('音频停止事件');
         });
-      },
-			stop() {
-				this._audioContext!.stop();
-        this.onStop()
-				this.isPlaying = false;
-			}
-		}
-	}
+        this.isPlaying = false;
+        console.log('stop',this.isPaused);
+      }
+    }
+  }
 </script>
 <style>
-	.play-time-area {
-		display: flex;
-		flex-direction: row;
-		margin-top: 20px;
-	}
+  .play-time-area {
+    display: flex;
+    flex-direction: row;
+    margin-top: 20px;
+  }
 
-	.duration {
-		margin-left: auto;
-	}
+  .duration {
+    margin-left: auto;
+  }
 
-	.play-button-area {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		margin: 50px 0;
-	}
+  .play-button-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: 50px 0;
+  }
 
-	.icon-play {
-		width: 60px;
-		height: 60px;
-	}
+  .icon-play {
+    width: 60px;
+    height: 60px;
+  }
 </style>
diff --git a/pages/component/movable-view/movable-view.test.js b/pages/component/movable-view/movable-view.test.js
new file mode 100644
index 00000000..eb25b97b
--- /dev/null
+++ b/pages/component/movable-view/movable-view.test.js
@@ -0,0 +1,30 @@
+let page;
+describe('movable-view.uvue', () => {
+  console.log(process.env.uniTestPlatformInfo,process.env.uniTestPlatformInfo.startsWith('web'))
+  if (!process.env.uniTestPlatformInfo.startsWith('web')) {
+    it('app', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/component/movable-view/movable-view')
+    await page.waitFor('view');
+  });
+
+  it('移动至 (30px, 30px)', async () => {
+    expect(await page.data('x')).toBe(0)
+    expect(await page.data('y')).toBe(0)
+    await page.callMethod('tap')
+    await page.waitFor(500);
+    expect(await page.data('x')).toBe(30)
+    expect(await page.data('y')).toBe(30)
+  })
+  it('放大3倍', async () => {
+    expect(await page.data('scale')).toBe(2)
+    await page.callMethod('tap2')
+    await page.waitFor(500);
+    expect(await page.data('scale')).toBe(3)
+  })
+
+})
-- 
GitLab