Question

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

我正在使用Vue.JS 2.6.10和Howler.JS 2.1.2的macOS Mojave 10.14.5（18F132）上的Chrome 75.0.3770.100（官方内部版本）（64位）上运行页面。我找到了此解决方案（尚未尝试过）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

您可以通过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>

Answer 2

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

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

  });

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

2 个答案: