Audio queue manager(simulate)

by Ting-Yuan Chang

HTML

<div class="list">
  <div class="action">Smile</div>
  <div class="action">Angry</div>
  <div class="action">Peace</div>
</div>

<div>
Queue: <span class="queue"></span>
</div>
<div>
Log:
<div class="log"></div>
</div>

CSS

.list {
  display: flex;
}
.action {
  display: inline-block;
  background: pink;
  width: 50px;
  height: 50px;
  margin: 10px;
  border-radius: 10px;
  user-select: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.log {
  
}

JavaScript

var isAudioPlaying = false;
var audioQueue = [];
function audioQueueManager(continuePlay, action) {
  if(action !== undefined) {
    audioQueue.push(action);
  }
  $('.queue').text(JSON.stringify(audioQueue));
	console.log(audioQueue);
  
  if(isAudioPlaying === true && continuePlay === false) return;
  
  if(audioQueue.length > 0) {
    isAudioPlaying = true;
    var item = audioQueue.shift();
    // play(item);
    var time = new Date();
  	$('.queue').text(JSON.stringify(audioQueue));
    $('.log').append('<p>' + new Date() + ':' + item + '</p>');
    console.log(item);
    
    setTimeout(audioQueueManager.bind(true), 3000);
  } 
  else {
    isAudioPlaying = false; 
    console.log('end');
  }
}

$('.action').click(function() {
	audioQueueManager(false, $(this).text());
})