From 7772616a83a61941ff2debaea80e829d429c39e2 Mon Sep 17 00:00:00 2001
From: wanganxp <wanganxp@gmail.com>
Date: Mon, 18 Nov 2024 05:34:39 +0800
Subject: [PATCH] =?UTF-8?q?web=E7=AB=AF=E5=B1=8F=E8=94=BD=E9=9F=B3?=
 =?UTF-8?q?=E9=A2=91=E6=92=AD=E6=94=BE=E5=92=8Cuni-icon=E5=AD=97=E4=BD=93?=
 =?UTF-8?q?=E4=B8=8D=E6=94=AF=E6=8C=81=E7=9A=84=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-inner-audio-context.uvue           | 428 ++++++------------
 pages/CSS/text/font-family.uvue               |   2 +
 2 files changed, 133 insertions(+), 297 deletions(-)

diff --git a/pages/API/create-inner-audio-context/create-inner-audio-context.uvue b/pages/API/create-inner-audio-context/create-inner-audio-context.uvue
index 9d842fc7..371ff91f 100644
--- a/pages/API/create-inner-audio-context/create-inner-audio-context.uvue
+++ b/pages/API/create-inner-audio-context/create-inner-audio-context.uvue
@@ -1,307 +1,141 @@
 <template>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex: 1;">
-	<!-- #endif -->
-		<view class="uni-padding-wrap">
-			<page-head title="audio"></page-head>
-			<view class="uni-common-mt">
-				<slider ref="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>
-			<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>
-			<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" 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>
-
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1;">
+  <!-- #endif -->
+    <view class="uni-title">
+      <text class="uni-title-text">音频路径示例</text>
+    </view>
+    <view class="formats" v-for="(item,index) in supportPaths" :key="index">
+      <text class="uni-subtitle-text">{{item.description}}</text>
+      <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
+        @click="play(item.src,index)"></image>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
 
-			<text style="color: red;font-size: 15px;margin-top: 10px;">tip:销毁后请重新进入此界面再播放</text>
-			<button type="primary" @click="destory" class="uni-btn">销毁</button>
+<script>
+  type AudioPath = {
+    description : string
+    src : string
+  }
+  export default {
+    data() {
+      return {
+        playIndex: 0,
+        isPlaying: false,
+        // #ifdef APP
+        nativePath: uni.env.CACHE_PATH + 'uni-audio/test/test.mp3' as string,
+        // #endif
+        // #ifdef APP-ANDROID
+        sdcardPath: 'sdcard/uni-audio/test.mp3',
+        // #endif
+        _audioContext: null as InnerAudioContext | null,
+        supportPaths: [
+          {
+            description: '本地路径：/static方式',
+            src: '/static/test-audio/ForElise.mp3'
+          },
+          {
+            description: '本地路径：../static/',
+            src: '../../../static/test-audio/ForElise.mp3'
+          },
+          // #ifdef APP
+          {
+            description: '本地路径：env方式',
+            src: 'env'
+          },
+          // #endif
+          {
+            description: '网络路径',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
+          },
+          {
+            description: '不存在的音频',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/invalid_url.mp3'
+          },
+          {
+            description: '错误路径',
+            src: '../static/test-audio/ForElise22.mp3'
+          },
+        ] as Array<AudioPath>
+      }
+    },
+    onReady() {
+      this._audioContext = uni.createInnerAudioContext();
+      this._audioContext!.onPlay(() => {
+        console.log('开始播放');
+      });
+      this._audioContext!.onEnded(() => {
+        console.log('播放结束');
+        this.isPlaying = false;
+      });
+      this._audioContext!.onError((err) => {
+        this.isPlaying = false;
+        console.log('err', err);
+      });
 
-			<view class="uni-title">
-				<text class="uni-title-text">格式/路径示例</text>
-			</View>
-			<navigator url="/pages/API/create-inner-audio-context/inner-audio-format" class="uni-btn">
-				<button type="primary" @click="pause">音频格式示例</button>
-			</navigator>
-			<navigator url="/pages/API/create-inner-audio-context/inner-audio-path" class="uni-btn">
-				<button type="primary" @click="pause">音频路径示例</button>
-			</navigator>
-			<navigator url="/pages/API/create-inner-audio-context/inner-audio-mult" class="uni-btn">
-				<button type="primary" @click="pause">多音频同时播放</button>
-			</navigator>
-		</view>
-	<!-- #ifdef APP -->
-	</scroll-view>
-	<!-- #endif -->
-</template>
-<script lang="uts">
-	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,
-				playbackRateChecked: true,
-				onTimeUpdateCb: (_ : any) => { },
-				onWaitingCb: (_ : any) => { }
-			}
-		},
-		computed: {
-			position() {
-				return this.isPlayEnd ? 0 : this.currentTime;
-			},
-		},
-		onReady() {
-			this._audioContext = uni.createInnerAudioContext();
-			this._audioContext!.src = audioUrl;
-			this.volume = this._audioContext!.volume;
-			this.onCanplay()
-			this._audioContext!.onPlay(() => {
-				this.isPaused = false;
-				this.isPlaying = true;
-				console.log('开始播放', this.isPaused);
-			});
+      // #ifdef APP
+      const fileManager = uni.getFileSystemManager()
+      try {
+        fileManager.rmdirSync(uni.env.CACHE_PATH + 'uni-audio/test', true)
+      } catch (e) {
+      }
 
-			this.onTimeUpdateCb = (_ : any) => {
-				if (this._isChanging) { return; }
-				this.currentTime = this._audioContext!.currentTime;
-				console.log('onTimeUpdateCb', this.currentTime)
-				if (this.currentTime > this.buffered) {
-					console.log('缓冲不足');
-				}
-			};
+      try {
+        fileManager.mkdirSync(uni.env.CACHE_PATH + 'uni-audio/test', true)
+      } catch (e) {
+      }
+      try {
+        fileManager.copyFileSync(
+          '/static/test-audio/ForElise.mp3',
+          this.nativePath)
+      } catch (e) {
+      }
+      // #endif
+    },
 
-			this.onWaitingCb = (_ : any) => {
-				console.log('音频加载中事件');
-				this.onWaitingTest = true
-			}
+    onUnload() {
+      if (this._audioContext != null) {
+        this.pause();
+        this._audioContext!.destroy()
+      }
+    },
+    methods: {
+      pause() {
+        this._audioContext!.pause();
+        this.isPlaying = false;
+      },
+      play(audioUrl : string, index : number) {
+        console.log(index, audioUrl);
+        if (this.isPlaying && this.playIndex == index) {
+          this.pause();
+          return;
+        }
+        // #ifdef APP
+        if (audioUrl == 'env') {
+          audioUrl = this.nativePath
+        }
+        // #endif
 
-			this.onTimeUpdate()
-			// this.onWaiting()
-			this.onError()
-			this.onEnded()
-		},
-		onUnload() {
-			if (this._audioContext != null) {
-				if (this.isPlaying) {
-					this.stop();
-				}
-				this._audioContext!.destroy()
-			}
-		},
-		methods: {
-			onCanplay() {
-				this._audioContext!.onCanplay(() => {
-					console.log('音频进入可以播放状态事件');
-					this.isCanplay = true;
-					// 当音频可以播放时，获取缓冲信息
-					this.buffered = this._audioContext!.buffered;
-					this.duration = this._audioContext!.duration
-				});
-			},
-			onchanging() {
-				this._isChanging = true;
-			},
-			onchange(e : UniSliderChangeEvent) {
-				let pos = e.detail.value;
-				console.log('pos', pos);
-				this._audioContext!.seek(pos);
-				this.onSeeking()
-				this.onSeeked()
-				this._isChanging = false;
-			},
-			onchangeValue(pos : number) {
-				this._audioContext!.seek(pos);
-				this.onSeeking()
-				this.onSeeked()
-				this._isChanging = false;
-			},
-			startTimeInput(e : UniInputEvent) {
-				let startTimeValue = parseInt(e.detail.value)
-				this._audioContext!.startTime = startTimeValue;
-				this.onchangeValue(startTimeValue)
-			},
-			setAutoplay() {
-				this._audioContext!.autoplay = !this._audioContext!.autoplay;
-				console.log(this._audioContext!.autoplay, 'autoplay');
-			},
-			setLoop() {
-				this._audioContext!.loop = !this._audioContext!.loop;
-				console.log(this._audioContext!.loop, 'loop');
-			},
-			play() {
-				if (!this.isCanplay) {
-					uni.showToast({
-						title: '音频未进入可以播放状态，请稍后再试'
-					});
-					return;
-				}
-				this.isPlaying = true;
-				this._audioContext!.play();
-				this.isPlayEnd = false;
-				if (this._audioContext!.startTime > 0) {
-					this.onchangeValue(this._audioContext!.startTime)
-				}
-			},
-			onSeeking() {
-				this._audioContext!.onSeeking(() => {
-					console.log('音频进行 seek 操作事件');
-					this.onSeekingTest = true
-				});
-			},
-			onSeeked() {
-				this._audioContext!.onSeeked(() => {
-					console.log('音频完成 seek 操作事件');
-					this.onSeekedTest = true
-				});
-			},
-			onWaiting() {
-				this._audioContext!.onWaiting(this.onWaitingCb);
-			},
-			offWaiting() {
-				this._audioContext!.offWaiting(this.onWaitingCb);
-			},
-			onTimeUpdate() {
-				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(() => {
-					console.log('播放结束');
-					this.currentTime = 0;
-					this.startTime = 0
-					this.isPlaying = false;
-					this.isPaused = true;
-					this.isPlayEnd = true;
-					(this.$refs["slider"] as UniSliderElement).value = 0
-				});
-			},
-			onError() {
-				this._audioContext!.onError((err) => {
-					console.log('err', err);
-					this.isPlaying = false;
-					this.isPaused = true;
-				});
-			},
-			pause() {
-				this._audioContext!.pause();
-				this._audioContext!.onPause(() => {
-					console.log('音频暂停事件');
-					this.isPaused = true;
-				});
-				this.isPlaying = false;
-			},
-			stop() {
-				console.log('stop');
-				this._audioContext!.stop();
-				this._audioContext!.onStop(() => {
-					// 第一次点停止时，不触发
-					this.isPaused = true;
-					console.log('音频停止事件');
-				});
-				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).toDouble()
-				}
-			},
-		}
-	}
+        this.playIndex = index
+        this._audioContext!.src = audioUrl;
+        this._audioContext!.play();
+        this.isPlaying = true;
+      }
+    }
+  }
 </script>
-<style>
-	.play-time-area {
-		display: flex;
-		flex-direction: row;
-		margin-top: 20px;
-	}
 
-	.duration {
-		margin-left: auto;
-	}
-
-	.play-button-area {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		margin: 50px 0;
-	}
+<style>
+  .formats {
+    align-items: center;
+  }
 
-	.icon-play {
-		width: 60px;
-		height: 60px;
-	}
+  .icon-play {
+    width: 60px;
+    height: 60px;
+    margin: 10px;
+  }
 </style>
diff --git a/pages/CSS/text/font-family.uvue b/pages/CSS/text/font-family.uvue
index b84f30fe..f0fb537d 100644
--- a/pages/CSS/text/font-family.uvue
+++ b/pages/CSS/text/font-family.uvue
@@ -8,9 +8,11 @@
     <!--    <text class="common" style="font-family: AlimamaDaoLiTiWOFF">font-family: 阿里妈妈刀隶体-woff</text>
     <text class="common" style="font-family: AlimamaDaoLiTiWOFF2">font-family: 阿里妈妈刀隶体-woff2</text> -->
   </view>
+  <!-- #ifdef APP -->
   <view style="margin: 24px 12px;">
     <button type="default" @click="openUniIcon">内置字体图标uni-icon示例</button>
   </view>
+  <!-- #endif -->
 </template>
 
 <script lang="uts">
-- 
GitLab