HTML5 audio player. Cannot change the src element

Question

I am trying to dynamically change the value of the src of my HTML audio player and for some reason I can't change it and it stuck on it's placeholder value. This is my HTML element:

    <audio controls preload="none" style="width:480px;">
    <source id="mp3" src="placeholder" type="audio/mp3" />
    </audio>

And this is my Javascript:

var tempMp3 = "http://www.someurl.org/somefile.mp3";
$("#mp3").attr("src", tempMp3);

Anybody knows what silly mistake am i doing here?

Cheers

You're probably trying to modify the element before the DOM is loaded. Can you show where in the HTML you're putting your javascript? — ndugger
– ndugger, Commented Feb 13, 2015 at 21:33
You can find a great solution here: stackoverflow.com/a/9512994/358331 — Peter Smeekens
– Peter Smeekens, Commented Aug 23, 2017 at 14:30

Ethaan · Accepted Answer · 2015-02-13 21:43:51Z

2

The code looks ok, maybe like @Nick Dugger says you are trying to change the DOM element when isn't ready yet

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

First option

Try putting the code inside this $(document).ready()

$( document ).ready(function() {
    var tempMp3 = "http://www.someurl.org/somefile.mp3";
    $("#mp3").attr("src", tempMp3);
});

Second Option

Another option could be place the <script> tag on the end of the <body> tag

edited Feb 13, 2015 at 21:43

answered Feb 13, 2015 at 21:36

Ethaan

11.4k5 gold badges37 silver badges45 bronze badges

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

5 Comments

ndugger Over a year ago

Although probably the solution, $( document ).ready is often abused. Also, can you explain to OP why he needs this?

ndugger Over a year ago

For the record, I do not condone the use of $( document ).ready and suggest firing javascript at the end of the body.

Pavel Zagalsky Over a year ago

This one did the trick but I still have another issue that stems from failing to move this tempMp3 string between 2 functions. Thanks for the help!

Ethaan Over a year ago

hi @PavelZagalsky if you have another different issue, could you please make another SO Question and up vote this one? since the problem here was solved

Pavel Zagalsky Over a year ago

I will do so indeed. Many thanks @Ethaan and everybody who helped

Frank · Accepted Answer · 2015-02-13 21:55:10Z

1

Try a bit of plain JavaScript:

var audio=document.getElementById("my_audio_element");
audio.src="source.mp3";
audio.play();

This works for me. HTML5 Audio is still sort of shaky and isn't implemented the same across all major browsers. If you're trying to get it to play on mobile, that's even trickier. Your code looks fine to me, though. Hope this helps!

answered Feb 13, 2015 at 21:55

Frank

2,2746 gold badges29 silver badges42 bronze badges

1 Comment

Frank Over a year ago

This code will work if you run it. Downvoter, explain your downvote!

Mwr247 · Accepted Answer · 2015-02-13 21:49:25Z

-1

After you change the source, be sure to run the .load() function on the audio element to load the change.

Example (assuming the id "audio" is set the audio element):

var tempMp3 = "http://www.someurl.org/somefile.mp3";
$("#mp3").attr("src", tempMp3);
$("#audio").load();
$("#audio").play();

edited Feb 13, 2015 at 21:49

answered Feb 13, 2015 at 21:34

Mwr247

1,4001 gold badge10 silver badges17 bronze badges

2 Comments

Pavel Zagalsky Over a year ago

Like this: $("#mp3").attr("src", tempMp3).load();?

Mwr247 Over a year ago

Ouch -2 >_< Something wrong with this? Also, had it set wrong before, it's updated now to call load on the audio element instead Pavel.

Collectives™ on Stack Overflow

HTML5 audio player. Cannot change the src element

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related