1

pages/catalog/detail.uvue

@@ -30,7 +30,18 @@ const menu2Items = [
 //当前进度
 const progress = ref(1)
 const progress2 = ref(1)
-
+const recorderManager = ref<any>()
+const innerAudioContext = ref<any>()
+const voicePath = ref('')
+function initOnlibeRecord() {
+  recorderManager.value = uni.getRecorderManager();
+  innerAudioContext.value = uni.createInnerAudioContext();
+  innerAudioContext.value.autoplay = true;
+  recorderManager.value.onStop(function (res) {
+    console.log('recorder stop' + JSON.stringify(res));
+    voicePath.value = res.tempFilePath;
+  });
+}
 
 const course = ref<SubjectCourseResult>()
 //通过路由参数获取课程id
@@ -57,6 +68,7 @@ async function fetchCatalog() {
 onMounted(async () => {
   await fetchCatalog()
   isLoading.value = false
+  initOnlibeRecord()
   setTimeout(() => {
     showProgress.value = false
     isLoading.value = false
@@ -153,6 +165,21 @@ function handleTop() {
   progress2.value = 4
   console.log(progress2.value)
 }
+function startRecord() {
+  console.log('开始录音');
+  recorderManager.value.start();
+}
+function endRecord() {
+  console.log('录音结束');
+  recorderManager.value.stop();
+}
+function playVoice() {
+  console.log('播放录音');
+  if (voicePath.value) {
+    innerAudioContext.value.src = voicePath.value;
+    innerAudioContext.value.play();
+  }
+}
 </script>
 <template>
   <Loading v-show="isLoading" />
@@ -160,15 +187,19 @@ function handleTop() {
     <Back v-show="showProgress" />
     <view class="w-[64vw] h-[36vw] absolute top-1/2  z-[1] left-[7vw]  translate50"
       :class="{ ' rounded-2xl p-[3px] bg-black mt-[25px] ': showProgress, 'video-container': !showProgress }">
-      <video v-if="progress2 !== 3" id="video1" class="w-full h-full " :class="{ 'rounded-2xl': showProgress }"
+      <video v-if="progress2 === 3" id="video1" class="w-full h-full " :class="{ 'rounded-2xl': showProgress }"
         :src="data.videoSrc" :show-center-play-btn="false" :show-background-playback-button="false"
         :show-fullscreen-btn="false" :show-casting-button="false" autoplay @controlstoggle="handleControlsToggle"
         @ended="handleEnded">
       </video>
       <view v-else class="w-full h-full ">
         <img src="https://oss.xiaoxiongcode.com/static/home/2.png" alt="" class="w-full h-full object-cover" />
-        <view class="absolute top-1/2 left-1/2 text-[20px] font-bold text-white text-center" @tap="handleTop">
-          假设
+        <view class="absolute top-1/2 left-1/2 text-[20px] font-bold text-white text-center">
+
+          <button @tap="startRecord">开始录音</button>
+          <button @tap="endRecord">停止录音</button>
+          <button @tap="playVoice">播放录音</button>
+          <button @tap="handleTop">下一步</button>
         </view>
       </view>
       <view class="video-fullscreen_title" v-show="showControls && !showProgress">