X
Tap here to go to the mobile version of the site.

Support Forum

HTML5 audio player has no volume control

Posted

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

Additional System Details

Installed Plug-ins

  • Shockwave Flash 11.9 r900
  • Citrix Online App Detector Plugin
  • Next Generation Java Plug-in 10.45.2 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • iTunes Detector Plug-in
  • VLC media player Web Plugin 2.0.6
  • Foxit Reader Plug-In For Firefox and Netscape

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; rv:24.0) Gecko/20100101 Firefox/24.0

More Information

cor-el
  • Top 10 Contributor
  • Moderator
12274 solutions 113676 answers

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.

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.<br /> 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

Question owner

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.

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.
cor-el
  • Top 10 Contributor
  • Moderator
12274 solutions 113676 answers

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.

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.
jscher2000
  • Top 10 Contributor
3235 solutions 29539 answers

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?

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?
jscher2000
  • Top 10 Contributor
3235 solutions 29539 answers

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.

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.

Question owner

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

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.)
jscher2000
  • Top 10 Contributor
3235 solutions 29539 answers

Helpful Reply

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
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 ([https://support.mozilla.org/en-US/questions/958681 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

Question owner

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.

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.
jscher2000
  • Top 10 Contributor
3235 solutions 29539 answers

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.

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 (&raquo;) 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.
jscher2000
  • Top 10 Contributor
3235 solutions 29539 answers

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?

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 &lt;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&lt;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='&lt;span style="color:#fff;font-weight:bold;vertical-align:top">&amp;nbsp;&amp;Delta;&amp;nbsp;&lt;/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

Question owner

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

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
jscher2000
  • Top 10 Contributor
3235 solutions 29539 answers

Helpful Reply

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.

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&lt;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='&lt;span style="color:#fff;font-weight:bold;vertical-align:top">&amp;nbsp;&amp;Delta;&amp;nbsp;&lt;/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.

Question owner

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

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