Allow sounds to be set for builds

[cowley05]

Some users are using ccmenu to play sounds but have asked if we could integrate sounds into nevergreen so that they dont have to use two apps.

This would ideally be configurable and users could select what sounds relate to what type of build eg. failing, success, success after failure.

[GentlemanHal]

Any suggestions for libraries to use? There seems to be a few out there.

[cowley05]

No idea :s didn't check. I will have a look later and put a list here with my thoughts... Also I think even just HTML5 could have something simple to use but again i didn't check.

[joejag]

Javascript has playing audio built in:

new Audio('audio_file.mp3').play();

I've used this for game dev. I think I used ogg files that time.

[darrenhaken]

I would MASSIVELY want this.

@cowley05 i would help you work on this feature if you want.

[darrenhaken]

I'm taking a look at this right now and I'm after input on defining the requirements for this.

I was thinking of breaking down the problem into 3 phases to get something delivered: 1 - Play a predefined sound which you can either toggle on or off for failed builds. 2 - Allow the user to provide a sound file 3 - Configure when to play the sound i.e. failed builds, passed builds. I am less keen on this requirement as it could be more trouble than it's worth but I could see how some would like it.

Exploring option 1. Questions I had are:

• Which section of the Nevergreen dashboard would a 'Toggle Sound' checkbox reside?
• Any suggestion on the sound we could use to begin with?

[joejag]

Hi @darrenhaken thanks for picking this up. I think we talked about renaming "display" to "audio/visual" or something else. If you want to put the option in there that'd be great.

That said, we could just turn it on by default at first. I doubt there's many folk who have a machine dedicated to showing Nevergreen but only want other sounds playing other than build breakages..

Only thing to say about what sound, is to check the license for it, so we can add it to the project. Or, if you are feeling inspired then make it yourself!

As we are the build canaries, perhaps a bird theme?

[GentlemanHal]

It's a very good idea to break this into multiple steps, especially if you only really care about sounds when the build breaks. As I suspect that'll be as simple as adding an <audio> tag whenever we render a broken build on the monitor page.

Whereas playing sounds when builds are fixed or successful in general, requires the UI to start keep track of state for that purpose and we'd have to start triggering sounds directly via JavaScript.

Which section of the Nevergreen dashboard would a 'Toggle Sound' checkbox reside?

I'd add it to the Display section, which admittedly isn't a great name, but it's the section for options that change the monitor view. I'd create a new sub section called 'sounds' or similar and add the toggle and input boxes for custom sounds there.

Any suggestion on the sound we could use to begin with?

I'd go with something like this, https://www.freesound.org/people/noelpty/sounds/164857/

Something quite short that's easily associated with something being broken, and of course something that is free for us to use. I'd add it to resources/public/audio and set it as the default.

[GentlemanHal]

Ah @joejag beat me to it! :P

[joejag]

@GentlemanHal that sound is terrifying. That might be a good thing.

@darrenhaken +1 on breaking this into different steps

[darrenhaken]

I've been working on this today and I've realised a potential case we need to consider.

Every time the app receives new data from the CI server does this cause a whole new projects list to be generated? Even if a build was broken in the past?

I'm wondering if it would mean that a failing build would cause the audio to be played every time a build kicks off. In order to mitigate this we'd have to track state on what projects have already had a sound play.

This feels like more work so I'm wondering if we could complete it the simplest way first? Or will this be too annoying?

[GentlemanHal]

@darrenhaken No, React keeps track of this for us and only modifies the DOM when things change. So simply embedding a play once audio element as I mentioned above should work correctly...

https://facebook.github.io/react/docs/reconciliation.html

[darrenhaken]

@GentlemanHal Thanks I hoped that React would do that

[darrenhaken]

Is this issue now closed or do we need more work doing?

[GentlemanHal]

Good question, I think we should add an input box to allow the sound to be configurable before we close this issue. Just in case people hate the pacman sound we've picked by default.

We can open new issues for setting other sounds, such as success or when a previously failing build passes.

[GentlemanHal]

I've added the input box to configure the sound. I had a hard time finding direct links to appropriate sounds so maybe it isn't as useful as I thought?

If somebody (@darrenhaken, @joejag, @cowley05) could QA that would be good.

[joejag]

Seems good. It'd be good to get an indication when the sound file doesn't exist, or isn't accessible

[GentlemanHal]

@joejag Do you think the test button is good enough for now or should we provide more feedback before we close this issue?

[joejag]

If I use a bad URL or file I get this in the JS console:

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

Can we put a try catch block in (or a check) that displays a message saying "Problem playing sound file, please check the URL?". I don't think it needs to be fancier then that.

The experience otherwise is pressing the test button and nothing happens.

[GentlemanHal]

@joejag Have added a simple error message if the sound can't be loaded. Could you QA and close this issue if you're happy please 😄

[joejag]

Perfect.