封装背景音乐功能

src/page/Home/App.vue

@@ -7,12 +7,11 @@
 </template>
 
 <script setup>
-import gsap from 'gsap'
+import gsap from "gsap";
 import Loading from "@/components/Loading";
 import Index from "@/components/Index";
 import Question from "@/components/Question";
-import { bgm } from '@/plugins'
-
+import { bgm } from "@/plugins";
 
 const showLoad = ref(false);
 const loadFn = (item) => {
@@ -36,9 +35,8 @@ const questionFn = (item) => {
   }
 };
 
-
 onMounted(() => {
-  bgm()
+  bgm();
 });
 </script>
 
@@ -48,6 +46,12 @@ onMounted(() => {
   background-color: rgb(255, 255, 255);
 }
 
+#musicBtn {
+  @include pos(60px, 60px, 80px, 40px);
+  @include bg_pos("music-icon.png");
+  z-index: 99;
+}
+
 .home {
   @include box(750px, 100vh);
   // position: relative;

src/plugins/index.js

@@ -1,7 +1,7 @@
 // 常用的方法
 import gsap from 'gsap'
 import { Howl, Howler } from 'howler';
-
+import { createVNode, render } from 'vue'
 
 
 // 初始化
@@ -14,18 +14,44 @@ const sound = new Howl({
 
 // 背景音乐
 export function bgm(autoPlay) {
-    let div = document.createElement('div')
-    let audio = document.createElement('audio')
+    const musicNode = createVNode(
+        'div',
+        {
+            class: 'music-icon',
+            id: 'musicBtn',
+            onClick: () => {
+                let auduoEle = document.querySelector("#audio")
+                if (auduoEle.paused) {
+                    auduoEle.play()
+                    audioAni.play()
+                } else {
+                    auduoEle.pause()
+                    audioAni.pause()
+                }
+            },
 
+        },
+    )
 
+    const audioNode = createVNode(
+        'audio',
+        {
+            class: 'audio-icon',
+            id: 'audio',
+            src: new URL(`@/assets/media/bgm.mp3`, import.meta.url).href,
+            autoPlay: true,
+            loop: true,
 
-    div.append(audio)
-    document.body.append(div)
+        },
+    )
 
-
-
-    // const bgm = new Howl({ src: [new URL(`@/assets/media/bgm.mp3`, import.meta.url).href] });
-    // bgm.play()
+    render(musicNode, document.body);
+    render(audioNode, document.querySelector("#musicBtn"));
+    let audioAni = gsap.timeline({ paused: true })
+    audioAni.to('#musicBtn', { duration: 10, rotation: "+=360", repeat: -1, ease: 'none' })
+    setTimeout(() => {
+        audioAni.play()
+    }, 1000)
 }
 
 

src/styles/global.scss

@@ -25,7 +25,7 @@ $green: green;
 // DIV背景
 @mixin bg_pos($src) {
   // new URL(`../assets/images/${url}`, import.meta.url).href
-  background-image: url("../assets/images/" + $src);
+  background-image: url("@/assets/images/" + $src);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }