roundabout/src/components/BgMusic.vue

<template>
  <div
    class="bg-music"
    :class="{ ['icon-playing']: playing }"
    @click="handleClick"
    v-show="data.value.show"
  >
    <audio
      :src="data.value.url"
      ref="audioRef"
      loop
      @loadedmetadata="data.value.show = true"
      @play="handlePlay"
    ></audio>
  </div>
</template>



<script>
import { onMounted, ref } from 'vue'

export default {
  setup() {
    const { origin, pathname } = window.location

    let data = ref({
      show: false,
      playing: false,
      url: `${origin}${pathname}music/bg.mp3`
    })

    onMounted(() => {
      document.body.addEventListener('click', this.handleClick)

      this.$nextTick(() => {
        this.handleIOSAudio()
      })
    })

    const handleIOSAudio = () => {
      const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      if (isiOS) {
        document.addEventListener(
          'WeixinJSBridgeReady',
          () => {
            this.$refs.audioRef.load()
          },
          false
        )
      }
    }
    const handleClick = () => {
      if (!this.show || !this.$refs.audioRef) return

      if (this.playing) {
        this.$refs.audioRef.pause()
      } else {
        this.$refs.audioRef.play()
      }

      this.playing = !this.playing
    }

    const handlePlay = () => {
      document.body.removeEventListener('click', this.handleClick)
    }

    return {
      data,
      handleIOSAudio,
      handleClick,
      handlePlay
    }
  }
}
</script>


<style lang="less" scoped>
.bg-music {
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 10;

  width: 2em;
  height: 2em;
  background-image: url('~@/assets/ButtonImage/play.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  &.icon-playing {
    background-image: url('~@/assets/indexImg/paused.png');
    animation: musicrotate 3s linear infinite;
  }

  & > audio {
    max-width: 1px;
    max-height: 1px;
  }
}

@keyframes musicrotate {
  100% {
    transform: rotate(360deg);
  }
}
</style>