如何在使用 HTML5 和 JavaScript 暂停后从网络源恢复播放音频？

Question

我在数组中有一些 Web URL tracks，我正在通过 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');        }    }});

Answer 1

当您设置音频元素的src属性时，您将重置所有内容。

只需不要设置它，也不要重置currentTime. 您所要做的就是打电话.play()恢复比赛。