HTML5 audio tag doesn't play some audio

Question

I'm building a music player with electron. In the main proccess I have all the events an content management, and I load music in renderer by http server create in the main, so the audio tag have the src atribute like src = http://localhost:9999 . The songs are downloaded from torrent with webtorrent. My problem is that wen I change the current torrent in play, for example from 1st torrent in download to 2nd torrent, because the 1st torrent doesn't have more content to play, and I init the new server with new content and try to play the sound the audio doesn't start but log on the main proccess say that audio is loaded on the http server. Also if I manually click on other song of this 2nd torrent the audio works well but I get the following error on console: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

The function that set the audio tag src is:

ipc.on('toPlay', (event, data) => {
    console.log('http://localhost:9999/' + data[0].toString());

    audio_tag.src = 'http://localhost:9999/' + data[0].toString();
    play = true;

    audio_tag.play();


    audio_tag.onended = function(){
    console.log('play end, to play ' + (data[0]+1).toString() + 'from torrent number: ' + data[1].toString());
    ipc.send('getPlayData', [data[0]+1, data[1]]); 
    }
})

where data[0] represents the index of file in the torrent, because the full url is http://localhost:9999/<index of file>

And the main proccess send send the ipc message like this:

ipc.on('getPlayData', function(event, data) {
    var torrent = data[1];
    var file = data[0];


    if((file <= downloaderInstance.getTorrentFiles(torrent).length) && (downloaderInstance.getTorrentFiles(torrent)[file].name.indexOf('mp3') != -1)){
    var i = file;
    while(downloaderInstance.getTorrentFiles(torrent)[i].name.indexOf('mp3') == -1 &&
         file <= downloaderInstance.getTorrentFiles(torrent).length){
        file++;
    }
    } else {
    torrent++;
    }

    if(torrent <= downloaderInstance.getNTorrents() && torrent != data[1]){
    file = 0;
    while(downloaderInstance.getTorrentFiles(torrent)[file].name.indexOf('mp3') == -1 &&
          file <= downloaderInstance.getTorrentFiles(torrent).length){
        file++;
    }
    } else if (torrent >= downloaderInstance.getNTorrents() && torrent != data[1]){
    torrent = 0;
    file = 0;
    while(downloaderInstance.getTorrentFiles(torrent)[file].name.indexOf('mp3') == -1 &&
          file <= downloaderInstance.getTorrentFiles(torrent).length){
        file++;
    }
    }   

    if(torrent != currentPlayingTorrent){
    currentPlayingTorrent = torrent;
    if(currentPlayingTorrent != undefined)
        downloaderInstance.closeTorrentServer();

    downloaderInstance.initTorrentServer(currentPlayingTorrent);
    downloaderInstance.listen();
    }

    console.log(file + ' ' + torrent);
    console.log('toplay ' + file.toString() + '(' + downloaderInstance.getTorrentFiles(torrent)[file].name + ')' + ' from ' + torrent.toString());
    event.sender.send('toPlay', [file, torrent]);
})

The error only ocurs in the change of torrent, and I try 100 forms to solve it with no solution.

Any idea why it's happening?

Answer 1

UPDATE

I found something based off of your error:

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

It's race condition between play() and pause()

Try:

var waitTime = 150;

setTimeout(function () {      
  if (el.paused) {
    el.play();
  }
}, waitTime);

---

OLD

When changing src of an audio or video tag, you have to invoke the .load() method before the .play() method. The change is applied and commented in the Snippet below. Not tested for your circumstances of course.

SNIPPET

 ipc.on('toPlay', (event, data) => { console.log('http://localhost:9999/' + data[0].toString()); audio_tag.src = 'http://localhost:9999/' + data[0].toString(); play = true; // .load() needs to be right before .play() /*~~~~~~~~~~~~~~~~~~~~~~~*/ audio_tag.load(); //~~~~~~~~~~~~~~~~~~~~~~~*/ audio_tag.play(); audio_tag.onended = function() { console.log('play end, to play ' + (data[0] + 1).toString() + 'from torrent number: ' + data[1].toString()); ipc.send('getPlayData', [data[0] + 1, data[1]]); } });