[audio] 新增示例

pages/API/create-inner-audio-context/create-inner-audio-context.uvue

@@ -16,14 +16,27 @@
 			<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> -->
+			<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>
+			<text class="uni-subtitle-text uni-title"
+				style="padding-left: 10px;padding-top: 10px;padding-right: 10px;">播放倍率</text>
+			<radio-group class="uni-flex uni-row radio-group" @change="playbackRateChange"
+				style="flex-wrap: wrap;padding: 10px;">
+				<radio value="0.5" style="margin-right: 3px">0.5
+				</radio>
+				<radio value="0.8" style="margin-right: 3px">0.8</radio>
+				<radio value="1.0" style="margin-right: 3px" :checked="playbackRateChecked">1.0</radio>
+				<radio value="1.25" style="margin-right: 3px">1.25</radio>
+				<radio value="1.5" style="margin-right: 3px">1.5</radio>
+				<radio value="2.0">2.0</radio>
+			</radio-group>
+
 			<view class="uni-title">
 				<text class="uni-title-text">方法示例</text>
 			</View>
@@ -31,6 +44,14 @@
 			<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="onchangeValue(20)" class="uni-btn">跳转到指定位置20</button>
+			<button type="primary" @click="onTimeUpdate" class="uni-btn">onTimeUpdate</button>
+			<button type="primary" @click="offTimeUpdate" class="uni-btn">offTimeUpdate</button>
+			<button type="primary" @click="onWaiting" class="uni-btn">onWaiting</button>
+			<button type="primary" @click="offWaiting" class="uni-btn">offWaiting</button>
+
+
+			<text style="color: red;font-size: 15px;margin-top: 10px;">tip:销毁后请重新进入此界面再播放</text>
+			<button type="primary" @click="destory" class="uni-btn">销毁</button>
 
 			<view class="uni-title">
 				<text class="uni-title-text">格式/路径示例</text>
@@ -66,7 +87,10 @@
 				// 自动化测试
 				onSeekingTest: false,
 				onSeekedTest: false,
-        onWaitingTest: false
+				onWaitingTest: false,
+				playbackRateChecked: true,
+				onTimeUpdateCb: (res : any) => { },
+				onWaitingCb: (res : any) => { }
 			}
 		},
 		computed: {
@@ -79,6 +103,30 @@
 			this._audioContext!.src = audioUrl;
 			this.volume = this._audioContext!.volume;
 			this.onCanplay()
+			this._audioContext!.onPlay(() => {
+				this.isPaused = false;
+				this.isPlaying = true;
+				console.log('开始播放', this.isPaused);
+			});
+
+			this.onTimeUpdateCb = (res : any) => {
+				if (this._isChanging) { return; }
+				this.currentTime = this._audioContext!.currentTime;
+				console.log('onTimeUpdateCb', this.currentTime)
+				if (this.currentTime > this.buffered) {
+					console.log('缓冲不足');
+				}
+			};
+
+			this.onWaitingCb = (res : any) => {
+				console.log('音频加载中事件');
+				this.onWaitingTest = true
+			}
+
+			this.onTimeUpdate()
+			// this.onWaiting()
+			this.onError()
+			this.onEnded()
 		},
 		onUnload() {
 			if (this._audioContext != null && this.isPlaying) {
@@ -107,7 +155,7 @@
 				this.onSeeked()
 				this._isChanging = false;
 			},
-	  onchangeValue(pos:number) {
+			onchangeValue(pos : number) {
 				this._audioContext!.seek(pos);
 				this.onSeeking()
 				this.onSeeked()
@@ -139,14 +187,6 @@
 				if (this._audioContext!.startTime > 0) {
 					this.onchangeValue(this._audioContext!.startTime)
 				}
-        this._audioContext!.onPlay(() => {
-          this.isPaused = false;
-          console.log('开始播放', this.isPaused);
-        });
-        this.onTimeUpdate()
-        this.onWaiting()
-        this.onError()
-        this.onEnded()
 			},
 			onSeeking() {
 				this._audioContext!.onSeeking(() => {
@@ -161,31 +201,28 @@
 				});
 			},
 			onWaiting() {
-        this._audioContext!.onWaiting(() => {
-          console.log('音频加载中事件');
-          this.onWaitingTest = true
-        });
+				this._audioContext!.onWaiting(this.onWaitingCb);
+			},
+			offWaiting() {
+				this._audioContext!.offWaiting(this.onWaitingCb);
 			},
 			onTimeUpdate() {
-        this._audioContext!.onTimeUpdate(() => {
-          // console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
-          if (this._isChanging) { return; }
-          this.currentTime = this._audioContext!.currentTime
-          console.log('currentTime', this.currentTime);
-          if (this.currentTime > this.buffered) {
-            console.log('缓冲不足');
-          }
-        });
+				this._audioContext!.onTimeUpdate(this.onTimeUpdateCb);
+			},
+			offTimeUpdate() {
+				this._audioContext!.offTimeUpdate(this.onTimeUpdateCb);
 			},
 			increaseVolume() {
 				this.volume = Math.min(this.volume + 0.1, 1);
 				this.volume = parseFloat(this.volume.toFixed(1));
+				this._audioContext!.volume = this.volume
 				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);
+				this._audioContext!.volume = this.volume
 			},
 			onEnded() {
 				this._audioContext!.onEnded(() => {
@@ -222,7 +259,19 @@
 				});
 				this.isPlaying = false;
 				console.log('stop', this.isPaused);
+			},
+			destory() {
+				if (this._audioContext != null) {
+					this.isPlaying = false;
+					this._audioContext!.destroy()
 				}
+			},
+			playbackRateChange(e : UniRadioGroupChangeEvent) {
+				if (this._audioContext != null && this.isPlaying) {
+					console.log(parseFloat(e.detail.value))
+					this._audioContext!.playbackRate = parseFloat(e.detail.value)
+				}
+			},
 		}
 	}
 </script>