从带有vue的方法播放时，Howler.JS无法播放音频

Question

我正尝试在Vue页面上使用Howler.JS播放音频文件。由于Chrome AudioContext的策略问题，我决定等待用户交互，这将触发一个方法来开始播放音频文件。但是，不会播放任何音频。我已经检查并确认该方法正在运行，因此它似乎是代码的Howler.JS部分出了问题。

我在Chrome75.0.3770.100(官方版本)(64位)的macOS Mojave 10.14.5 (18F132)上运行页面，带有Vue.JS 2.6.10和Howler.JS 2.1.2。我找到了这个解决方案(没有尝试过) Howler.js doesn't recognize src path to audio file，但它不适用，因为vue-howler没有得到维护。

<script>
import { Howl, Howler } from 'howler';

export default {
  name: 'Lobby',
  data() {
    return {
      userInteracted: false,
    }
  },
  methods: {
    interacted: function () {
      this.userInteracted = true

      var sound = new Howl({
        src: [require('../assets/waiting.mp3')]
      });

      sound.play();
    }
  }
};
</script>

Answer 1

您应该在howl对象中设置属性html5=true，这样它看起来

   var sound = new Howl({
    src: [require('../assets/waiting.mp3')],
    html5:true

  });

Answer 2

您可以通过HTML5 Audio以相同的方式播放声音

将playSound()注册为全局方法

​

    Vue.prototype.$playSound = (path, volume = 1) => {
      var audio = new Audio(path);
      audio.volume = volume
      audio.play();
}

​

​

this.$playSound('sounds/click.wav')

​

​

 <button @click="$playSound('sounds/click2.wav')">Click me!</button>

​