HTML5 音频标签无法播放某些音频

Question

我正在用电子构建音乐播放器。在主要的Proccess中，我将所有事件都具有内容管理，并且我在HTTP服务器中加载音乐中的音乐，因此audio标签具有src ATRIBUTE，例如src = http://localhost:9999。这些歌曲是从Webtorrent的Torrent下载的。我的问题是Wen我更改了当前的洪流，例如，从下载中的第一台洪流到第二个洪流，因为第一台洪流没有更多的内容可以播放，并且我将新服务器带有新内容并尝试播放音频不会启动的声音，但请登录主proccess，说音频是在HTTP服务器上加载的。另外，如果我手动单击此第二个洪流的其他歌曲，音频效果很好，但是我在控制台上会遇到以下错误： Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

设置音频标签的功能是：

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]]); 
    }
})

其中data[0]代表洪流中的文件索引，因为完整的URL为 http://localhost:9999/<index of file>

和主proccess以这样的方式发送IPC消息：

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]);
})

误差仅在洪流变化中，我尝试100个表格来解决它，没有解决方案。

知道为什么会发生？

Answer 1

更新

我发现了基于您的错误的东西：

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

play()和pause()

之间的比赛条件

尝试：

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

---

旧

更改音频或视频标签的src时，必须在.play()方法之前调用.load()方法。更改将在下面的摘要中进行评论。当然没有为您的情况进行测试。

摘要

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]]);
  }
});