From f0cc4ff8cb20135656fc77b2620ada02af3cc876 Mon Sep 17 00:00:00 2001
From: mahaifeng <mahaifeng@dcloud.io>
Date: Wed, 30 Oct 2024 17:07:11 +0800
Subject: [PATCH] =?UTF-8?q?[audio]=E6=B7=BB=E5=8A=A0=E9=9F=B3=E9=A2=91?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create-inner-audio-context.uvue           |  22 +-
 .../inner-audio-format.uvue                   | 282 +++++++++---------
 .../inner-audio-path.uvue                     |   6 +-
 3 files changed, 162 insertions(+), 148 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 1217da8d..93d272a5 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
@@ -27,7 +27,7 @@
     <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>
+    <button type="primary" @click="onchangeValue(20)" class="uni-btn">跳转到指定位置20</button>
 
     <view class="uni-title">
       <text class="uni-title-text">格式/路径示例</text>
@@ -87,24 +87,30 @@
           this.isCanplay = true;
           // 当音频可以播放时，获取缓冲信息
           this.buffered = this._audioContext!.buffered;
-          this.duration = this._audioContext!.duration || 0;
+          this.duration = this._audioContext!.duration
         });
       },
       onchanging() {
         this._isChanging = true;
       },
-      onchange(e) {
+      onchange(e : UniSliderChangeEvent) {
         console.log(e, 'e');
-        let pos = typeof e === "number" ? e : e.detail.value;
+        let pos =  e.detail.value;
         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 : InputEvent) {
-        let startTimeValue = Number(e.detail.value)
+        let startTimeValue = parseInt(e.detail.value)
         this._audioContext!.startTime = startTimeValue;
-        this.onchange(startTimeValue)
+        this.onchangeValue(startTimeValue)
       },
       setAutoplay() {
         this._audioContext!.autoplay = !this._audioContext!.autoplay;
@@ -125,7 +131,7 @@
         this._audioContext!.play();
         this.isPlayEnd = false;
         if (this._audioContext!.startTime > 0) {
-          this.onchange(this._audioContext!.startTime)
+          this.onchangeValue(this._audioContext!.startTime)
         }
         this._audioContext!.onPlay(() => {
           this.isPaused = false;
@@ -158,7 +164,7 @@
         this._audioContext!.onTimeUpdate(() => {
           // console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
           if (this._isChanging === true) { return; }
-          this.currentTime = this._audioContext!.currentTime || 0;
+          this.currentTime = this._audioContext!.currentTime ?? 0;
           console.log('currentTime', this.currentTime);
           if (this.currentTime > this.buffered) {
             console.log('缓冲不足');
diff --git a/pages/API/create-inner-audio-context/inner-audio-format.uvue b/pages/API/create-inner-audio-context/inner-audio-format.uvue
index 85f1bd78..ffa14f57 100644
--- a/pages/API/create-inner-audio-context/inner-audio-format.uvue
+++ b/pages/API/create-inner-audio-context/inner-audio-format.uvue
@@ -1,137 +1,145 @@
-<template>
-  <page-head :title="title"></page-head>
-  <view class="uni-padding-wrap uni-common-mt">
-    <view class="uni-title">
-      <text class="uni-title-text">支持的音频格式示例</text>
-    </view>
-    <view class="formats" v-for="(item,index) in supportFormats" :key="index">
-      <text class="uni-subtitle-text">{{item.format}}</text>
-      <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
-        @click="play(item.src,index)"></image>
-    </view>
-
-    <view class="uni-title">
-      <text class="uni-title-text">不支持的音频格式</text>
-    </view>
-    <view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
-      <text class="uni-subtitle-text">{{item.format}}</text>
-      <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
-        @click="play(item.src,index)"></image>
-    </view>
-  </view>
-</template>
-
-<script>
-  type AudioFormat = {
-    format : string
-    src : string
-  }
-  export default {
-    data() {
-      return {
-        title: 'audio-format',
-        playIndex: 0,
-        isPlaying: false,
-        _audioContext: null as InnerAudioContext | null,
-        supportFormats: [
-          {
-            format: 'mp3',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
-          },
-          {
-            format: 'mp4',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp4'
-          },
-          {
-            format: 'm4a',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.m4a'
-          },
-          {
-            format: 'aac',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aac'
-          },
-          {
-            format: 'flac',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac'
-          },
-
-          {
-            format: 'ogg',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg'
-          },
-          {
-            format: 'wav',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
-          },
-        ] as Array<AudioFormat>,
-        notSupportFormats: [
-          {
-            format: 'wma',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
-          },
-          {
-            format: 'aiff',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
-          },
-          {
-            format: 'caf',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
-          },
-          {
-            format: '错误格式',
-            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
-          },
-        ] as Array<AudioFormat>
-      }
-    },
-    onReady() {
-      this._audioContext = uni.createInnerAudioContext();
-    },
-    onUnload() {
-      if (this._audioContext != null) {
-        this.pause();
-        this._audioContext!.destroy()
-      }
-    },
-    methods: {
-      pause() {
-        this._audioContext!.pause();
-        this.isPlaying = false;
-      },
-      play(audioUrl, index) {
-        // console.log(index,audioUrl);
-        if (this.isPlaying && this.playIndex == index) {
-          this.pause();
-          return;
-        }
-        this.playIndex = index
-        this._audioContext!.src = audioUrl;
-        this._audioContext!.play();
-        this.isPlaying = true;
-        this._audioContext!.onPlay(() => {
-          console.log('开始播放');
-        });
-        this._audioContext!.onEnded(() => {
-          console.log('播放结束');
-          this.isPlaying = false;
-        });
-        this._audioContext!.onError((err) => {
-          this.isPlaying = false;
-          console.log('err', err);
-        });
-      },
-    },
-  }
-</script>
-
-<style>
-  .formats {
-    align-items: center;
-  }
-
-  .icon-play {
-    width: 60px;
-    height: 60px;
-    margin: 10px;
-  }
-</style>
+<template>
+	<page-head :title="title"></page-head>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1;">
+	<!-- #endif -->
+		<view class="uni-padding-wrap uni-common-mt">
+			<view class="uni-title">
+				<text class="uni-title-text">支持的音频格式示例</text>
+			</view>
+
+			<view class="formats" v-for="(item,index) in supportFormats" :key="index">
+				<text class="uni-subtitle-text">{{item.format}}</text>
+				<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
+					@click="play(item.src,index)"></image>
+			</view>
+
+			<view class="uni-title">
+				<text class="uni-title-text">不支持的音频格式</text>
+			</view>
+			<view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
+				<text class="uni-subtitle-text">{{item.format}}</text>
+				<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'"
+					@click="play(item.src,index)"></image>
+			</view>
+
+		</view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script>
+	type AudioFormat = {
+		format : string
+		src : string
+	}
+	export default {
+		data() {
+			return {
+				title: 'audio-format',
+				playIndex: 0,
+				isPlaying: false,
+				_audioContext: null as InnerAudioContext | null,
+				supportFormats: [
+					{
+						format: 'mp3',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
+					},
+					{
+						format: 'mp4',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp4'
+					},
+					{
+						format: 'm4a',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.m4a'
+					},
+					{
+						format: 'aac',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aac'
+					},
+					{
+						format: 'flac',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac'
+					},
+
+					{
+						format: 'ogg',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg'
+					},
+					{
+						format: 'wav',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
+					},
+				] as Array<AudioFormat>,
+				notSupportFormats: [
+					{
+						format: 'wma',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
+					},
+					{
+						format: 'aiff',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
+					},
+					{
+						format: 'caf',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
+					},
+					{
+						format: '错误格式',
+						src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
+					},
+				] as Array<AudioFormat>
+			}
+		},
+		onReady() {
+			this._audioContext = uni.createInnerAudioContext();
+		},
+		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;
+				}
+				this.playIndex = index
+				this._audioContext!.src = audioUrl;
+				this._audioContext!.play();
+				this.isPlaying = true;
+				this._audioContext!.onPlay(() => {
+					console.log('开始播放');
+				});
+				this._audioContext!.onEnded(() => {
+					console.log('播放结束');
+					this.isPlaying = false;
+				});
+				this._audioContext!.onError((err) => {
+					this.isPlaying = false;
+					console.log('err', err);
+				});
+			},
+		},
+	}
+</script>
+
+<style>
+	.formats {
+		align-items: center;
+	}
+
+	.icon-play {
+		width: 60px;
+		height: 60px;
+		margin: 10px;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/API/create-inner-audio-context/inner-audio-path.uvue b/pages/API/create-inner-audio-context/inner-audio-path.uvue
index db4e2051..a35e4261 100644
--- a/pages/API/create-inner-audio-context/inner-audio-path.uvue
+++ b/pages/API/create-inner-audio-context/inner-audio-path.uvue
@@ -29,7 +29,7 @@
             description: '本地路径：/static方式',
             src: '/static/test-audio/ForElise.mp3'
           },
-          {
+          {     
             description: '本地路径：../static/',
             src: '../../../static/test-audio/ForElise.mp3'
           },
@@ -62,7 +62,7 @@
         this._audioContext!.pause();
         this.isPlaying = false;
       },
-      play(audioUrl, index) {
+      play(audioUrl:string, index:number) {
         // console.log(index,audioUrl);
         if (this.isPlaying && this.playIndex == index) {
           this.pause();
@@ -81,7 +81,7 @@
         });
         this._audioContext!.onError((err) => {
           this.isPlaying = false;
-          console.log('err', err);
+           console.log('err', err);
         });
       }
     }
-- 
GitLab