使用HTML5和JavaScript暂停后，如何恢复从web源播放音频？

我在

曲目

数组中有一些web URL，我正在通过JavaScript中的HTML5音频API播放这些URL。当我单击“暂停”时，它会暂停。但一旦暂停，当我点击播放时，音频从一开始就开始播放

HTML规范提到了

audio.currentTime

属性，因此我尝试在一个名为

currentTime

的单独变量中跟踪它，并在再次恢复之前进行设置，但这似乎不起作用，因为音频仍然从一开始就开始

我花了相当长的时间在实验和谷歌搜索上，但我看不出这里出了什么问题。没有理由不从我暂停查看代码逻辑的地方播放音频

有没有其他人经历过这种情况并知道解决方法

这是我的js文件：

$(function() {
    let trackTitle = $('#title');
    let prevBtn = $('#btn-prev');
    let playPauseBtn = $('#btn-play-pause');
    let nextBtn = $('#btn-next');
    let seekBarFill = $('.seek-bar .fill');

    let tracks = [
        'http://traffic.libsyn.com/minutephysics/Why_You_Should_Care_About_Nukes.mp4?dest-id=95145',
        'http://traffic.libsyn.com/minutephysics/.mp4?dest-id=95145',
        'http://traffic.libsyn.com/minutephysics/Transporters_and_Quantum_Teleportation.mp4?dest-id=95145',
        'http://traffic.libsyn.com/minutephysics/The_Limb_of_the_Sun.mp4?dest-id=95145',
        'http://traffic.libsyn.com/minutephysics/_1.mp4?dest-id=95145',
        'http://traffic.libsyn.com/minutephysics/Concrete_Does_Not_Dry_Out.mp4?dest-id=95145'
    ];
    let audio = new Audio();
    let currentTrack = 0;
    let currentTime = 0;

    function playTrack() {
        audio.src = tracks[currentTrack];
        trackTitle.html('<a href=' + tracks[currentTrack] + '>' + tracks[currentTrack] + '</a>');
        audio.currentTime = currentTime;
        audio.play().then(function() {
            $('#btn-play-pause img').attr('src', 'static/pause.png');
        });
    }

    function playOrPauseTrack() {

        if(audio.paused) {
            console.log('play clicked');
            audio.currentTime = currentTime; // attempted workaround, still not working
            playTrack();
            console.log('play/current time=' + audio.currentTime);
        } else {
            console.log('pause clicked');
            audio.pause();
            currentTime = audio.currentTime;
            console.log('pause/current time=' + currentTime);
            $('#btn-play-pause img').attr('src', 'static/play.png');
        }
    }
});

$（函数（）{
让trackTitle=$（'#title'）；
设prevBtn=$（“#btn prev”）；
让playPauseBtn=$（“#btn播放暂停”）；
设nextBtn=$（'btn next'）；
设seekBarFill=$（'.seek-bar.fill'）；
让轨道=[
'http://traffic.libsyn.com/minutephysics/Why_You_Should_Care_About_Nukes.mp4?dest-id=95145'，
'http://traffic.libsyn.com/minutephysics/.mp4?dest-id=95145'，
'http://traffic.libsyn.com/minutephysics/Transporters_and_Quantum_Teleportation.mp4?dest-id=95145'，
'http://traffic.libsyn.com/minutephysics/The_Limb_of_the_Sun.mp4?dest-id=95145'，
'http://traffic.libsyn.com/minutephysics/_1.mp4?dest-id=95145'，
'http://traffic.libsyn.com/minutephysics/Concrete_Does_Not_Dry_Out.mp4?dest-id=95145'
];
让音频=新音频（）；
让currentTrack=0；
设currentTime=0；
函数playTrack（）{
audio.src=曲目[currentTrack]；
html（“”）；
audio.currentTime=currentTime；
audio.play（）.then（函数（））{
$（'btn play pause img'）.attr（'src'，'static/pause.png'）；
});
}
函数player或ausetrack（）{
如果（音频暂停）{
log（'play clicked'）；
audio.currentTime=currentTime；//尝试了解决方法，但仍不工作
playTrack（）；
console.log（'play/current time='+audio.current time）；
}否则{
log（'pause clicked'）；
audio.pause（）；
currentTime=audio.currentTime；
console.log（'暂停/当前时间='+当前时间）；
$（'btn play pause img'）.attr（'src'，'static/play.png'）；
}
}
});

设置音频元素的

src

属性时，将重置所有内容

---

只需不设置它，也不重置

currentTime

。您所要做的就是调用

.play（）

继续播放。

我应该补充一点，我正在Safari 13.0.5上尝试此操作。Chrome 80.0.3987.149也表现出同样的性能。我的机器运行的是MacOSCatalina。哇，这么简单的解决方案，我正要把头发扯下来。谢谢在10分钟的冷静期过后，我会接受你的回答。@Samis并不疯狂，最简单的事情总是最令人沮丧的。：-）