Changing source of HTML5 audio player with jquery

Question

I don't know why it doesn't work and i have spend alot of time on it

I want to change the source of an audio player and start playing the new source on a button click, here's the code:

JS:

<script type="text/javascript">

    function audplay() {
       var player = document.getElementById("Audio1");

    audio = $("<audio>").attr("id", "audioElement")
                        .attr("preload", "auto")
                        .appendTo(player);
var sourceUrl = 'C:\Users\a\a\a\1.mp3'
function addMp3Source(sourceUrl) {
    audio.empty();
    var newSrc = $("<source>").attr("src",sourceUrl).appendTo(audio);
} }
</script>

HTML:

<audio id="Audio1" controls="controls" >
     <source id='a' src="Miaow-07-Bubble.m4a" type="audio/mp4" />
     <source src="demo.ogv" type="video/ogg" />
     HTML5 Audio is required for this example. 
<div id="buttonbar">
    <button id="play" onclick="audplay()">&gt;</button>
</div>

posted a fiddle might help u in ur cause..jsbin.com/EDAxoLiL/1/edit — codebreaker
– codebreaker, Commented Oct 28, 2013 at 11:12

maverickosama92 · Accepted Answer · 2013-10-28 10:56:29Z

9

try this:

HTML:

<audio controls id="Audio1"></audio>

jQuery (write below code on any button click):

 $("#play").on("click",function(){
     var fileName = "dummy.mp3";
     $("#Audio1").attr("src",fileName).trigger("play");
 });

Don't need to write separate source tags.

answered Oct 28, 2013 at 10:56

maverickosama92

2,7352 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing source of HTML5 audio player with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related