Play two audio at the same time

Question

Play two audio at the same time

Navigation

#1 by (3 votes)

3

I have an audio repository on my website and I would like to be able to play more than one at a time, but I can not figure out how to do it.

I leave the code in case anyone knows the answer:

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>

javascript html

asked by Alejandro 18.04.2018 в 14:41

source

1 answer

JAVA: Program that reads an integer and a position How to capture a variable type int in js?

score 3 · Answer 1

You can play the sounds you want at the same time by simply calling the play of each method. Here is an example:

By hitting the play, you get all the elements with class audio and play them. When giving a stop for track 2 (to make it look better than two sounds playing at the same time):

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>