goldfire / howler.js

Javascript audio library for the modern web.
https://howlerjs.com
MIT License
23.81k stars 2.23k forks source link

Setting volume higher than "1.0" #1244

Open John113322 opened 4 years ago

John113322 commented 4 years ago

Can volume be set higher than "1.0" with howlerJS? In the readme it gives a range of 0.0 to 1.0 for volume. However, I have a fade in my code that uses "5" for the volume: "sound1.fade(0, 5, 1000);"

So far it works fine, but I am unsure if this is a correct way to do it. Is this an acceptable way to raise the volume of a sound file, or should the file instead be amplified in a sound editing program and kept within the 0.0 to 1.0 range given in the readme?

st-h commented 4 years ago

@John113322 you can not go any higher than 1. Here is the code snippet which shows that your volume will not be applied if it exceeds 1:

https://github.com/goldfire/howler.js/blob/808fe3421962b04007cc7e58b951c89572fba4ab/src/howler.core.js#L78

The issue is that the audio element (which is used in hmtl5 mode) does not support anything louder than 1: https://developer.mozilla.org/de/docs/Web/HTML/Element/audio

You could theoretically make this work by removing the check and using html5: false, as web audio uses an audio graph with a gain node, that supports amplification. If you want to make this work using the web audio element you can use the createMediaElementSource() function to connect an audio element to an audio graph and make use of a gain node to provide the amplification you need.

However, instead of messing around with howlers internals, I would recommend to implement your custom playback code if you have this specific needs (unless you need to support old browsers). And it's probably easier than you might expect unless you need to provide the same fallback behaviour as howler does.

Seblor commented 4 years ago

@st-h the thing is that the Howl constructor accepts values above 1, and works nicely (at least with html5: false).

To be more consistent, and allow for more flexibility, I think the behavior should be (for both the volume change and constructor) :

  1. In the case of the constructor, set the volume default value at 1
  2. Return if volume is undefined or below 0
  3. If Howler is configured with html5: true, and if it is higher than 1, lower it to 1
st-h commented 4 years ago

Yes, technically it is possible to set the volume higher than 1 depending in which mode you run Howler. If I remember correctly using an audio element, will not allow to set volumes higher than 1 (https://www.w3schools.com/tags/av_prop_volume.asp). You would need to connect the node to an audio graph, which includes a gain node. However, I have found that safari does not support this very well, which pretty much includes all available iOS browser as well. Now, as howler is set up as a solution that works consistent across the supported technologies, it limits its features to a common denominator. Yet, I do not have any opinion how howler should work in the future, as we replaced howler with custom code a while ago.

JanVeb commented 2 years ago

Can volume be set higher than "1.0" with howlerJS? In the readme it gives a range of 0.0 to 1.0 for volume. However, I have a fade in my code that uses "5" for the volume: "sound1.fade(0, 5, 1000);"

So far it works fine, but I am unsure if this is a correct way to do it. Is this an acceptable way to raise the volume of a sound file, or should the file instead be amplified in a sound editing program and kept within the 0.0 to 1.0 range given in the readme?

"sound1.fade(0, 5, 1000);" --> 5 here is not the volume but rather milliseconds, at millisecond 5 (since start of play) sound will start to fade out to 0 until millisecond 1000