Jump to content

Using Volume in the HTML Audio tag


dss_cottage

Recommended Posts

I am attempting to embed an MP3 in my web site and want it to start playing at 50% volume. It is successfully embedded but I can't seem to get the volume adjustment to work. It always stars out at full volume but can be adjusted by the volume slider.

 

I have tried many variations and searched the net for examples but have been unable to find one that works.

 

Here is my current code:

<audio preload="auto" loop volume="0.5" controls>  <source src="/taveuni/merged.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio>

Can anyone tell me what I'm doing wrong or point me to an example that shows me how to make it work?

Link to comment
Share on other sites

According to the MDN, the volume attribute is not supported by any browser:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Browser_compatibility

 

It seems that you can use Javascript to modify the volume property of the element, though: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume

Link to comment
Share on other sites

 

 

It seems that you can use Javascript to modify the volume property of the element, though: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume

 

I'm pretty good with HTML but a real newbie with Javascript. I've tried a few ways to implement this code but can get it working. Sorry to be dense but is there an example to show how this Javascript is applied?

Link to comment
Share on other sites

 

Thank-you for the suggestion. It works. It's not exactly what I was looking for. I wanted to set the volume initially at 20% and let the user adjust it with the slider if they preferred. However, this makes it more obvious that the volume can be adjusted if the user isn't familiar with the player. Therefore, I'm going to use the suggestion.

 

Thanks again!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...