更新样式

src/views/creation/edit/index.tsx

@@ -21,19 +21,6 @@ export default defineComponent({
 
     const onSubmit = async () => {
       try {
-        // {
-        //   "id": "1698984095609106434",
-        //   "musicPracticeRecordId": 1698983103032250369,
-        //   "type": "FORMAL",
-        //   "img": "",
-        //   "videoUrl": "www.baidu.com",
-        //   "jsonConfig": "{\"test\": \"test\"}"
-        // }
-        // if (!state.desc) {
-        //   showToast('请输入详情');
-        //   return;
-        // }
-
         await api_userMusicSave({
           id: state.id,
           img: state.img.join(','),

src/views/creation/index-share.tsx

@@ -1,8 +1,7 @@
 import { defineComponent, onMounted, reactive, ref } from 'vue';
-import WaveSurfer from 'wavesurfer.js';
+// import WaveSurfer from 'wavesurfer.js';
+// import Regions from 'wavesurfer.js/dist/plugins/regions.js';
 import styles from './index.module.less';
-import MSticky from '@/components/m-sticky';
-import MHeader from '@/components/m-header';
 import { Cell, Image, List, Popup, Slider } from 'vant';
 import iconMember from './images/icon-member.png';
 import iconZan from './images/icon-zan.png';
@@ -42,6 +41,7 @@ export default defineComponent({
       musicDetail: {} as any,
       timer: null as any,
       paused: true,
+      audioWidth: 0,
       currentTime: 0,
       duration: 0.1,
       loop: false,
@@ -59,6 +59,7 @@ export default defineComponent({
       }
     });
     const wavesurfer = ref();
+    // window.AudioContext = window.AudioContext || window.webkitAudioContext;
     const audioDom = new Audio();
     audioDom.controls = true;
     audioDom.style.width = '100%';
@@ -150,45 +151,61 @@ export default defineComponent({
     };
 
     const initAudio = () => {
-      wavesurfer.value = WaveSurfer.create({
-        container: document.querySelector(`#${audioId}`) as HTMLElement,
-        waveColor: '#fff',
-        progressColor: '#2FA1FD',
-        url: state.musicDetail.videoUrl,
-        cursorWidth: 0,
-        height: 35,
-        width: 'auto',
-        normalize: true,
-        // Set a bar width
-        barWidth: 2,
-        // Optionally, specify the spacing between bars
-        barGap: 2,
-        // And the bar radius
-        barRadius: 4,
-        barHeight: 0.6,
-        autoScroll: true,
-        /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
-        autoCenter: true,
-        hideScrollbar: false,
-        media: audioDom
-      });
+      try {
+        audioDom.src = state.musicDetail.videoUrl;
+        audioDom.load();
+        audioDom.oncanplaythrough = () => {
+          state.paused = audioDom.paused;
+          state.duration = audioDom.duration;
+        };
+        // 播放时监听
+        audioDom.addEventListener('timeupdate', () => {
+          state.currentTime = audioDom.currentTime;
+          const rate = (state.currentTime / state.duration) * 100;
+          state.audioWidth = rate > 100 ? 100 : rate;
+        });
+        audioDom.addEventListener('ended', () => {
+          state.paused = audioDom.paused;
+        });
+        // wavesurfer.value = WaveSurfer.create({
+        //   container: document.querySelector(`#${audioId}`) as HTMLElement,
+        //   waveColor: '#fff',
+        //   progressColor: '#2FA1FD',
+        //   url: state.musicDetail.videoUrl,
+        //   cursorWidth: 0,
+        //   height: 35,
+        //   width: 'auto',
+        //   normalize: true,
+        //   // Set a bar width
+        //   barWidth: 2,
+        //   // Optionally, specify the spacing between bars
+        //   barGap: 2,
+        //   // And the bar radius
+        //   barRadius: 4,
+        //   barHeight: 1.2,
+        //   /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
+        //   // autoCenter: true,
+        //   hideScrollbar: false,
+        //   media: audioDom
+        // });
+        // // console.log(wavesurfer.value);
 
-      wavesurfer.value.once('interaction', () => {
-        // wavesurfer.value.play();
-      });
-      wavesurfer.value.once('ready', () => {
-        state.paused = audioDom.paused;
-        state.duration = audioDom.duration;
-      });
+        // // const wsRegions = wavesurfer.value.registerPlugin(Regions.create());
+        // wavesurfer.value.once('interaction', () => {
+        //   // wavesurfer.value.play();
+        // });
+        // wavesurfer.value.once('ready', () => {
+        //   state.paused = audioDom.paused;
+        //   state.duration = audioDom.duration;
+        // });
 
-      wavesurfer.value.on('finish', () => {
-        state.paused = true;
-      });
-
-      // 播放时监听
-      audioDom.addEventListener('timeupdate', () => {
-        state.currentTime = audioDom.currentTime;
-      });
+        // wavesurfer.value.on('finish', () => {
+        //   state.paused = true;
+        // });
+      } catch (e) {
+        //
+        console.log(e);
+      }
     };
 
     const __init = async () => {
@@ -250,11 +267,17 @@ export default defineComponent({
           {state.playType === 'Audio' && (
             <div class={styles.audioSection}>
               <div class={styles.audioContainer}>
-                <div
+                {/* <div
                   id={audioId}
                   onClick={(e: MouseEvent) => {
                     e.stopPropagation();
+                  }}></div> */}
+                <div
+                  class={styles.waveActive}
+                  style={{
+                    width: state.audioWidth + '%'
                   }}></div>
+                <div class={styles.waveDefault}></div>
               </div>
 
               <div class={styles.audioBox}>
@@ -396,7 +419,7 @@ export default defineComponent({
           <LoginModel
             onClose={() => (state.loginStatus = false)}
             onConfirm={async (val: boolean) => {
-              state.loginStatus = val;
+              state.loginTag = val;
               state.loginStatus = false;
               const { data } = await api_openUserMusicDetail(state.id);
               state.musicDetail = data;

src/views/creation/index.module.less

@@ -14,6 +14,29 @@
     width: 196px;
     height: 35px;
     left: 85px;
+
+    .waveActive,
+    .waveDefault {
+      width: 100%;
+      height: 100%;
+    }
+
+    .waveDefault {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: url('./images/wave-1.png')no-repeat center left;
+      background-size: cover;
+    }
+
+    .waveActive {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background: url('./images/wave-2.png')no-repeat center left;
+      background-size: cover;
+    }
   }
 
 
@@ -225,8 +248,12 @@
     font-weight: 500;
     color: #333333;
     line-height: 21px;
-    display: flex;
-    align-items: center;
+    // display: flex;
+    // align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
 
     .musicTag {
       margin-right: 6px;
@@ -238,6 +265,7 @@
       border-radius: 9px;
       border: 1px solid #FFBF9A;
       font-weight: 400;
+      vertical-align: text-bottom;
     }
   }
 

src/views/creation/index.tsx

@@ -1,20 +1,9 @@
 import { defineComponent, onMounted, reactive } from 'vue';
-import WaveSurfer from 'wavesurfer.js';
+// import WaveSurfer from 'wavesurfer.js';
 import styles from './index.module.less';
 import MSticky from '@/components/m-sticky';
 import MHeader from '@/components/m-header';
-import {
-  Button,
-  Cell,
-  Image,
-  List,
-  Popup,
-  Slider,
-  showFailToast,
-  showLoadingToast,
-  showSuccessToast,
-  showToast
-} from 'vant';
+import { Button, Cell, Image, List, Popup, Slider, showToast } from 'vant';
 import iconDownload from './images/icon-download.png';
 import iconShare from './images/icon-share.png';
 import iconDelete from './images/icon-delete.png';
@@ -51,6 +40,7 @@ export default defineComponent({
       playType: '' as 'Audio' | 'Video' | '', // 播放类型
       musicDetail: {} as any,
       timer: null as any,
+      audioWidth: 0,
       paused: true,
       currentTime: 0,
       duration: 0.1,
@@ -124,45 +114,60 @@ export default defineComponent({
     };
 
     const initAudio = () => {
-      const wavesurfer = WaveSurfer.create({
-        container: document.querySelector(`#${audioId}`) as HTMLElement,
-        waveColor: '#fff',
-        progressColor: '#2FA1FD',
-        url: state.musicDetail.videoUrl,
-        cursorWidth: 0,
-        height: 35,
-        width: 'auto',
-        normalize: true,
-        // Set a bar width
-        barWidth: 2,
-        // Optionally, specify the spacing between bars
-        barGap: 2,
-        // And the bar radius
-        barRadius: 4,
-        barHeight: 0.6,
-        autoScroll: true,
-        /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
-        autoCenter: true,
-        hideScrollbar: false,
-        media: audioDom
-      });
-
-      wavesurfer.once('interaction', () => {
-        // wavesurfer.play();
-      });
-      wavesurfer.once('ready', () => {
+      audioDom.src = state.musicDetail.videoUrl;
+      audioDom.load();
+      audioDom.oncanplaythrough = () => {
         state.paused = audioDom.paused;
         state.duration = audioDom.duration;
-      });
-
-      wavesurfer.on('finish', () => {
-        state.paused = true;
-      });
-
+      };
       // 播放时监听
       audioDom.addEventListener('timeupdate', () => {
         state.currentTime = audioDom.currentTime;
+        const rate = (state.currentTime / state.duration) * 100;
+        state.audioWidth = rate > 100 ? 100 : rate;
+      });
+      audioDom.addEventListener('ended', () => {
+        state.paused = audioDom.paused;
       });
+      // const wavesurfer = WaveSurfer.create({
+      //   container: document.querySelector(`#${audioId}`) as HTMLElement,
+      //   waveColor: '#fff',
+      //   progressColor: '#2FA1FD',
+      //   url: state.musicDetail.videoUrl,
+      //   cursorWidth: 0,
+      //   height: 35,
+      //   width: 'auto',
+      //   normalize: true,
+      //   // Set a bar width
+      //   barWidth: 2,
+      //   // Optionally, specify the spacing between bars
+      //   barGap: 2,
+      //   // And the bar radius
+      //   barRadius: 4,
+      //   barHeight: 0.6,
+      //   autoScroll: true,
+      //   /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
+      //   autoCenter: true,
+      //   hideScrollbar: false,
+      //   media: audioDom
+      // });
+
+      // wavesurfer.once('interaction', () => {
+      //   // wavesurfer.play();
+      // });
+      // wavesurfer.once('ready', () => {
+      //   state.paused = audioDom.paused;
+      //   state.duration = audioDom.duration;
+      // });
+
+      // wavesurfer.on('finish', () => {
+      //   state.paused = true;
+      // });
+
+      // // 播放时监听
+      // audioDom.addEventListener('timeupdate', () => {
+      //   state.currentTime = audioDom.currentTime;
+      // });
     };
 
     // 删除作品
@@ -246,11 +251,17 @@ export default defineComponent({
           {state.playType === 'Audio' && (
             <div class={styles.audioSection}>
               <div class={styles.audioContainer}>
-                <div
+                {/* <div
                   id={audioId}
                   onClick={(e: MouseEvent) => {
                     e.stopPropagation();
+                  }}></div> */}
+                <div
+                  class={styles.waveActive}
+                  style={{
+                    width: state.audioWidth + '%'
                   }}></div>
+                <div class={styles.waveDefault}></div>
               </div>
 
               <div class={styles.audioBox}>
@@ -429,7 +440,6 @@ export default defineComponent({
         <Popup
           position="bottom"
           v-model:show={state.shareStatus}
-          safeAreaInsetBottom
           style={{ background: 'transparent' }}>
           <ShareModel
             musicDetail={state.musicDetail}

src/views/creation/share-model/index.module.less

@@ -161,6 +161,7 @@
   position: relative;
   background-color: #fff;
   border-radius: 12px 12px 0px 0px;
+  padding-bottom: env(safe-area-inset-bottom);
 
   .iconClose {
     position: absolute;

vite.config.ts

@@ -13,7 +13,7 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-const proxyUrl = 'https://dev.lexiaoya.cn/';
+const proxyUrl = 'https://test.lexiaoya.cn/';
 // const proxyUrl = 'https://dev.kt.colexiu.com/';
 // const proxyUrl = 'http://192.168.3.143:7989/';
 export default defineConfig({