CODEWITHSUNDEEP
javascriptjquerymp3html5-audio
kmo
kmo

Reputation: 21

Cannot trigger "durationchange" of HTML5 audio

thanks for looking at my question. I am working on a HTML5 audio related project. And now I meet a question.

What I want to do is assigning an audio.src to another audio.src. Actually, it works well in my beginning demo. But it does not work in my current project. The original audio cannot be played. And I console out all it's loading procedure and figured out the problem happening in durationchange. But I have no idea what is wrong with it since my logic is very similar to my beginning demo.

Hopefully, someone here could help me find out what is wrong with my code. The following is my code:

// the original audio is Glogal.audio
var segs = $('.cutter-room .container').find('.seg-container');
var audio_self = "<audio id='player_0'>";

// add one more segment for the new cut part
$('.cutter-room').append(audio_self);
$('.cutter-room .container').append(cut.audio_seg); // audio_seg is the 'clothes' of audio tag, a GUI

// new_seg is the audio tag which I want to assign to
var new_seg = document.getElementById("player_0");
var temp = GLOBAL.audio.src;
new_seg.src = GLOBAL.audio.src; // if I comment this one, the original will be fine

And the following is my testing code, when the new <audio> inserted in DOM successfully, if I try to play the original audio, its durationchange will not be called:

/*for testing*/
GLOBAL.audio.addEventListener("loadstart", function(){
    console.log('start loading');
});
GLOBAL.audio.addEventListener("durationchange", function(){
    console.log("change duration");
});
/*end testing*/

By the way, I am sure that the music file is correct. Thanks again!

Update 2013/11/28

Here is the jsFilddle link. I am sorry that I don't know which music link should I put in the src so I just put my local path. The problem shown in jsFilddle is a little bit different from what I said above. In jsFilddle, there is nothing wrong with the original audio but the second one cannot play.

I found that it I just open the .html page, no server supported. There will be nothing wrong. But if I run it on a server locally, the duraionchange will not response. So does it mean that the problem happens on the server side, but not the js?

But it is unreasonable that an audio source cannot be assigned to another audio source with a running server. They are paths but essentially, they are still Strings, aren't they?

Upvotes: 2

Views: 1194

Answers (1)

Ilya Kharlamov
Ilya Kharlamov

Reputation: 3932

The thing is that browsers don't like having the several different players pointing to the very same mp3 on the same page.

So the trick can be to alter the url, to prevent caching, for example:

assign.src = original.src+"?foo="+(new Date().getTime());

jsfiddle

Upvotes: 2

Related Questions