Disable histogram sound button, stop sonification when audio disabled…

… - see #319

(cherry picked from commit 296c77c)

js/common/model/HistogramSonifier.ts

@@ -15,6 +15,7 @@ import Utils from '../../../../dot/js/Utils.js';
 import histogramTone_mp3 from '../../../sounds/histogramTone_mp3.js';
 import Property from '../../../../axon/js/Property.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
+import audioManager from '../../../../joist/js/audioManager.js';
 
 const binSoundClip = new SoundClip( histogramTone_mp3, { initialOutputLevel: 0.7 } );
 soundManager.addSoundGenerator( binSoundClip );
@@ -68,6 +69,13 @@ export default class HistogramSonifier {
         binSoundClip.play();
       }
     } );
+
+    // If the audio is disabled, stop the histogram sonification
+    audioManager.audioEnabledProperty.lazyLink( audioEnabled => {
+      if ( !audioEnabled ) {
+        this.stopSonification();
+      }
+    } );
   }
 
   // Set the histogram data, which is used to determine the sonification
@@ -97,7 +105,7 @@ export default class HistogramSonifier {
 
     // If the data changes, stop playing the sound
     if ( cancelSonification ) {
-      this.histogramSonifierPhaseProperty.value = { phaseName: 'idlePhase' };
+      this.stopSonification();
     }
   }
 
@@ -106,10 +114,14 @@ export default class HistogramSonifier {
       this.startHistogramSoundSequence();
     }
     else {
-      this.histogramSonifierPhaseProperty.value = { phaseName: 'idlePhase' };
+      this.stopSonification();
     }
   }
 
+  private stopSonification(): void {
+    this.histogramSonifierPhaseProperty.value = { phaseName: 'idlePhase' };
+  }
+
   // Initiate the sequence of sounds for the histogram bins
   private startHistogramSoundSequence(): void {
 

js/common/view/HistogramNode.ts

@@ -47,6 +47,7 @@ import stopSolidShape from '../../../../sherpa/js/fontawesome-5/stopSolidShape.j
 import DerivedProperty from '../../../../axon/js/DerivedProperty.js';
 import RectangularPushButton from '../../../../sun/js/buttons/RectangularPushButton.js';
 import packageJSON from '../../../../joist/js/packageJSON.js';
+import audioManager from '../../../../joist/js/audioManager.js';
 
 type SelfOptions = EmptySelfOptions;
 export type HistogramNodeOptions = SelfOptions & WithRequired<NodeOptions, 'tandem'>;
@@ -351,7 +352,7 @@ export default class HistogramNode extends Node {
     const toggleHistogramSoundButton = new RectangularPushButton( {
       content: histogramSoundIconToggleNode,
       soundPlayer: nullSoundPlayer,
-      enabledProperty: histogramSoundEnabledProperty,
+      enabledProperty: DerivedProperty.and( [ histogramSoundEnabledProperty, audioManager.audioEnabledProperty ] ),
       size: new Dimension2( 34, 34 ),
       xMargin: 5,
       yMargin: 5,