Change data-src to src via jquery

Im using a flexslider that has audio files for each slide, but I don't want to load countless audio files right away on the page. So im trying to get the data-src to become the src after each slide

the slides are currently as follows:

<div class="flexslider carousel">
<ul class="slides">
<li> 
<img src="http://www.quinnmedical.com/skin/frontend/gigasavvy/quinn/ppt/Slide01.jpg"  /> 
<audio id="demo" controls>
   <source src="/skin/frontend/gigasavvy/quinn/audio/Slide1.mp3" type="audio/mpeg" />
</audio>
</li>
<li> 
<img src="http://www.quinnmedical.com/skin/frontend/gigasavvy/quinn/ppt/Slide03.jpg"  /> 
<audio id="demo" controls>
   <source data-src="/skin/frontend/gigasavvy/quinn/audio/Slide3.mp3" src="" type="audio/mpeg" />
</audio>
</li>
</ul>
</div>

In the after function i want to change data-src to src. Any help would be greatly appreciated as how to go from data-src to src

Renaming an attribute is not be possible. You can add new attribute and remove the old one.

Suppose there is a click event as in the following example:

$('#demo').on("click", "img", function () {
   var t = this;
   var source = $(t).children("source");        
   $source.attr({
       src: $t.attr('data-src')
   }).removeAttr('data-src');
}

Please modify the event according to your requirements.