my code works only in chrome

my code works only in chrome

I have a simple script that you can access here  . If you click the movie waves link you are presented with a list of names when you click on one it plays a wav file(sound from a movie).  If you do this in Fire Fox or Opera some links will work most won't if you use Safari none will play.  Only Chrome will play them all.

Here's the html:


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <link rel="stylesheet" type="text/css" href="movie.css" />
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  8. <script src="main.js"></script>
  9. </head>
  10. <body>
  11. <div id="main">
  12. <header><h1>Movie sounds</h1></header>
  13. <div id="content">
  14. <div id="sounds">
  15.           <h3><a href="jimslounge.com">Movie Waves</a></h3>
  16. <ul id="list"> </ul>
  17. </div>
  18. </div>
  19. </body>
  20. </html>
here's the script:

  1. $(document).ready(function() {
  2.   $('#sounds').click(function(e) {
  3.     e.preventDefault();
  4.     $.getJSON('soundsData.json', function(data) {
  5.      var html = '';
  6.      $.each(data, function(key, val) {
  7.      html += '<li class="value">' + key + '<audio class="sound"><source src="./Miscellaneous/' + val + '" type="audio/wav"></audio></li>';
  8.      });
  9.      $('#list').html(html);
  10.     });
  11.    });
  12.   $('#list').on('click', 'li', function(e) {
  13.    e.stopPropagation();
  14.    $('audio').each(function() { this.pause(); }); //Stop all
  15.     $('audio', this)[0].play(); // Play this one  
  16.   });
  17. });

here's the json file abbreviated:
  1. {
  2. "angry cat" : "angryCat.wav",
  3. "anymore" : "anymore.wav",
  4. "dark side" : "darkside.wav",
  5. "failure to communicate" : "comm.wav",
  6. "count" : "count.wav",
  7. "darkside" : "darkside.wav",
  8.         ...
  9. }