How to listen to volume changes of youtube iframe?
Here I found an example of how I can listen to the Play \ Pause button for youtube iframe.
player.addEventListener('onStateChange', function(e) {
console.log('State is:', e.data);
});
Now I need to listen to the volume changes. In the youtube documentation and here I found a method player.getVolume()
, but I have no idea how this method can be implemented if I want to receive information about volume changes from the iframe side, instead of asking me from my side.
On the YouTube demo page, such functionality exists (when I change the volume of the player, I see the corresponding changes in the line Volume, (0-100) [current level: **]
), but neither in the document nor on the internet can I find how to implement it.
I've also tried using the above code with an event onApiChange
(it's not clear to me what it actually is), for example:
player.addEventListener('onApiChange', function(e) {
console.log('onApiChange is:', e.data);
});
but the console doesn't show anything.
player.getOptions();
shows Promise {<resolved>: Array(0)}
.
Can anyone provide an example?
source to share
I checked the code on the YouTube demo page and found that the html line that shows the current YouTube volume ( <span id="volume">**</span>
) is constantly blinking (~ 2 times in 1 sec), so I can assume that this demo page is using something like this:
// YouTube returns Promise, but we need actual data
self = this
setInterval(function () { self.player.getVolume().then(data => { self.volumeLv = data }) }, 250)
This may not be the best method, but there seems to be no other option (I also tried listening for changes in the appropriate volume line style, but no luck due to a cross origin issue).
So this will allow us to "listen" to youtube volume changes.
Just in case anyone wants to set the youtube volume, you need to use [this.]player.setVolume(volume_from_0_to_100)
source to share