how to change object embed source via jquery
<p>I have the following scenario..</p>

<p>When the user visit my website I show the user some audio files from the server. When the user clicks on one link, then the jquery function is eventually executed and change the source of the embedded object to selected file.</p>

<p>my script is :</p>

<pre><code>   &lt;script type="text/javascript"&gt;
   $("#song").click(function(){
   var src=$(this).attr("href");
   var plyr=document.getElementById("mplayer");
   var clone=plyr.cloneNode(true);
   clone.setAttribute('src',src);
   plyr.parentNode.replaceChild(clone,plyr)
   });
   &lt;/script&gt;
</code></pre>

<p>Link to select audio file.</p>

<pre><code>  &lt;a href="resources/songs/xx21.mp3" id="song"&gt;
</code></pre>

<p>xx21</p>

<p>And the object is</p>

<pre><code> &lt;div id="music"&gt;
 &lt;embed type="audio/mpeg" src="#" name="plugin" height="100%" width="100%" id="mplayer"&gt;
 &lt;/div&gt;
</code></pre>

<p>What happening for me is, When I click on the link. The song plays in new page. I need to play the song with embedded object inside the <code>div</code> <code>music</code>.</p>
