Jump to content

Using Volume in the HTML Audio tag


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...