cancel
Showing results for 
Search instead for 
Did you mean: 

HTML5 audio player has no volume control

SOLVED
Highlighted
New User

HTML5 audio player has no 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

1 ACCEPTED SOLUTION

Accepted Solutions
Mozilla Support Contributor

Re: HTML5 audio player has no volume control

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?

13 REPLIES
Site Moderator

Re: HTML5 audio player has no volume control

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.

New User

Re: HTML5 audio player has no volume control

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.

Site Moderator

Re: HTML5 audio player has no volume control

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.

Mozilla Support Contributor

Re: HTML5 audio player has no volume control

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?

Mozilla Support Contributor

Re: HTML5 audio player has no volume control

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.

New User

Re: HTML5 audio player has no volume control

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.)

Mozilla Support Contributor

Re: HTML5 audio player has no volume control

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
New User

Re: HTML5 audio player has no volume control

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.

Mozilla Support Contributor

Re: HTML5 audio player has no volume control

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.

2013-12-19-20-24-53-ecf988.png