封装背景音乐功能

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)
 }