JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="audio_collection">

  <audio data-target-element="#audio_rand7853847857348">
    <source src="https://psv4.vk.me/c536620/u147224975/audios/479453d52ffc.mp3" type="audio/mpeg">
    Извините, Ваш браузер не поддерживает плеер.
  </audio>
  
  <div class="audio_box" id="audio_rand7853847857348">
    <a class="title" href="javascript:void(0)" id="audio_rand7853847857348_title">1_DDT - CHto takoe osen</a>
    <a class="play" href="javascript:void(0)" id="audio_rand7853847857348_play">Play!</a>
    <a class="pause" href="javascript:void(0)" id="audio_rand7853847857348_pause">Pause!</a>
  </div>
  
  <div class="audio_collection_list">
    <a href="javascript:void(0)" data-audio-collection="#audio_rand7853847857348_collection" data-audio-src="https://psv4.vk.me/c536620/u147224975/audios/479453d52ffc.mp3">1_DDT - CHto takoe osen</a>
    <a href="javascript:void(0)" data-audio-collection="#audio_rand7853847857348_collection" data-audio-src="https://psv4.vk.me/c611929/u234814857/audios/08ebbcca8a7d.mp3">2_Alcest - Souvenirs D'un Autre Monde</a>
    <a href="javascript:void(0)" data-audio-collection="#audio_rand7853847857348_collection" data-audio-src="https://psv4.vk.me/c613330/u177644272/audios/1c2a9ed61882.mp3">3_Legion - Listopad</a>
  </div>
  
</div>

SCSS

a {
  color: #333;
  text-decoration: none;
}
.audio_collection {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  .audio_box {
    margin-bottom: 20px;
    .title {
      
    }
    .pause {
      display: none;
      color: #f00;
    }
    .play {
      color: #f00;
    }
  }
  .audio_collection_list {
    a {
      display: block;
    }
  }
}

JavaScript

(function(){

  var audioCollection, targetElementID, targetElement, targetElementCollection, targetElementPlay, targetElementPause, targetElementTitle, audioCollectionSource;
  
  audioCollection = document.querySelectorAll('audio');

  audioCollection.forEach(function(el){
  	window.g = el;
    targetElementID = el.dataset.targetElement;

    if (targetElementID) {

      targetElement = document.querySelector(targetElementID);
      
      targetElementCollection = document.querySelectorAll('[data-audio-collection="'+targetElementID+'_collection'+'"]');
      
      targetElementTitle = document.querySelector(targetElementID+'_title');
      
      targetElementPlay = document.querySelector(targetElementID+'_play');
      
      targetElementPause = document.querySelector(targetElementID+'_pause');

      if (targetElement) {
      
      	targetElementPlay.addEventListener('click', function(){
        	play(el, targetElementPlay, targetElementPause);
        });
        
        targetElementPause.addEventListener('click', function(){
        	pause(el, targetElementPlay, targetElementPause);
        });
        
        targetElementCollection.forEach(function(audio_el){
        	audio_el.addEventListener('click', function(){
          	targetElementTitle.innerText = audio_el.innerText;
          	el.children[0].attributes.src.value = audio_el.dataset.audioSrc;
            el.load();
            play(el, targetElementPlay, targetElementPause);
          });
        });
        
      };
    };
  });
  
  function play(el, play_el, pause_el) {
  	play_el.style.display = 'none';
    pause_el.style.display = 'block';
    el.play();
    
    var duration = el.duration;
    var current = el.currentTime;
    
    setInterval(function(){});
  };
  
  function pause(el, play_el, pause_el) {
  	play_el.style.display = 'block';
    pause_el.style.display = 'none';
    el.pause();
  };

}());