123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- <template>
- <div class="bg-music" :class="{ ['icon-playing']: playing }" @click="handleClick" v-show="show">
- <audio :src="url" ref="audioRef" loop @loadedmetadata="show = true" @play="handlePlay"></audio>
- </div>
- </template>
-
- <script>
- export default {
- name: 'BgMusic',
- data() {
- const { origin, pathname } = window.location
-
- return {
- show: false,
- playing: false,
- url: `${origin}${pathname}bg.mp3`
- }
- },
- mounted() {
- document.body.addEventListener("click", this.handleClick);
-
- this.$nextTick(() => {
- this.handleIOSAudio()
- })
-
- },
- methods: {
- handleIOSAudio() {
- const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
- if (isiOS) {
- document.addEventListener('WeixinJSBridgeReady', () => {
- this.$refs.audioRef.load()
- }, false)
- }
- },
- handleClick() {
- if (!this.show || !this.$refs.audioRef) return;
-
- if (this.playing) {
- this.$refs.audioRef.pause();
- } else {
- this.$refs.audioRef.play();
- }
-
- this.playing = !this.playing
- },
-
- handlePlay() {
- document.body.removeEventListener("click", this.handleClick);
- }
- }
- }
- </script>
-
- <style lang="scss" scoped>
- .bg-music {
- position: fixed;
- top: 1em;
- right: 1em;
- z-index: 10;
-
- width: 2em;
- height: 2em;
- background-image: url('../assets/indexImg/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>
|