2

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?

Community
  • 1
  • 1
kmo
  • 21
  • 3
  • Very good first question - but is it possible to create a [jsfiddle](http://jsfiddle.net) so we can work on the problem a bit easier? – ahren Nov 27 '13 at 14:17
  • @ahren Thanks a lot. Here is the [jsfiddle](http://jsfiddle.net/DTAve/) link. Actually, I found that if I run this js on a server, it will not work. But if I run it locally, it works normally. – kmo Nov 28 '13 at 06:10
  • Can you also upload the music files, both one and two? Also, you'll need to change the JSFiddle settings from `on Load` to `no wrap in ` since you're trying to access a global function from your inline-handler. – ahren Nov 28 '13 at 06:29
  • @ahren I change the music link. But the .mp3 file is a little bit large may be you need to wait a while. Thanks. – kmo Nov 28 '13 at 07:09
  • @ahren Sorry I forget to updated the link. Here is the new [line](http://jsfiddle.net/DTAve/9/). Again, thanks a lot. – kmo Nov 28 '13 at 08:49
  • Hey so I get all the event listeners firing for each mp3: http://jsfiddle.net/DTAve/10/ – ahren Nov 28 '13 at 22:23
  • @ahren Yap, it runs normally on JSFiddle. But the problem still happens when it runs on server. I run a nodeJS server locally to let me open this page as http://192.168.xxx.xxx:xxxx like this, but not file://xx/xx/xx.html. I think the effect of JSFiddle is similar with opening the webpage without a server. – kmo Nov 29 '13 at 02:51
  • Interesting - A JSFiddle would be similar to opening it *on* a server, since it's a hosted page. Try to avoid including things on the `file://` protocol. Tomorrow this question becomes available for a bounty, so I'll add one on for you so hopefully someone can help. – ahren Nov 29 '13 at 06:59
  • @ahren Thank you so much!! I got the solution from the first answer. The main problem seems like that several – kmo Dec 01 '13 at 02:23

1 Answers1

2

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

Ilya Kharlamov
  • 3,698
  • 1
  • 31
  • 33
  • Thanks a lot. I do not have enough reputation to set this answer is useful, sorry. This method really works on my server. But I still have the question that why the static page can work with different players pointing to the same source but the dynamic page does not work? – kmo Dec 01 '13 at 02:26