3

Tengo un repositorio de audios en mi web y me gustaría poder reproducir más de uno a la vez, pero no consigo averiguar cómo hacerlo.

Os dejo el código por si alguno sabe la respuesta:

var $player = $('.js-audio-player'),
  $playbackClass = 'is-playing',
  $fadeDuration = 500

$player.each(function(index) {
  var $this = $(this),
    id = 'audio-player-' + index

  $this.attr('id', id)

  $this.find('.js-control')[0].addEventListener('click', function() {
    resetPlayback(id)
    playback($this, $this.find('audio'), $this.find('video'))
  })

  // Reset state once audio has finished playing
  $this.find('audio')[0].addEventListener('ended', function() {
    resetPlayback()
  })
})

function playback($player, $audio, $video) {
  if ($audio[0].paused) {
    $audio[0].play()
    $video[0].play()
    $audio.animate({
      volume: 1
    }, $fadeDuration)
    $player.addClass($playbackClass)
  } else {
    $audio.animate({
      volume: 0
    }, $fadeDuration, function() {
      $audio[0].pause()
      $video[0].pause()
    })
    $player.removeClass($playbackClass)
  }
}

function resetPlayback(id) {
  $player.each(function() {
    var $this = $(this)

    if ($this.attr('id') !== id) {
      $this.find('audio').animate({
        volume: 0
      }, $fadeDuration, function() {
        $(this)[0].pause()
        $this.find('video')[0].pause()
      })
      $this.removeClass($playbackClass)
    }
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li>
  <div class="audio-player js-audio-player">
    <button class="audio-player__control js-control">
        <div class="audio-player__control-icon"></div>
      </button>
    <h4 class="audio-player__title">Rain</h4>
    <audio preload="auto">
        <source src="http://www.sousound.com/music/healing/healing_01.mp3"/>
      </audio><img class="audio-player__cover" src="img/rain.jpg" />
    <video preload="auto" loop="loop">
        <source src="" type=""/>
      </video>
  </div>
</li>
<li>
  <div class="audio-player js-audio-player">
    <button class="audio-player__control js-control">
      <div class="audio-player__control-icon"></div>
    </button>
    <h3 class="audio-player__title">Campfire</h3>
    <audio preload="auto" loop>
      <source src="http://www.sousound.com/music/healing/healing_02.mp3"/>
    </audio><img class="audio-player__cover" src="img/campfire.jpg" />
    <video preload="auto" loop="loop">
        <source src="" type=""/>
      </video>
  </div>
</li>

1 respuesta 1

3

Puedes reproducir los sonidos que quieras a la vez simplemente llamando al método play de cada uno. Te dejo aquí un ejemplo:

Al darle al play obtiene todos los elementos con clase audio y los reproduce. Al darle a stop para la pista 2 (para que se vea mejor que son dos sonidos reproduciéndose a la vez):

var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');

var playSound = function() {
	$('.audio').each(function(index){
      $(this)[0].play();
    });
};

playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', function(){audio2.pause()}, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div>
  	<audio id="audio1" class="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"  ></audio>
	<audio id="audio2" class="audio" src="http://www.sousound.com/music/healing/healing_02.mp3" preload="auto"  ></audio>
	<button id="play">Play</button>
	<button id="stop">Stop</button>
</div>

</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.