【问题标题】:howler.js update volume of a soundhowler.js 更新音量
【发布时间】:2016-05-29 00:45:24
【问题描述】:

我正在合作

howler.js 2.0

但似乎无法获得更新音量的简单示例。这里有一些示例代码:

window.sound = new Howl({
 src:'http://example.com/assets/audio/background.mp3',
  loop: true,
  volume: 0.15
});

window.updateVolume = function(value) {
  alert('before update volume:', window.sound.volume());
  sound.volume = value;
  alert('after update volume:', window.sound.volume());
}

我已经尝试过使用volume() functionvolume 属性。似乎没有一个工作。

JsFiddle:https://jsfiddle.net/umx2bdm8/

我错过了什么?另外,我注意到如果您多次单击play,则会开始播放相同声音的多个实例。我不希望这样,并且在特定的 howl 实例上点击 play 应该始终与该实例一起使用。

【问题讨论】:

    标签: javascript audio howler.js


    【解决方案1】:

    如果您查看howler.js 2.0’s docs for volume,它表明volume 是一个函数,而不是可分配的属性,并且您需要将新卷作为参数传入以设置卷。所以你需要使用sound.volume(value) 而不是sound.volume = value

    sound = new Howl({
      src: 'http://www.hochmuth.com/mp3/Tchaikovsky_Rococo_Var_orch.mp3',
      loop: true,
      volume: 0.5
    });
    
    updateVolume = function(value) {
      console.log('before update volume:', sound.volume());
      sound.volume(value);
      console.log('after update volume:', sound.volume());
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.0-beta13/howler.min.js"></script>
    
    
    <button onclick="sound.play()">
      Play
    </button>
    <button onclick="updateVolume(0.15)">
      Change volume to 0.15
    </button>

    (为了演示的目的,我切换了上面的音量值,所以听众不必担心点击按钮时音乐是否会突然耳聋。)

    【讨论】:

    • 您是否也知道如果您多次点击play 会出现多个声音播放实例?
    • 不,我不知道为什么——the docs for play 不要提到这应该发生。但我知道您可以通过将 HTML 更改为 onclick="sound.stop(); sound.play()" 来修复它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多