title: JS - changing styling while music is playing
body: <pre><code>&lt;audio id="player35" src="tune.wav" type="audio/wav"&gt;&lt;/audio&gt;
  
  &lt;a href="#" onclick="pausePlay(document.getElementById('player35'));" class="music-area"&gt;A Tune&lt;/a&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>.music-area
  {
  width: 128px;
  height: 128px;
  background-color: rgba(0, 0, 0, 0.2);
  
  background-image: url("img/speaker.jpg");
  background-repeat:no-repeat;
  background-position:center;
  
  margin: 0;
  padding: 0;
  display: inline-block;
  float: left;
  color: rgba(0, 0, 255, 0.60);
  text-decoration: none;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  }
  </code></pre>
  
  <p>There are a many "playerX" audio tags and associated  that play music when clicked. All of them have class "music-area" so the css above puts a speaker symbol on all of them. I want the speaker to only appear when the music is playing, is this possible?</p>