HTML <audio> volume attribute

[jacobmischka]

I know that volume is not one of the documented bind properties for <audio>, but I'm surprised that setting the attribute doesn't work at all. This can be worked around with refs, but it would be handy if svelte did that for us when changing volume.

<audio src="{{src}}" volume="{{volume}} />

I imagine this shouldn't be terribly difficult, I'll try to look at this as soon as I find the time.

Thank you!

[Conduitry]

Volume attributes currently compile the same way any regular attribute does:

setAttribute(audio, "volume", state.volume);

Is there some corresponding property that needs to be used instead, that was missed here? If there is, it doesn't look like it's on MDN.

[jacobmischka]

I think the element just wants to have the property set directly (audio.volume = 0.66), it doesn't seem like it responds to dom element attribute changes.

[PaulBGD]

Looks like it should support this?: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#attr-volume

edit: removed some stupid stuff

[jacobmischka]

That page doesn't mention anything about whether the volume should update with the attribute updating, merely that you can set the initial state using it.

I tested this REPL in Firefox Nightly and Chrome, both behave the same way: https://svelte.technology/repl?version=1.54.0&gist=718ff93aa528f49030c68a988108a0c2

[jacobmischka]

Here's an example with audio instead of relying on that property value: https://svelte.technology/repl?version=1.54.0&gist=7cad943bb07c698cb02d5e9efbe74621

[jacobmischka]

The fix to this is probably to just implement bind for the volume property for video and audio elements, I'll try to do that soon!

Edit: Or yes, just use the volume property instead of setting the dom attribute, sorry for missing you mentioning that earlier!

[mrkishi]

The <audio> tag has no volume content attribute at all.

I'm surprised the MDN page doesn't show the specific types of the attributes. volume is an IDL attribute (available via js), which is not the same as content attributes (those you can set on html tags). MDN on the difference.

See the specification and the repl without bindings.

[jacobmischka]

Oh interesting, I guess I misunderstood the MDN page. Thanks for clearing that up!

[mrkishi]

Not much of a misunderstanding when they completely omitted it from the page! 😄