CODEWITHSUNDEEP
javascripthtmlhtml5-audio
Martin Dimitrov
Martin Dimitrov

Reputation: 71

Some tracks not being seekable when using HTML5 Audio controlled with JavaScript

I am writing an app that loads songs into a html audio tag and displays a HighCharts graph on top that the user can manipulate to provide feedback based on the song. I am controlling the chart form the audio tag and vice versa.

By controlling I mean that when the song starts playing the graph starts to be populated with points, when the song pauses the graph's population pauses as well. When I seek in the song from the audio tag the place where points are added is also changed. I am using the click event from HighCharts to set the current time of the song to be the value of the x axis as the x axis represents the song duration in seconds. See image below for clarification.

My issue come from the fact that some songs are seekable and other are not. I am running the app in Chrome. When I run it in Firefox the issue is not present. All songs are seekable then.

What I managed to notice is that 

track.seekable.end(0)

always returns 0 if the issue is present and the length of the song if the issue is not present. All of the tracks are no more than 4 minutes long and no larger than 6 megabytes.

To seek in the track form the graph I am using 

click: function(event) {
  track.currentTime = parseInt(event.xAxis[0].value/1000);
}

Upvotes: 3

Views: 1044

Answers (1)

Martin Dimitrov
Martin Dimitrov

Reputation: 71

I found the answer. I am using django for the backend that I forgot to mention in my question. The problem came form the dev version of the django server. There was no support for byte range requests in django.views.static.serve.

This can be fixed by either using the code from here or by running your app trough a proxy server. The first fix is not so desirable as this changes core django files and will not fix the issue for other developers working on the same app if they do not have the same code, so the second fix is preferred.

Keep in mind that the issue is present only in dev and not in production.

Upvotes: 1

Related Questions