Как возобновить воспроизведение звука с веб-источника после его приостановки с помощью HTML5 и JavaScript?

Question

У меня есть несколько веб-адресов в массиве tracks, которые я воспроизводю через HTML5 аудио API в JavaScript. Пауза, когда я нажимаю на паузу. Но после паузы, когда я нажимаю на кнопку воспроизведения, звук начинает воспроизводиться с самого начала.

HTML spe c упоминает свойство audio.currentTime, поэтому я попытался отследить это в отдельном файле. переменную с именем currentTime и установите ее перед возобновлением, но, похоже, это не работает, так как звук все еще начинается с начала.

Я потратил довольно много времени на эксперименты и поиск в Google , но я не вижу, что здесь происходит не так. Нет причин, чтобы звук не воспроизводился с того места, где я остановился, глядя на логи c этого кода.

Кто-нибудь еще испытал это и знает об обходном пути?

Вот мой 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(), чтобы возобновить игру.