关于H5自动播放被禁止的问题

通过增加触摸和点击的方法,来运行音乐的播放,再而移除对应的绑定方法。

<template>
  <div>
    <audio :src="mp3" preload ref="music" :controls="false" style="position: absolute; z-index: -1" />
  </div>
</template>
<script>
import { Vue, Component, Ref } from 'vue-property-decorator';

@Component
export default class MyAudio extends Vue {
  mp3 = require('music.mp3');
  
  @Ref('music') music;

  mounted() {
    document.addEventListener('touchend', this.startMusic);
    document.removeEventListener('click', this.startMusic);
  }

  startMusic() {
    this.$nextTick(() => {
      this.music.play();
      this.music.pause();
      document.removeEventListener('touchend', this.startMusic);
      document.removeEventListener('click', this.startMusic);
    });
  }
}
</script>

最后更新于

这有帮助吗?