title: <audio> element not working at all in Safari
body: <p>I'm trying to add music to a virtual tour application I'm writing in JS and jQuery and so far my code, shown below, works great in Chrome, FF, IE9, and Opera.  But in Safari 5.1.7, which is the newest you can get for a Windows machine, it just doesn't work...  Through my research of the problem, I know that Safari doesn't autoplay music and it has to be started manually, but when I click the play button, nothing happens.  And, btw, the code inspector in Safari shows that my audio tag is there with the music sources so I don't think it has anything to do with the DOM.  Any ideas on my problem?</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div id="musicBtns"&gt;
      &lt;p&gt;Music:&lt;/p&gt;
      &lt;p id="musicPlayBtn"&gt;Play&lt;/p&gt;
      &lt;p&gt;/&lt;/p&gt;
      &lt;p id="musicPauseBtn"&gt;Pause&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My music object in JS</strong>:</p>
  
  <pre><code>var Music = 
      {
          musicBtns: $('#musicBtns'),
          playBtn: $('#musicPlayBtn'),
          pauseBtn: $('#musicPauseBtn'),
          isPlaying: false,
  
          init: function()
          {
              if(!music.includeMusic) // If the client didn't want any music in the tour app, remove the music btns from the DOM
              {
                  this.musicBtns.remove();
              }
              else // Else, setup the audio element
              {
                  var parent = this;
                  var audio = $('&lt;audio loop="true"&gt;');
  
                  if(music.autoplay) 
                  {
                      audio.attr('autoplay', 'autoplay');
                      this.isPlaying = true;
                      this.togglePlayPause();
                  }
  
                  // Add a source elements and appends them to the audio element 
                  this.addSource(audio, music.ogg); // 'music.ogg' is a reference to the path in a JSON file  
                  this.addSource(audio, music.mp3);
                  this.musicBtns.append(audio);
  
                  // Add event listeners for the play/pause btns
                  this.playBtn.click(function()
                  {
                      audio.trigger('play');
                      parent.isPlaying = true;
                      parent.togglePlayPause();
                  });
  
                  this.pauseBtn.click(function()
                  {
                      audio.trigger('pause');
                      parent.isPlaying = false;
                      parent.togglePlayPause();
                  });
              }
          },
          addSource: function(el, path)
          {  
              el.append($('&lt;source&gt;').attr('src', path));  
          },
          // Add or remove classes depending on the state of play/pause
          togglePlayPause: function()
          {
              if(this.isPlaying)
              {
                  this.playBtn.addClass('underline');
                  this.pauseBtn.removeClass('underline');
              }
              else
              {
                  this.playBtn.removeClass('underline');
                  this.pauseBtn.addClass('underline');
              }
          }
      }
  </code></pre>
  
  <p><strong>Edit:</strong> Could this be a bug in Safari?</p>