html audio

HTML

<div class="wrapper">
	<audio src="http://kmokidd.github.io/gushi.mp3" id="original" controls></audio>
	<audio src="" id="assign" controls></audio>
	<audio src="" id="directly" controls></audio>
	<button onclick="add();" id="btn1">add src by assigning</button>
	<button onclick="add2()" id="btn2">add src path directly</button>
</div>

CSS

.wrapper{
    padding: 10px
}
audio{
    margin: 10px 0;
}
button{
    display: block;
    margin-bottom: 10px;
}

JavaScript

var original = document.getElementById('original');

// everything is fine with #original
// but the #assign cannot be played
function add(){
    var assign = document.getElementById('assign');
    assign.src = original.src;

    console.log("original.src: "+ original.src);
    console.log("assign.src: "+ assign.src);
}

// if this is be called, the process bar of audio tag will dispear
// but the two audios can be played
function add2(){ 
    var direct = document.getElementById('directly');
    direct.src = 'http://kmokidd.github.io/gushi.mp3'; 
}