I wanted to make my audiobook library available to parents. So that you can click on the tablet button and listen to the files from a specific directory. For this, I wanted for all the directories with files to write something like this html code:

<html> <body> 01:<audio id="player01" src="001 Track 01.mp3" controls onended="player02.play();"></audio><br><br> 02:<audio id="player02" src="001 Track 02.mp3" controls onended="player03.play();"></audio><br><br> 03:<audio id="player03" src="001 Track 03.mp3" controls></audio><br><br> </body> </html>

An example of such a code - at http://junecat.ru/bt/AudioBooks/000/slu.htm. On Chrome, everything works fine under windows - one file ends, and another begins to play. But this does not work on any phone or tablet - one file is played there and playback stops. Is there any way to cure it? kick me in the right direction, please.

1 answer 1

You can try to do everything manually:

 var myAudio = new Audio('book.mp3'); myAudio.addEventListener('ended', function() { ... anotherMyAudio.play(); ... }, false); myAudio.play();

But in general, the problem may be hiding in the implementation of a specific mobile browser. You are, most likely, using at least different devices, but on the same platform and with the same browser engine? Make sure the event is generally supported.

  • in the answer that I gave, it says that the problem is that an event is hung up in the same thread, where the audio is set, in your case you probably should do setTimeout trick :) - zb '
  • Hmm, the problem may be that the audio recording does not have time to simply load. But what about the streams?) - AseN
  • I don’t know, it’s just according to the description of that answer that it’s necessary to release the stream before it ended up, in browser implementations it is pretty often, you know for example that before 40th (or 38, I don’t remember exactly) the chrome version after creating the indexedDB transaction, you cannot write console.log, the atoms will end abruptly (and you still can’t set breakpoint in the transaction flow). - zb '
  • On all devices, I tried everything in Chrome. And adding the tag "preload =" none "does not solve the problem. That is, the point is not that it does not have time to load - SteeL HeaD