Why doesn't Mozilla want to work?

Question

JavaScript

HTML code:

<div id="playerBox">
      <audio id="player" src="audio/music-1.mp3"></audio>
      <div class="playerImgBox">
        <img class="playerImg" src="img/album-1.jpg" alt="" />
      </div>
      
      <div class="playerControls">
        <button class="play"></button>
      </div>
    </div>

JS code:

document.getElementById("player").onloadedmetadata = function(){
  
  var
    $player = this,
    $parent = this.parentNode,
    $play = $parent.getElementsByClassName("play")[0],
    $run = false;
  
  $play.onclick = function(){
    if($run){
      $player.pause();
      $run = false;
    } else {
      $player.play();
      $run = true;	
    }	
  }
}

I checked it in Chrome, Opera, IE 8 browsers. It works in all, but not in Mozilla (v.39). Tried to debug the code. It turned out that it doesn't execute only the onclick event of the $play element.
Why is that?

Answer 1

Look

Answer 2

Since when do variables start with $ in JavaScript? Did you mess with PHP for an hour?