title: Hijacking DOM manipulations
body: <p>I have a problem. I am trying to get the source of an audio element as soon as it changes and without making it connect to the server. Let me elaborate: The server allows only one request (randomly generated url for content), which I am trying to get and obviously I don't want the audio element to reload using a new source. I am currently using a mutation observer, but with no luck of beating the <code>onclick</code>'s speed (yes, there's complicated js involved in order to not allow anybody to get the source directly). Here's the code:</p>
  
  <pre><code>document.getElementsByTagName('audio')[0].setAttribute("autoplay", false);
  //not sure if ^^ makes a difference
  audioObserver = new MutationObserver(function (mutations) {
      window.open(mutations[0].target.src);
      //I only listen for one mutation and want to open the url in a new window
      audioObserver.disconnect();
      //don't listen in order to not cause infinite loop
      document.getElementsByTagName('audio')[0].parentNode.removeChild(document.getElementsByTagName('audio')[0]);
      //remove the element in order to avoid reloading
  });
  observerConfig = {
      attributes: true,
      childList: false,
      characterData: false
  };
  audioObserver.observe(document.getElementsByTagName('audio')[0], observerConfig);
  </code></pre>
  
  <p>I would be happy with any implementation i.e. not necessarily MutationObserver. Is there anyway to literally hijack the attribute change? </p>