Custom Audio Player

I am trying to create a custom audio player, everything seems work, but this part of code doesn’t works:

caudio.addEventListener("mouseup", (e) => {
  e.preventDefault();
  vscaled.value = music.volume
  console.log(vscaled.value)
  console.log(music.volume)
})

Once the default audio player is hidden there is no use of what I am trying to do but still I am inquisitive why this doesn’t work.

it should update vscaled.value in the custom volume bar once in default volume bar changes are registered.

Have you looked at the values for music.volume and vscaled.value?

It should be mostly evident what’s happening if you look at them… (hint: Why did you have to change the vscaled onmouseup?)

Extra credit: How could you do it without making those changes? (Extra credit hint: Go back to your HTML.)

Even hard coding doenst make any changes

vscaled.value = 36

Event is not triggering at audio tag.

Well probably because mouseup doesnt make sense as an audio element event, and audio elements generally dont bubble events up. You’re probably trying to trigger off of the volumechange event of the audio element.

Yes, True. This will not work no need to waste time?

Well if your goal is to hide the default audio player from the user behind your own custom interface, I dont see why binding mouse events to the thing you’re trying to hide would be worth time. (For that matter, you wouldnt bind the volumechange either - otherwise you end up in an unending loop)

True, Practically no sense, but stil I was just giving it a try so that both volume bar: real and pseudo should be in harmony. There is no user based practical usability once audio tag is hidden.

As it’s being done purely for interest, heres how I fixed it:

    <input type="range" name="vscaled" id="vscaled" value="0.000" max="1.000" min="0.000" step="0.001">
vscaled.addEventListener("mouseup", (e) => {
  music.volume = vscaled.value
})

music.addEventListener("volumechange", (e) => {

(You dont need to scale the volume from the audio - it’s on a 0-1 floating point scale. So the extra credit was "realize that the HTML Input Type=Range has a Step parameter; use it.)

Cam you Please explain this further →

value="0.000" 
max="1.000" 
min="0.000" 
step="0.001"

why not 0.1, why 0.001? Any reason behind the choice?

just because I saw in my experiment that the audio control was sending values like 0.475 (47.5%). If you want to round to a different value, set the step differently. If you set it to 0.1, it would round to the nearest 10% (or it may be a Ceiling instead of a Round… didnt test that deeply.)

1 Like

Ok so rage of scalabilty is enhanced, Right?

It’s a measurement of precision, yes. 0.001 means it will register every tenth-of-a-percent volume change. 0.005 would mean it registers every 1/2 of a percent volume change. etc.

1 Like

Thanks, Can you also discuss what do they all do:

value="0.000" 
max="1.000" 
min="0.000" 
step="0.1"

Sometimes there are false notions, I am trying to ensure with the help of your discussion I take forward right concepts.

Value: Initial value.
Max: The top of the range; 1 because 100% = 1.
Min: The bottom of the range; 0 because 0% = 0.
Step: What increments the range should count in.

1 Like

Step is associated with volume bar or progress bar or both?

Step is associated with a range type input.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.