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

Я создаю пользовательский аудиоплеер (этап планирования на данный момент :)), и я застрял в этом. Я хочу рассчитать общую продолжительность всех моих песен в начале. Я знаю, что мне нужно загрузить каждую песню, чтобы узнать ее продолжительность. Если я устанавливаю атрибут src, например, для первой песни, я получаю его продолжительность с обработчиком событий загруженного метаданных. Но как получить их сумму? Нужно ли загружать каждый из них отдельно? Нужно ли устанавливать src attr для аудио-элемента для каждой песни, которую я имею в списке? Любые намеки были бы высоко оценены!Как рассчитать общую продолжительность набора треков с использованием аудио HTML5?

источник

2012-06-06 Jonas

Я не думаю, что это возможно только с HTML5, так как нет спецификации для плейлистов или что-то в этом роде. Я думаю, вам нужно будет выполнить скрипт на стороне сервера, который будет использовать продолжительность аудио и загрузить результат на сайт. Вы также можете использовать Javascript для загрузки всех элементов в последовательности (см. Http://stackoverflow.com/questions/2551859/html-5-video-or-audio-playlist) и получить от этого длительность, однако это происходит чтобы занять некоторое время. –

Я был здесь вчера, потому что мне нужно было решить эту ту же проблему, и, конечно же, StackOverflow был вершиной результатов поиска - даже для этих четырехлетних неотвеченных вопросов. Увы мои поиски нативного решения JS оказались безуспешными, хотя я попробовал несколько различных предложений от здесь и там, так вот что я в конце концов пришел сам с собой ...

function tracksTotalLength(Tracklist) { 
    var tempAudio = document.createElement('audio'), 
     L = Tracklist.length, 
     i = 0, // iterator 
     TTL = 0, // TotalTrackLength 
     flag = true; 

    // set media-type and mute (belt and braces) 
    tempAudio.type = 'audio/mpeg'; 
    tempAudio.muted = true; 

    tempAudio.addEventListener(
     'durationchange', 
     function(e) { 
      TTL += e.target.duration; 
      /* DEBUG ONLY */ console.log('TTL:',TTL); 
      recursiveUpdater(i++); 
     }, 
     false 
    ); 

    function recursiveUpdater(ii) { 
     if (!isNaN(TTL) && ii < L) { 
      tempAudio.src = Tracklist[ii]; 
      // fires recursiveUpdater() 
      // via 'durationchange' event 
     } else { 
      // sometimes not all values are caught 
      // and TTL = NaN, so 
      // reset and have another run at it 
      if (isNaN(TTL) && flag) { 
       i = 0; 
       flag = false; 
       recursiveUpdater(i); 
      } else (
       // but you can't recurse all day so 
       // remove tempAudio 
       tempAudio = null; 
       // if it hasn't caught return false 
       return (!isNaN(TTL) : TTL : false); 
      } 
     } 
    } 
    return recursiveUpdater(i); 
} 

var tracks = [ 
    'path/to/track01.mp3', 
    'path/to/track02.mp3', 
    'path/to/track03.mp3', 
    /*...etc... */ 
]; 
var totalLength = tracksTotalLength(tracks); 
//=> totalLength = seconds (float) or false

Функция tracksTotalLength() возвращает общее время список в секундах, который затем может быть округлен в hh: mm: ss согласно классическому StackOverflow answer.

«Длительный обмен» запускается при загрузке или изменении метаданных. Подробнее об этом на Media Events (MDN)

Протестировано в последних браузерах Firefox и Chromium на Lubuntu 14.04 с треклистами из 5-50 предметов.

Надеюсь, это поможет кому-то или, по крайней мере, побуждает истинного гуру JS придумать лучшую рутину.

источник

2016-04-12 13:48:05

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

ответ

Смежные вопросы