title: How do I remove properly html5 audio without appending to DOM?
body: <p>With Javascript, I have a function that creates an audio element with <code>createElement("audio")</code>, and start playing in loop without using <code>appendChild()</code>, I mean without appending it to the DOM.
  The element created is kept in a variable, let's called it <code>music1</code>:</p>
  
  <pre><code>music = document.createElement("audio");
   music.addEventListener("loadeddata", function() {
   music.play();
  });
  music.setAttribute("src", music_Source);
  </code></pre>
  
  <p>What I would like to do, is to change the music played, if possible using the same function, and storing the element in the same variable.</p>
  
  <p>What I do is that before the code above:</p>
  
  <pre><code>if(typeof(music) == "object") {
   music.pause();
   music = null;
  }
  </code></pre>
  
  <p>But: if I remove <code>music.pause()</code>, the first music keeps playing, and the second starts playing too at the same time, which makes me think that the first music is always somewhere in the document/in the memory. Also, <code>music = null</code> seems useless. I don't want to use jQuery.</p>
  
  <p>Do you have any idea to properly remove the first music, delete the element, or so on?</p>
  
  <p>Actually, kennis' comment is right, I tried to just change the src attribute, and not modify the "music" variable (neither setting it to null, nor re-creating an Element) and it seem to work too. So, for the record: For each source changing here is the function:</p>
  
  <pre><code>if(typeof(music) != "object") {
    //audio element does not exist yet:
    music = document.createElement("audio");
    music.addEventListener("loadeddata", function() {
      music.play();
    });
  }
  music.setAttribute("src", music_Source);
  </code></pre>