What can I do with large audio files so that they can be conveniently listened to on a web page?

Question

JavaScript

Briefly the essence:
there is one tiny project that I do for myself in order to upload audiobooks to the hosting, then listen to them from a phone on which there is always not enough space, and he would remember the time where I stopped listening. Here are the links to the service itself and the github with sources: Github
service Almost everything that was intended is functioning there, except for the most important one - working with large files. For example, now in the list there is "Crime and Punishment". A 25-hour recording weighs something like 700 MB, and when you try to listen to it (via the ‹audio› tag), you obviously have problems. What problems:

• Of course, it takes a long time to load. Even while connected to the Internet through the wire, who knows how many minutes must pass before I can rewind the record by at least 1:00:00, which breaks the whole concept;
  
• If you try to rewind somewhere in the middle of this healthy track, playback will simply be interrupted, and the crawler on the progress bar will teleport to its end;
  
• In the case of using the service through Firefox, Egyptian punishments generally begin: if you start a large recording, wait five seconds, and then click on other tracks, at first everything will break with the error "DOMException: The fetching process for the media resource was aborted by the user agent at the user's request" in the console, and if you try to reload the page, then for several minutes it will not load with the wording that the connection is insecure.
  

What options I see:
Before asking this question, I carefully googled a couple of evenings, but more on that below:

• There is such a cool thing as the Web Audio API. So cool that I didn’t understand much from the documentation and forums. As I understand it, it can break audio into pieces of ~ 45s and put them in a buffer, feeding the browser as needed. Unfortunately for me, it seems that it was invented primarily in order to pile reverb right in the browser, so one and a half examples of how to use it, which I found, mainly reveal sound processing in the sound engineering sense. In my opinion, this is the main candidate, but for me, who has not even really entered even promises and arrow functions, it is difficult to just take it and try it without being sure that it will help me;
  
• Howler.js , a Web Audio API library for "experts" like me. It sounds great, but for some reason it didn’t help me (at the very beginning of the documentation it says that it’s enough to add just one line to the parameters when creating an object). Maybe I did something wrong, but I saw on GitHub in issues exactly such a user complaint without an answer (I would give a link, but I can’t find something);
  
• Streaming like online radio. I learned little about him during the search; perhaps the previous point is a special case of this;
  
• The physical division of a file into chunks, i.e. somewhere between uploading to the server (or even before) and playing the creation of files 01.mp3, 02.mp3, etc. from a large source. ten minutes long. I saw something similar on the services on which I listened before, but I can’t figure out how to represent and manage this stack of files as if it were a single file.
  

In general, I have no idea what to grab onto. Thanks in advance for any help!

Answer 1

I would go by splitting the file into pieces, by the way, this can be automated through ffmpeg.
It is also better to save information about all the pieces and their duration (for example, in json).
For continuous playback, it is worth creating a new audio and inserting it on the page some time before the end of the playback of the current piece. You can track the time through the timeupdate event .
Upon completion of the current piece ( ended event ), launch the next one, and delete the audio element of the current one from the page.
If you need a slider that emulates a full file, then you can make a custom one using information from json. Although for personal use, I personally would not bother and would simply display buttons for switching to the desired piece, still based on information from json.

Answer 2

In you can watch the timestamp and write to localStorage when you pause or when you close the tab.
Or once every 10 seconds, which is easier.
When re-enabled, this flag can be set and the browser will make a request with offset.
And here the magic happens - the browser itself will make a request for the desired section of the file.
https://developer.mozilla.org/en-US/docs/Web/HTTP/...
Naturally, the server should be able to give the file not entirely, but in the necessary pieces, but in the third millennium almost all HTTP servers can do this.
There is also a media fragment uri but this is a newer spec and less common.