Как установить текущее время в аудиообъекте HTML5, когда аудиофайл находится в сети?

Если ваш браузер не загрузил звук, звук не может быть воспроизведен. Браузер не знает ваш аудиофайл и из-за этого пытается воспроизвести его с самого начала. Может быть, ваш звук будет длиться всего 1 секунду или даже короче.

Решение

Вам нужно дождаться события loadedmetadata, и после него вы можете играть свою аудиторию из любой временной позиции. После этого события ваш браузер узнает всю необходимую информацию о вашем аудиофайле.

Пожалуйста, измените свой код следующим образом:

function Player(skipTime)
{
    this.skipTime = skipTime;

    // initialise main narration audio
    this.narration = new Audio(getFileName(dynamicNarration));
    this.narration.preload = "auto";
    this.narration.addEventListener('canplaythrough', () => { this.loaded();       });
    this.narration.addEventListener('timeupdate',     () => { this.seek();         });
    this.narration.addEventListener('ended',          () => { this.ended();        });
    this.narration.addEventListener('waiting',        () => { this.audioWaiting(); });
    this.narration.addEventListener('playing',        () => { this.loaded();       });

    this.narration.addEventListener('loadedmetadata', () => {playButton.removeClass('loading');});

    playButton.addClass('loading');
}

Player.prototype =
{
    rew: function()
    {
        this.skip(-this.skipTime);
    },

    ffw: function()
    {
        this.skip(this.skipTime);
    },

    skip: function(amount)
    {
        var curTime = this.narration.currentTime;
        var newTime = curTime + amount;
        console.info(`Changing currentTime (${curTime}) to ${newTime}`);
        this.narration.currentTime = newTime;
        console.info(`Result: currentTime = ${this.narration.currentTime}`);
    }
};

Но если вы не хотите долго ждать загрузки звука, у вас есть только один вариант: преобразовать все ваши аудиофайлы в формат dataURL, который выглядит следующим образом:

var data = "data:audio/mp3;base64,...

Но в этом случае придется ждать загрузки страницы даже больше, чем загрузки одного аудиофайла. А при загрузке аудиофайла это только метаданные, и это быстрее.

Я нашел решение своей проблемы, если не совсем объяснение.

Мой хостинг-провайдер использует CDN, для которого он должен заменить URL-адреса ресурсов на URL-адреса другого домена. URL-адреса моих аудиоресурсов динамически создаются JS, потому что в них есть случайный элемент; Таким образом, процесс развертывания, который заменяет URL-адреса, не улавливал их для моих аудиофайлов. Чтобы обойти это, я вручную исключил аудиофайлы из CDN, то есть я мог ссылаться на них, используя относительные пути к файлам.

Так было, когда у меня возникла эта проблема.

Затем, из-за отдельной проблемы, я применил другой подход: я получил аудиофайлы обратно в CDN и написал функцию для извлечения доменного имени, которое мне нужно было использовать для извлечения файлов. Когда я это сделал, я внезапно обнаружил, что все мои проблемы, связанные с настройкой currentTime, исчезли. Почему-то отсутствие файлов в CDN серьезно мешало браузеру загружать их упорядоченным образом.

Если кто-нибудь может добровольно объяснить, почему это могло быть, мне было бы очень любопытно это услышать ...

Редактировать

Я работал над другим проектом, который включает потоковую передачу звука, на этот раз также с поддержкой PWA, поэтому мне пришлось реализовать механизм кэширования в моем сервис-воркере для аудиофайлов. Благодаря это руководство я узнал все о подводных камнях диапазон запросов и теперь понимаю, что неспособность обслуживать правильные ответы на запросы с заголовками диапазонов нарушит поиск в некоторых браузерах.

Похоже, что в приведенном выше случае, когда я исключил свои файлы из CDN, они обслуживались откуда-то, что не поддерживало заголовки диапазонов. Когда я переместил их обратно в CDN, это было исправлено, так как он должен был быть построен с явной поддержкой потокового мультимедиа.

Здесь - хорошее объяснение правильных ответов на запросы диапазона. Но для тех, кто сталкивается с этой проблемой при использовании сторонней службы хостинга, достаточно знать, что они, вероятно, не поддерживают заголовки диапазонов для потокового мультимедиа. Если вы хотите убедиться, что это так, вы можете запросить продолжительность звукового объекта. По крайней мере, в случае Safari продолжительность установлена ​​на бесконечность, когда он не может успешно выполнить запрос диапазона, и в этот момент поиск будет отключен.

Это решило мою проблему ...

    private refreshSrc() {
      const src = this.media.src;
      this.media.src = '';
      this.media.src = src;
    }

Есть некоторые требования для правильной загрузки аудиофайла и использования свойств. Ваш ответ при обслуживании файла должен иметь следующие заголовки.

диапазоны приема: байты

Длина содержимого: BYTE_LENGTH_OF_YOUR_FILE

Content-Range: байты 0-BYTE_LENGTH_OF_YOUR_FILE / BYTE_LENGTH_OF_YOUR_FILE

тип содержимого: аудио / mp3

Мои коллеги и я боролись над этим несколько дней, и, наконец, это сработало.

Изображение заголовка ответа для аудиофайла