Как играть во многие аудиофайлы в последовательности

Question

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

Для начала, на моей веб-странице много элементов <audio>, каждый из которых находится в <p> с соответствующим текстом. Каждый из этих элементов <audio> соответствует одному предложению истории.

Я собирался начать кодирование javascript-объекта, который позволил бы использовать какую-то функциональность «играть все», вы бы нажали на кнопку, и она будет воспроизводить аудио [0], когда это закончится, аудио [1 ] и т. д. Он также имеет кнопку «пауза» и отслеживает, где вы были и т. д. Таким образом, отдельные предложения можно было бы играть или пользоваться, потому что каждый из них имеет элемент audio. Или можно использовать мои кнопки «играть все» сверху, чтобы обрабатывать последовательность элементов audio, как если бы они были одним большим элементом.

Затем я начал спрашивать себя, есть ли здесь какое-нибудь лучшее/более легкое/более каноническое решение. Одна вещь, которую я думал о том, чтобы сделать, - это собрать все эти отдельные аудиофайлы вместе в большой аудиофайл и, возможно, создать элементы «chapter» <track>. Это предпочтительнее?

Каковы преимущества и недостатки каждого подхода? Есть ли какое-то готовое решение для меня, которое я просто не нашел?

Answer 1

Я использую javascript для решения проблемы, используя аудио объекты и setInterval. Ниже приведен пример:

var sndLetItSnow = new Audio("audio/letItSnow.m4a"); 
    var sndSanta = new Audio("audio/snow.m4a"); 

    var playlist = [sndLetItSnow, sndSanta]; 

    var current = null; 
    var idx = 0; 

    function playSound() { 
     if (current === null || current.ended) { 
      // go to next 
      current = playlist[idx++]; 

      // check if is the last of playlist and return to first 
      if (idx >= playlist.length) 
       idx = 0; 

      // return to begin 
      current.currentTime=0; 

      // play 
      current.play(); 
     } 

    } 

    setInterval(playSound, 1000); 

Для получения дополнительной документации по объекту Audio вы можете посетить эту страницу:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

Я надеюсь, что это поможет!