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.

• Tools > Options > Advanced > General > Browsing: "Use hardware acceleration when available"
• https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

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.

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?

• https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

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

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?

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

• OGG: https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.ogg
• MP3: http://media1.zvex.com/sounds/sample1.mp3

Firefox 26 on Windows 7 64-bit.

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

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

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.

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.

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?

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

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.

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