audio

src/modules/editor/components/CompUI/basicUI/Page/PageMusic.tsx

@@ -17,7 +17,7 @@ export const PageMusic = defineComponent({
 
     const audioRef = ref();
 
-    const playAudio = (status: boolean) => {
+    const playAudio = async (status: boolean) => {
       if (status) {
         audioRef.value.play();
       } else {
@@ -41,6 +41,7 @@ export const PageMusic = defineComponent({
       state.currentTime = v;
       audioRef.value.currentTime = v;
     };
+
     return () => {
       const music = rootComp?.value.music;
       return (
@@ -56,6 +57,7 @@ export const PageMusic = defineComponent({
             />
           ) : (
             <div
+              class={["music_button", state.playStatus ? "rotating" : ""]}
               onClick={() => {
                 playAudio(!state.playStatus);
               }}
@@ -63,13 +65,17 @@ export const PageMusic = defineComponent({
               <IconMusic />
             </div>
           )}
-          {music}
           <audio
             controls={false}
             ref={audioRef}
             key={music}
-            autoplay={store.isEditMode ? false : true}
             loop={store.isEditMode ? false : true}
+            autoplay={store.isEditMode ? false : true}
+            onPlay={() => {
+              if (!state.playStatus) {
+                state.playStatus = true;
+              }
+            }}
             onLoadedmetadata={(e: any) => {
               state.duration = e.target?.duration;
             }}
@@ -153,7 +159,7 @@ const AudioPlayer = defineComponent({
               disabled={!props.playStatus}
               tooltipVisible={false}
               min={0}
-              max={props.duration}
+              max={Math.floor(props.duration || 0)}
               value={props.currentTime}
               onChange={durationChange}
             ></Slider>
@@ -216,7 +222,29 @@ const AudioPlayerStyle = css`
 `;
 const MusicStyle = css`
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 10px;
+  right: 10px;
   z-index: 999;
+  .music_button {
+    width: 48px;
+    height: 48px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.5);
+    font-size: 28px;
+    border-radius: 24px;
+    cursor: pointer;
+    &.rotating {
+      animation: myRotate 5s linear infinite;
+    }
+  }
+  @keyframes myRotate {
+    0% {
+      transform: rotate(0);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;