How to set volume with MusicKit Web?

Question

Kimfucious OP

Created 4d

Replies 1

Boosts 0

Participants 1

I've got a web app built with MusicKit that displays a list of songs.

I have player controls for play, pause, skip next, skip, previous, toggle shuffle and set repeat mode.

All of these work by using music.<something>

The play button, when nothing is playing and nothing is in the queue, will enqueue all the tracks and start playing with the below, for example:

await music.setQueue({ songs, startPlaying: true });

I've implemented a progress slider based on feedback from the "playbackProgressDidChange" listener.

Now, how in the world can I set the volume? This seems like it should be simple, but I am at a complete loss here.

The docs say:

"The volume of audio playback, which is set directly on the HTMLMediaElement as the HTMLMediaElement.volume property. This value ranges between 0, which would be muting the audio, and 1, which would be the loudest possible."

Given that all my controls work off the music instance, I don't understand how I can do that.

In this video from WWDC 2022, music web components are touched on briefly. These are also documented very sparsely. The volume docs are here.

For the life of me, I can't even get the volume web component to display in the UI.

It appears that MusicKit Web is hobbled compared to the native implementation, but surely adjusting volume shouldn't be that hard right?

I'd appreciate any insight on how to do this, including how to get web components to work (in a Next JS app).

Thanks.

Boost

Answer 1

Kimfucious OP

4d

Okay, it appears this isn't that hard after all, but it's confusing, so I'll document some things here for future readers.

music.volume = 0.5 works. Not sure why I didn't try that, except that the docs were confusing.
The "playbackVolumeDidChange" listener event does not include the actual volume that the volume has changed to, so it's kinda worthless, unless your'e using the web component maybe.

What I've done is maintain volume in state and update state when I set music.volume.

This allows me to update a slider value and the actual volume in the music instance with some flexibility.

It would still be nice to know how to get web components working, so I'll leave this unanswered.

0