Синхронизировать audios с HTML5 и Javascript

Я хочу объединить два audios в одном, чтобы синхронизировать их с HTML5 в стороне клиента. Я увидел, что с Веб Аудио Api они могут становиться множеством вещей, но не был способен находить, как делание этого.

Я имею ссылку по отношению к двум файлам аудио (.mp3, .wav...), что я хочу, состоит в том, чтобы синхронизировать эти два файла аудио, как будто это были голос и песня. Я они не хочу объединить один за другим, хочу синхронизировать их.

Мне хотелось бы делать все в стороне клиента используя HTML5, не используя сервера. Возможно делать это?

5
задан 22.07.2016, 20:14
2 ответа

Если то, что ты хочешь, состоит в том, чтобы синхронизировать audios, и что звучали одновременно, идея состояла бы в том, чтобы твоя программа использовала событие canplaythrough и он делал следующее:

  • Определи переменную, которая будет служить как счетчик для нагруженных audios.
  • Поверьте два audios на странице без autoplay.
  • Помести драйвер события canplaythrough в audios.
  • Когда закончит быть загруженным аудио, взорвется драйвер, который он сделает:
    • Добавлять +1 к счетчику нагруженных audios.
    • Все audios были загружены?
      • Если да, сделай play audios одновременно.

Почему использовать событие canplaythrough вместо loadeddata или canplay? Событие canplaythrough он бросается, когда были загружены достаточно данных как чтобы знать, что будет возможно касаться полной мелодии без необходимости делать buffering. Что-то, что могло бы делать, что desincronizaran audios.

Здесь тебе оставил прокомментированный пример двух audios различные (хотя достаточно не согласующиеся, я это чувствую), что звучат одновременно синхронизированной формы:

// contador de audios cargados
var cargados = 0;

// controlador del evento canplaythrough
function sincronizarAudio() {
  // aumentamos el número de audios que se han cargado
  cargados++;
  
  // si se han cargado los dos audios que queremos sincronizar
  if (cargados == 2) {
    // le damos play a los dos
    audio1.play();
    audio2.play();
  }
}

// crea un elemento audio
var audio1 = document.createElement("audio");
// asigna la fuente del sonido
audio1.setAttribute("src", "http://www.w3schools.com/tags/horse.ogg");
// opcional: especifica que se vean los controles
audio1.setAttribute("controls", "controls");
// añade el controlador del evento canplaythrough
audio1.oncanplaythrough = sincronizarAudio;
// añade el elemento al cuerpo de la página
document.querySelector("body").appendChild(audio1);

// lo mismo de arriba pero con otro audio/video
var audio2 = document.createElement("audio");
audio2.setAttribute("src", "http://www.w3schools.com/tags/movie.ogg");
audio2.setAttribute("controls", "controls");
audio2.oncanplaythrough = sincronizarAudio;
document.querySelector("body").appendChild(audio2);

Если ты кроме того хочешь, чтобы они были синхронными, когда он будет сделан pausa/play, что ты можешь делать, состоит в том, чтобы добавлять драйверы событий для pause и play что применили бы метод pause() и play() соответственно во все синхронизированные audios.

В следующем примере я использовал два audios немного больше длин (хотя различной продолжительности службы, что может вызывать проблемы), для того, чтобы ты смог видеть, как, сделав pausa/play в одном из них другой, он также делает pausa/play.

var cargados = 0;

function sincronizarAudio() {
  cargados++;

  if (cargados == 2) {
    audio1.play();
    audio2.play();
  }
}

function sincronizarPlay() {
  audio1.play();
  audio2.play();
}

function sincronizarPause() {
  audio1.pause();
  audio2.pause();
}

var audio1 = document.createElement("audio");
audio1.setAttribute("src", "http://www.w3schools.com/tags/mov_bbb.ogg");
audio1.setAttribute("controls", "controls");
audio1.oncanplaythrough = sincronizarAudio;
audio1.onplay = sincronizarPlay;
audio1.onpause = sincronizarPause;
document.querySelector("body").appendChild(audio1);

var audio2 = document.createElement("audio");
audio2.setAttribute("src", "http://www.w3schools.com/tags/movie.ogg");
audio2.setAttribute("controls", "controls");
audio2.oncanplaythrough = sincronizarAudio;
audio2.onplay = sincronizarPlay;
audio2.onpause = sincronizarPause;
document.querySelector("body").appendChild(audio2);
4
ответ дан 24.11.2019, 13:47

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

Работать с аудио может быть во многих случаях сложное задание, еще больше, если не имеется идея о, как функционирует звук (как это мой случай). Я рекомендую тебе смотреть на себя эту статью о html5rocks, в которой они объясняют достаточно добра, как работа с аудио в HTML5/JS, и если я не помню плохо есть пример, который стоил бы тебе для того, в чем ты нуждаешься.

0
ответ дан 24.11.2019, 13:47