修改

src/views/content-information/useSpeak.ts

@@ -5,8 +5,11 @@ import { onMounted, onUnmounted, reactive, toRefs } from 'vue';
  * @param musicContent 阅读内容
  * @returns
  */
-export const useSpeak = (musicContent?: string) => {
+export const useSpeak = (musicContent?: string, selectionCouser?: string) => {
   const _musicContent = musicContent ? '#' + musicContent : '#musicContent';
+  const _selectionCouser = selectionCouser
+    ? selectionCouser
+    : 'selectionCouser';
   const state = reactive({
     showDom: false,
     synth: null as any,
@@ -177,7 +180,7 @@ export const useSpeak = (musicContent?: string) => {
         const fHeight = firstRect.height;
         const musicContent: any = document.querySelector(_musicContent);
         const parentRect: any = musicContent?.getBoundingClientRect();
-        const showDom: any = document.getElementById('selectionCouser');
+        const showDom: any = document.getElementById(_selectionCouser);
         const showDomRect = showDom.getBoundingClientRect();
 
         // 判断 上边超出边界
@@ -190,13 +193,19 @@ export const useSpeak = (musicContent?: string) => {
         //       musicContent?.scrollTop
         //     ).toFixed(2) + 'px';
         // } else {
-        // console.log(
-        //   false,
-        //   parentRect?.bottom -
-        //   bottom +
-        //   (showDomRect.height + fHeight / 2) +
-        //   musicContent?.scrollTop
-        // );
+        console.log({
+          parentRect,
+          showDomRect,
+          firstRect,
+          dom: document.querySelector(_musicContent)
+        });
+        console.log(
+          false,
+          parentRect?.bottom -
+          bottom +
+          (showDomRect.height + fHeight / 2) +
+          musicContent?.scrollTop
+        );
         showDom.style.top =
           (
             y -
@@ -302,12 +311,11 @@ export const useSpeak = (musicContent?: string) => {
         sentence.classList.toggle('highlight', i === index);
       });
       // 滚动到高亮的部分
-      const highlightText = textContainer?.querySelector('.highlight');
-      // console.log(highlightText, 'highlight');
-      highlightText?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
-      });
+      // const highlightText = textContainer?.querySelector('.highlight');
+      // highlightText?.scrollIntoView({
+      //   behavior: 'smooth',
+      //   block: 'center'
+      // });
     };
 
     // 开始播放
@@ -348,8 +356,8 @@ export const useSpeak = (musicContent?: string) => {
           }
         }
 
-        const replaceText = ['长笛', '曲'];
-        const afterReplaceText = ['尝笛', '取'];
+        const replaceText = ['长笛', '曲', '打击乐'];
+        const afterReplaceText = ['尝笛', '取', '打击月'];
 
         if (sentence) {
           replaceText.forEach((item: string, index: number) => {
@@ -441,21 +449,26 @@ export const useSpeak = (musicContent?: string) => {
     speaker();
   };
 
+  const onDestory = () => {
+    document.removeEventListener('mouseup', getSelectText);
+    document.addEventListener('touchend', getSelectText);
+    onCloseSpeak();
+  };
+
   onMounted(async () => {
     document.addEventListener('mouseup', getSelectText);
     document.addEventListener('touchend', getSelectText);
   });
 
   onUnmounted(() => {
-    document.removeEventListener('mouseup', getSelectText);
-    document.addEventListener('touchend', getSelectText);
-    onCloseSpeak();
+    onDestory();
   });
 
   return {
     ...toRefs(state),
     onAllSpeak,
     onTextStart,
+    onDestory,
     onCloseSpeak,
     onTextReadOnly,
     processNode

src/views/prepare-lessons/model/source-instrument/detail.tsx

@@ -50,7 +50,11 @@ export default defineComponent({
     const route = useRoute();
     const speakMusicContent =
       'musicContent' + new Date().getTime() + Math.floor(Math.random() * 100);
-    const speak = useSpeak(speakMusicContent);
+    const selectionCouser =
+      'selectionCouser' +
+      new Date().getTime() +
+      Math.floor(Math.random() * 100);
+    const speak = useSpeak(speakMusicContent, selectionCouser);
     const forms = reactive({
       page: 1,
       rows: 20,
@@ -341,7 +345,7 @@ export default defineComponent({
                   style={{ fontSize: data.fontSize + 'px' }}>
                   {/* 选中的内容 */}
                   <div
-                    id="selectionCouser"
+                    id={selectionCouser}
                     class={[
                       styles.selectionCouser,
                       !speak.showDom.value && styles.hide

src/views/prepare-lessons/model/source-knowledge/detail.tsx

@@ -49,7 +49,11 @@ export default defineComponent({
     const musicContentRef = ref();
     const speakMusicContent =
       'musicContent' + new Date().getTime() + Math.floor(Math.random() * 100);
-    const speak = useSpeak(speakMusicContent);
+    const selectionCouser =
+      'selectionCouser' +
+      new Date().getTime() +
+      Math.floor(Math.random() * 100);
+    const speak = useSpeak(speakMusicContent, selectionCouser);
     const state = reactive({
       fontSize: 18,
       tableList: [] as any,
@@ -147,7 +151,7 @@ export default defineComponent({
                   style={{ fontSize: state.fontSize + 'px' }}>
                   {/* 选中的内容 */}
                   <div
-                    id="selectionCouser"
+                    id={selectionCouser}
                     class={[
                       styles.selectionCouser,
                       !speak.showDom.value && styles.hide

src/views/prepare-lessons/model/source-music/detail.tsx

@@ -52,6 +52,10 @@ export default defineComponent({
     const route = useRoute();
     const speakMusicContent =
       'musicContent' + new Date().getTime() + Math.floor(Math.random() * 100);
+    const selectionCouser =
+      'selectionCouser' +
+      new Date().getTime() +
+      Math.floor(Math.random() * 100);
     const speak = useSpeak(speakMusicContent);
     const data = reactive({
       loading: false,
@@ -364,7 +368,7 @@ export default defineComponent({
                   style={{ fontSize: data.fontSize + 'px' }}>
                   {/* 选中的内容 */}
                   <div
-                    id="selectionCouser"
+                    id={selectionCouser}
                     class={[
                       styles.selectionCouser,
                       !speak.showDom.value && styles.hide