YFYC2-H5/src/components/Music.vue

<script setup lang="ts">
import { useVideo } from "@/store/Video/index";
const router = useRouter();
const store = useVideo();

const stateAu = ref(false);

store.$subscribe((mutation: any, state: any) => {
  var audio = document.getElementById("music1");
  if (state.isVideo) {
    stateAu.value = false;
    audio.pause();
  } else {
    stateAu.value = true;
    audio.play();
  }
});

const getAssetURL = (image: string) => {
  return new URL(`../assets/icon/${image}`, import.meta.url).href;
};

const onChange = () => {
  stateAu.value = !stateAu.value;
  var audio = document.getElementById("music1");
  if (stateAu.value) {
    console.log("play");
    audio.play();
  } else {
    console.log("pause");
    audio.pause();
  }
};

// onMounted(() => {
//   if (audio && audio.paused) {
//     audio.play();
//   }
// });
</script>

<template>
  <div class="music" @click="onChange">
    <audio
      src="./audio/黄扬苏幕 - 鸠兹春盛.mp3"
      controls
      loop
      id="music1"
      hidden
      playsinline
    ></audio>
    <img
      :src="stateAu ? getAssetURL('play.png') : getAssetURL('pause.png')"
      alt=""
    />
  </div>
</template>

<style lang="less" scoped>
.music {
  z-index: 1000;
  position: fixed;
  top: 10px;
  right: 10px;
  .audio-box {
    // display:;
  }
  img {
    width: 10vw;
    height: 10vw;
  }
}
</style>