Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

HTML5 audio player has no volume control

  • 13 replies
  • 12 have this problem
  • 9 views
  • Last reply by kenrob

more options

G'day,

The HTML5 audio player has not supported a volume control since apparently version 11. We're now at version 26. Is there any plan to restore a volume control

G'day, The HTML5 audio player has not supported a volume control since apparently version 11. We're now at version 26. Is there any plan to restore a volume control

Chosen solution

Here's a variation on the script. Two major differences. First, it inserts a small bubble with a delta character, and only shows the slider when you mouse over that. Second, it is designed to add the controls next to any <audio> element without any further customization, so there's a chance it will work on your PBX page, assuming there's space for the slider.

var players=document.getElementsByTagName("audio"); for (var i=0; i<players.length; i++){var slider=document.createElement("input"); slider.setAttribute("type", "range"); slider.setAttribute("min", "0"); slider.setAttribute("max", "100"); slider.setAttribute("step", "10"); slider.setAttribute("value", players[i].volume*100); slider.setAttribute("style", "width:100px;height:2em;display:none"); slider.setAttribute("oninput", "this.parentNode.previousSibling.volume=this.value/100"); var sNew=document.createElement("span"); sNew.innerHTML='<span style="color:#fff;font-weight:bold;vertical-align:top">&nbsp;&Delta;&nbsp;</span>'; sNew.appendChild(slider); sNew.setAttribute("style","padding-top:1em;margin-left:6px;background-color:#aaa;border-radius:8px"); if(players[i].nextSibling) players[i].parentNode.insertBefore(sNew, players[i].nextSibling); else players[i].parentNode.appendChild(sNew); sNew.setAttribute("onmouseover", "this.children[0].style.display='none'; this.children[1].style.display='inline'"); sNew.setAttribute("onmouseout", "this.children[0].style.display='inline'; this.children[1].style.display='none'; this.children[0].blur(); this.children[1].blur(); this.blur()");}

Does that work?

Read this answer in context 👍 1

All Replies (13)

more options

Did you try to right-click the player?

There should be an entry in the right-click context menu to show or hide the controls.
If that doesn't work then the controls might be out of view or otherwise not working properly.

Try to disable hardware acceleration in Firefox.

more options

G'day, Thanks for your comments.

The audio control had start/stop, progress, and mute controls. I tried the context menu and successfully hid what had previously been displaying - now how do I get it back?

Hardware acceleration was already off.

more options

What do you currently see in the right-click context menu?

Is that show controls or hide controls or are both missing?

Does Safe Mode have any effect?

Firefox should show the controls once again when you reload the page if you did hide them.

more options

Is there a site where you're doing your testing? I'm not sure that picking a random site will demonstrate the problem. Can you reply with an address?

more options

As far as random examples go, I get usable volume sliders when I mouse over the mute/unmute icon on these:

Firefox 26 on Windows 7 64-bit.

more options

Thanks guys, Reloading the page reinstated the control that I'd hidden.

I can't provide the website because it's a PBX and the files are call recordings, .wav files. However, here's another site that shows the audio control as I see it (that is - without the volume slider) http://hpr.dogphilosophy.net/test/

To confuse the issue, when I visit jscher2000's links, they both work, complete with volume sliders!

(The PBX displays a volume control when viewed in Chrome.)

more options

I think I see the difference. When I load the MP3 and OGG files directly into a tab, Firefox uses the video player to play them. That player has the volume control bar. That would explain the difference.

After looking at the earlier thread (HTML5 audio player has no volume control), I think the answer is:

  • We should find the pending bug and vote for the player to be fixed
  • You might need an add-on or userscript to inject audio controls into your page as a temporary workaround until the player is fixed
more options

Thank you. Unfortunately that means that for me it's unfixable. I'll try to find a bug report that I can upvote.

Thanks for your efforts and Season's Greetings to you.

more options

Hi kenrob, I have an idea for injecting the slider into the page. You can try it on that test page.

First select and copy this very long line of script:

var player=document.getElementById("testClip"); var slider=document.createElement("input"); slider.setAttribute("type", "range"); slider.setAttribute("min", "0"); slider.setAttribute("max", "100"); slider.setAttribute("step", "10"); slider.setAttribute("value", player.volume*100); if(player.nextSibling) player.parentNode.insertBefore(slider, player.nextSibling); else player.parentNode.appendChild(slider); slider.style.width="100px"; slider.style.height="2em"; slider.setAttribute("oninput", "document.getElementById('testClip').volume=this.value/100");

Then load: http://hpr.dogphilosophy.net/test/

Open the web console (Ctrl+Shift+k).

Paste the script next to the caret (») and press Enter to run it.

You should get a slider to the right of the player (see attached screen shot). It is set for 11 increments from 0 to 10 (sorry, if I make it go to 11, I'll generate an error) and adjusts the volume in real time as you slide it.

Useful?

This requires customization to match the target page (it needs a reference to the player in two places), so you can't just drop it into your page. Also, the space available might be quite different. But in principle, you should be able to use something like this on your page or any page.

more options

Chosen Solution

Here's a variation on the script. Two major differences. First, it inserts a small bubble with a delta character, and only shows the slider when you mouse over that. Second, it is designed to add the controls next to any <audio> element without any further customization, so there's a chance it will work on your PBX page, assuming there's space for the slider.

var players=document.getElementsByTagName("audio"); for (var i=0; i<players.length; i++){var slider=document.createElement("input"); slider.setAttribute("type", "range"); slider.setAttribute("min", "0"); slider.setAttribute("max", "100"); slider.setAttribute("step", "10"); slider.setAttribute("value", players[i].volume*100); slider.setAttribute("style", "width:100px;height:2em;display:none"); slider.setAttribute("oninput", "this.parentNode.previousSibling.volume=this.value/100"); var sNew=document.createElement("span"); sNew.innerHTML='<span style="color:#fff;font-weight:bold;vertical-align:top">&nbsp;&Delta;&nbsp;</span>'; sNew.appendChild(slider); sNew.setAttribute("style","padding-top:1em;margin-left:6px;background-color:#aaa;border-radius:8px"); if(players[i].nextSibling) players[i].parentNode.insertBefore(sNew, players[i].nextSibling); else players[i].parentNode.appendChild(sNew); sNew.setAttribute("onmouseover", "this.children[0].style.display='none'; this.children[1].style.display='inline'"); sNew.setAttribute("onmouseout", "this.children[0].style.display='inline'; this.children[1].style.display='none'; this.children[0].blur(); this.children[1].blur(); this.blur()");}

Does that work?

Modified by jscher2000 - Support Volunteer

more options

G'day Jefferson,

Magic. Both work, and they both work on the PBX page. Now I just have to get the PBX developers to maintain their page and all will be right with the world.

Thank you, very much, for your efforts. I really appreciate it.

-- Regards Ken

more options

Great news, Ken. If you need to run this often, and you typically display Firefox's Bookmarks Toolbar, making the script into a button on that bar may be more convenient. Here's how you would set up a bookmarklet:

(1) Select and copy this slightly revised script (new bits bolded for reference):

javascript:var players=document.getElementsByTagName("audio"); for (var i=0; i<players.length; i++){var slider=document.createElement("input"); slider.setAttribute("type", "range"); slider.setAttribute("min", "0"); slider.setAttribute("max", "100"); slider.setAttribute("step", "10"); slider.setAttribute("value", players[i].volume*100); slider.setAttribute("style", "width:100px;height:2em;display:none"); slider.setAttribute("oninput", "this.parentNode.previousSibling.volume=this.value/100"); var sNew=document.createElement("span"); sNew.innerHTML='<span style="color:#fff;font-weight:bold;vertical-align:top">&nbsp;&Delta;&nbsp;</span>'; sNew.appendChild(slider); sNew.setAttribute("style","padding-top:1em;margin-left:6px;background-color:#aaa;border-radius:8px"); if(players[i].nextSibling) players[i].parentNode.insertBefore(sNew, players[i].nextSibling); else players[i].parentNode.appendChild(sNew); sNew.setAttribute("onmouseover", "this.children[0].style.display='none'; this.children[1].style.display='inline'"); sNew.setAttribute("onmouseout", "this.children[0].style.display='inline'; this.children[1].style.display='none'; this.children[0].blur(); this.children[1].blur(); this.blur()");} void 0;

(2) Right-click the Bookmarks Toolbar and choose New Bookmark

(3) Paste the script into the second box, labeled Location

(4) Give your button a brief name like VOL and click the Add button

Your bookmarklet is ready to test.

Like the console change, this only lasts until the page is reloaded, but hopefully it's a little bit more convenient.

more options

G'day Jefferson,

You're being very productive - and very generous with your time. My browser now sports a neat little bookmarklet. Excellent - thank you again.

Season's Greetings to you and yours.

-- Regards Ken