如何在使用 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.&nbsp;您所要做的就是打电话.play()恢复比赛。