使用vue写一个自动播放的按钮组件

<template>
  <section :class="['music', { playing }]" @click="toggleMusic">
    <audio loop id="audio" autoplay preload>
      <source src="" />
    </audio>
  </section>
</template>
<script>
export default {
  name: 'Music',
  data() {
    return {
      playing: false,
      audio: null
    };
  },
  mounted() {
    this.audio = document.getElementById('audio');
    document.addEventListener(
      'WeixinJSBridgeReady',
      () => {
        console.log('WeixinJSBridgeReady');
        this.audio.play();
      },
      false
    );
    this.playing = true;
  },
  methods: {
    toggleMusic() {
      if (this.playing) {
        this.audio.pause();
        this.playing = false;
      } else {
        this.audio.play();
        this.playing = true;
      }
    }
  }
};
</script>

<style lang="less">
.music {
  background: url("./music-disable.png") no-repeat;
  &.playing {
    background: url("./music.png") no-repeat;
    animation: play 3s linear infinite;
  }
  @keyframes play {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>