1

I have made a music player by JS. However I have noticed that in Chrome it does not load some songs, basically any song except the one that loaded with the page.

Using inspect tool, I noticed the http request stays in "pending" status and never load the track. even tho the song is in the right folder. if the song playes if i put its full address in the browser: www.site.com/music/song.mp3 but it does not load it in the music player. I tried to stream songs from other websites and the player in Chrome works perfectly, such as this: https://media.rdjavan.com/media/mp3/Masih-Arash-AP-Be-Hame-Begoo.mp3.

The above address works fine n the player, so somehow it is streamable.

In safari it works fine, basically it is slow since it has to download the song but then it works. But in Chrome it stays in the status and never loads.

I was wondering is it related to MIMEs? or does my code have to do something with servers? I have tried it on an actually server and also on Xammp and both have same result. I have not fixed htaccess but it seems unrelated to my issue.

UPDATE: I have noticed that Chrome is even slow in loading the directories. for example it takes ages of chrome to open localhost/AudioPlayer/audio/. So i believe it is a similar problem to why my music player does not load tracks.

Any idea?

TheGuy
  • 427
  • 2
  • 4
  • 12

1 Answers1

1

jPlayer songs not loading correctly using MVC method

Look at the answer I gave in this thread above. This may or may not be your problem.

I had problems with chrome and my music player, you have to allow content-range requests.

These are enabled default in other browsers. Reason why it works in .mp3 url's is because it's using default <audio> </audio> tags which support content-range requests I think

Community
  • 1
  • 1
Martin Dawson
  • 7,455
  • 6
  • 49
  • 92
  • Thank you for your post. I believe is it the reason. However I cannot get how the solution works, can you either explain the main part of the class you created or provide it as an example to apply it? I could not find any similar solution to find out how your code works. – TheGuy Feb 09 '16 at 01:05
  • Ill take a better look tommorow when i am at a pc. – Martin Dawson Feb 09 '16 at 02:19
  • That would be really helpful. basically in order to play a song in my music player I have one audio object like `var audio = new Audio()` and two lines when a new track is selected to play: `audio.src = src; audio.play();` I just tried to change the content-range requests [here](https://jsfiddle.net/y1x2j77u/) but did not work. Anyways i thought maybe these information help you more to understand the problem. Thanks. – TheGuy Feb 09 '16 at 03:28
  • 1
    @TheGuy You are on the right track, these links may help. I don't really know JS to be able to help you more. I suggest if you are still stuck you post this question again in asking how to allow content-range header. Also post your audio code this time. http://stackoverflow.com/questions/15200266/can-i-use-the-http-range-header-to-load-partial-files-on-purpose http://stackoverflow.com/questions/30330856/how-do-i-play-audio-returned-from-an-xmlhttprequest-using-the-html5-audio-api – Martin Dawson Feb 09 '16 at 16:04