0
console.log(audio.played);

https://developer.mozilla.org/ru/docs/Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges

Читаю, не понимаю. Необходимо по окончанию воспроизведения получить все те отрывки, что пользователь проиграл. Допустим аудио, продолжительность которого 10 сек, пользователь прослушал только первые 2 секунды и с 5 по 8 секунду.

Собственно, как можно получить массив, в котором будет дочерние массивы, отрезки, в которых будет время старта и время окончания?

    cl.onclick = _ => {
        video[video.paused ? 'play' : 'pause']();
        if(video.played.length)
            console.log(video.played);
    }
<video id=video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" width="300" controls></video><br /><br />
<div id=cl>Click</div>

5
  • 1
    "Читаю, не понимаю" - это у меня такая отмазка была в универе/школе :) Что именно не понятно, что вы пробовали из этой документации и у вас не получилось?) Где попыткаи решения?)
    – EzioMercer
    20 июн 2022 в 8:07
  • К примеру, this.v.played.start(1), получаю ошибку. По идеи должно показать время старта первого отрезка? 20 июн 2022 в 12:14
  • Кодом поделитесь пожалуйста. Никто вам не сможет сказать откуда у вас эта ошибка и тем более что вы не говорите что за ошибка вообще? Мы не видим и не знаем ничего о вашем коде. Потому прошу вас поделиться своим МИНИМАЛЬНЫМ воспроизводимым кодом, где будет работа только с аудио связанные с получением отрезков времени, которые вам нужны
    – EzioMercer
    20 июн 2022 в 12:18
  • Добавил пример, получаем некий массив. Но как к примеру из первого вытащить тайм старта и окончания? 20 июн 2022 в 12:50
  • К сожалению нигде не видно попытки повторить код из документации для получения отрезков времени
    – EzioMercer
    20 июн 2022 в 12:52

1 ответ 1

0

Эта статья не подходит для решения, т к свойство video.buffered() показывает отрывки, которые были предзагружены, а не те, что пользователь проиграл. А предзагрузка (буферизация) всегда происходит с небольшим запасом. Плюс ещё отрывки таким образом создаются даже если не воспроизводить, а только ставить курсор в определённое место или перемещать ползунок. Ещё они могут неожиданно между собой объединяться. Так что вот какой ряд недостатков.

По настоящему создать массив из проигранных отрывков можно следующим кодом:

<video id=video width=300 src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" controls></video><br /><br />
<canvas id=canvas height=50 style="border-style: solid"></canvas><br /><br />
<script>
canvas.width = 300; // ширина прогрессбара
let ctx = canvas.getContext("2d");
video.ontimeupdate = () => {
    ctx.fillStyle = "green";
    ctx.fillRect(drawing(video.currentTime), 0, 1, 25);
}
let array = [];
video.onplay = () => start = video.currentTime;
video.onpause = () => {
    end = video.currentTime;
    console.log("start = " + start.toFixed(2) + "; end = " + end.toFixed(2));
    ctx.fillStyle = "red";
    ctx.fillRect(drawing(start), 25, drawing(end - start), 25);
    array.push([start, end]);
}
function drawing(e){return e / video.duration * canvas.width};
</script>

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

После прочтения мной упомянутой документации buffered() у меня в голове не укладывается, сколько ошибок там сделано. В первом примере после каждого срабатывания seek (выбор места воспроизведения на плеере) циклом выводятся все накопленные до этого отрывки, включая последний. (даже страница от этого виснет) Вместо того, чтобы столько раз перерисовывать одно и то же, достаточно выводить на канвас только последний отрезок:

window.onload = function(){
    var myAudio = document.getElementById('my-audio');
    var myCanvas = document.getElementById('my-canvas');
    var context = myCanvas.getContext('2d');

    context.fillStyle = 'lightgray';
    context.fillRect(0, 0, myCanvas.width, myCanvas.height);
    context.fillStyle = 'red';
    context.strokeStyle = 'white';
    var inc = myCanvas.width / myAudio.duration;

    // отображение TimeRanges
    myAudio.addEventListener('seeked', function() {
        var current = myAudio.buffered.length - 1;
        var startX = myAudio.buffered.start(current) * inc;
        var endX = myAudio.buffered.end(current) * inc;
        var width = endX - startX;
        context.fillRect(startX, 0, width, myCanvas.height);
    });
}

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

  myAudio.addEventListener('progress', function() {
    var duration =  myAudio.duration;
      for (var i = 0; i < myAudio.buffered.length; i++) {
            if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) < myAudio.currentTime) {
                document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%";
                break;
            }
        }
   });

И зачем нужны аж два контейнера, отображающие продолжительность аудиофайла? (с классами buffered и progress) Такое ощущение, что эти примеры писал кто-то пьяный.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.