Tab audio indicators and muting in Firefox Nightly

Sometimes when you have several tabs open, and one of them starts to make some noise, you may wonder where the noise is coming from.  Other times, you may want to quickly mute a tab without figuring out if the web page provides its own UI for muting the audio.  On Wednesday, I landed the user facing bits of a feature to add an audio indicator to the tabs that are playing audio, and enable muting them.  You can see a screenshot of what this will look like in action below.

Tab audio indicators in action

Tab audio indicators in action

As you can see in the screenshot, my Soundcloud tab is playing audio, and so is my Youtube tab, but the Youtube tab has been muted.  Muting and unmuting a tab is easy by clicking on the tab audio indicator icon.  You can now test this out yourself on Firefox Nightly tomorrow!

This feature should work with all APIs that let you play audio, such as HTML5 <audio> and <video>, and Web Audio.  Also, it works with the latest Flash beta.  Note that you actually need to install the latest Flash beta, that is, version which was released yesterday.  Earlier versions of Flash won’t work with this feature.

We’re interested in your feedback about this feature, and especially about any bugs that you may encounter.  We hope to iron out the rough edges and then let this feature ride the trains.  If you are curious about this progress, please follow along on the tracking bug.

Last but not least, this is the results of the effort of many of my colleagues, most notably Andrea Marchesini, Benoit Girard, and Stephen Horlander.  Thanks to those and everyone else who helped with the code, reviews, and other things!

Tagged with: ,
17 comments on “Tab audio indicators and muting in Firefox Nightly
  1. I assume Adobe aren’t backporting that support to Flash on Linux?

  2. Jim says:

    Do you have to have Flash beta as noted in article to see the indicators on HTML5 , i.e. Youtube stuff ?

  3. nnethercote says:

    Wow! I was totally expecting you to say “it doesn’t work with Flash”, so that’s great news to hear that it does 🙂

  4. venkat says:

    So you’re enabling tab audio indicators by default in Nightly, are any preferences to toggle in about:config are available? Today is 31st, not found the feature in latest nightly. What could be the reason?

    • ehsan says:

      The pref is browser.tabs.showAudioPlayingIcon, but it is enabled by default in Nightly now. What website are you testing on?

  5. Rick says:

    Such a great improvement for the user experience, it is a bit sad that it has taken so long to implement this. The ability to mute it directly is also excelent, can’t wait to try it out.

    • nnethercote says:

      “Better late than never” is usually true. Life is more enjoyable if you can look at things positively.

    • Caspy7 says:

      This would have been implemented years ago as there was definite desire from Firefox developers, but it required Adobe to enable the audio features in Flash. Multiple requests to Adobe were met with silence. It was only recently that they added the feature (and developers immediately sprang into action).

      Chrome has a separate version of Flash which Google employs Adobe to develop which is why it has this already.

  6. I wonder whether this indicator works with Web Speech API. (I believe we should have partially support this on Windows on Nightly, though haven’t tested). IIRC, that of Chrome doesn’t work. In addition, since that API seems to use a global singleton, I’m really concerned it would be a real issue if some page wants to abuse it.

    • ehsan says:

      I don’t think we have enabled Web Speech anywhere yet except on Firefox OS. I haven’t tested the interaction but I suspect that Web Speech is currently not hooked up into this. We should do that when we decide to ship that API.

      Not sure if I understand the rest of your comment about the global singleton…

      • I believe we’ve implemented TTS part on Windows as well (see bug 1003457), not sure whether we are going to ship that, though.

        As far as I tested in Chrome, if multiple pages are going to use the TTS API, only one wins. And the lucky page can hold it as long as it wants, doesn’t matter whether it is shown. It means if a page occupies the resource, the user won’t be able to use it anywhere else until they find and close that page.