title: Adding Audio with JavaScript: FireFox and Chrome show they're playing, but I'm not receiving any sound
body: <p>My peer and I have a series of JavaScript objects which all have an audio property.  The value of that property is a string which provides the relative path to where that audio file is stored on our server.</p>
  
  <p>I wrote a JavaScript function which references those objects and plays their audio files when a new object loads.  Everything seemed to be working fine during testing.  He just added new audio files today and messaged me that our project wasn't playing audio in IE -- but it still worked in FF and Chrome.</p>
  
  <p>When I checked the error, I noticed IE was getting an invalid state error from the playAudio JavaScript function that I wrote.  I made the assumption the mp3 file didn't fully load, so IE was throwing the invalid state error because it couldn't execute the play() command on a file that wasn't available yet.  So, tonight I added a media event listener to ensure the function didn't execute until the mp3 resource was available.</p>
  
  <p>That fixed the IE issue, but now both Chrome and FireFox aren't playing sound.  And by that I mean, they are receiving the mp3 resource, no errors are being thrown to the console, and they both show the audio icon on the browser's tab above the url bar as though media content were actually playing.  It seems like they are playing, but I'm not getting sound through my actual speakers.  I'm kind of at a loss as to why this is happening, and will have to look into it more tomorrow -- but I'm hoping someone here might know what could be the cause.</p>
  
  <pre><code>// The playAudio function pulls the audio file from the scenes object and only plays once.
  // Afterward, the scenes object receives a new parameter, audio_played, which is set to true.
  function playAudio(id) {
  
      // check whether the variable currAudio has been defined.
      // If it has, pause currAudio.
      if (typeof currAudio !== 'undefined') {
          currAudio.pause();
      }  
  
      // check that the scenes object has an audio parameter
      // and that the audio_played parameter is not true
      if (scenes[id].audio &amp;&amp; scenes[id].audio_played !== true) {
  
          // create a new Audio object using the loaded scene's audio
          // parameter and store it in the variable newAudio
          var newAudio = new Audio(scenes[id].audio);
  
          // wait for the audio file to load enough data
          // to be played, then execute the nested scripts.
          newAudio.addEventListener('canplay', function() {
  
              // set newAudio to start at the beginning of the file.
              newAudio.currentTime = 0;
  
              // play the audio file
              newAudio.play();
  
              // add an audio_played parameter to the
              // scenes object and set it's value to true. 
              scenes[id].audio_played = true;
  
              // update the currAudio variable
              var currAudio = newAudio;
  
          }, false);
      }
  } 
  </code></pre>