為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

HTML5 audio player has no volume control

  • 13 回覆
  • 12 有這個問題
  • 9 次檢視
  • 最近回覆由 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

被選擇的解決方法

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?

從原來的回覆中察看解決方案 👍 1

所有回覆 (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

選擇的解決方法

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?

由 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