upp

components.d.ts

@@ -13,6 +13,8 @@ declare module 'vue' {
     AudioPlayerNew: typeof import('./src/components/audioPlayerNew.vue')['default']
     AudioPlayerNews: typeof import('./src/components/audioPlayerNews.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    MpHtml: typeof import('./src/components/mp-html/mp-html.vue')['default']
+    Node: typeof import('./src/components/mp-html/node/node.vue')['default']
     Progress: typeof import('./src/components/progress.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/AudioBox.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { stat } from "fs";
+import { kill } from "process";
+
 // 播放状态
 const state = ref(false);
 const stateChange = (stateNew: boolean) => {
@@ -70,6 +73,8 @@ const updateProgress2 = (moveX: number) => {
 
 // 更新进度条（播放中）
 const updateProgress = (e: any) => {
+  console.log(e)
+  e.target.autoplay = true
   const progressBar = document.getElementById("progressBar");
   var value = e.target.currentTime / e.target.duration;
   if (progressBar) {
@@ -107,8 +112,12 @@ const timeToMinute = (times: any) => {
 };
 
 const clear = () => {
+  console.log("切换");
   const progressBar = document.getElementById("progressBar");
   progressBar!.style.width = 0 + "px";
+  var audio = document.getElementById("music1");
+  audio!.play();
+  state.value = true;
 };
 
 //暴露state和play方法

src/view/audioDetail/index.vue

@@ -91,7 +91,6 @@ watch(currentP, (newValue: any) => {
   console.log(audiobox.value);
   if (audiobox.value == null) {
     return;
-    // audiobox.value.clear();
   } else {
     audiobox!.value.clear();
   }
@@ -99,8 +98,7 @@ watch(currentP, (newValue: any) => {
 
 onMounted(() => {
   currentP.value = store.currentParagraph;
-  currentP.value.contentText.replace(/(\n|\r|\r\n|↵)/g, "<br /><p> </ p>");
-  //console.log(currentP.value);
+  console.log(currentP.value.contentText);
 });
 </script>
 
@@ -112,7 +110,9 @@ onMounted(() => {
       </div>
       <div class="content-box">
         <div class="content-title">{{ currentP.paragraphName }}</div>
-        <div class="p" v-html="currentP.contentText"></div>
+        <div class="p">
+          <div v-html="currentP.contentText"></div>
+        </div>
       </div>
       <div class="control-box">
         <!-- <audio :src="currentP.audioUrl"></audio> -->
@@ -177,6 +177,7 @@ onMounted(() => {
         letter-spacing: 6px;
         font-weight: 500;
         white-space: pre-wrap;
+        margin-top: 10px;
       }
     }