JSFiddle - React, Tailwind, and code Playground

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

HTML

<div class="audio_collection">
  <audio data-target-element="#audio_rand7853847857348">
    <source src="https://psv4.vk.me/c613330/u177644272/audios/1c2a9ed61882.mp3" type="audio/mpeg">
    Извините, Ваш браузер не поддерживает плеер.
  </audio>
  <div class="audio_box" id="audio_rand7853847857348">
    <a class="title" href="javascript:void(0)">Fight The Fade–Tomorrow</a>
    <a class="play" data-target-control="play" href="javascript:void(0)">Play!</a>
    <a class="pause" data-target-control="pause" href="javascript:void(0)">Pause!</a>
  </div>
  <div class="audio_collection_list">
    <a href="javascript:void(0)" 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-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-src="https://psv4.vk.me/c613330/u177644272/audios/1c2a9ed61882.mp3">3_Legion - Listopad</a>
  </div>
</div>

SCSS

.audio_collection {
  .audio_collection_list {
    display: block;
  }
}

JavaScript

(function(){

	//  Define variables
  var audioCollection, targetElementID, targetElement, targetElementChildren, play, pause;
  
  // Get every audio in the collection
  audioCollection = document.querySelectorAll('audio');

	// Iterate over each audio
  audioCollection.forEach(function(el){
  
  	// Get audio data-target-element value
    targetElementID = el.dataset.targetElement;

		// If audio data-target-element length
    if (targetElementID) {

			// Get element
      targetElement = document.querySelector(targetElementID);

			// If element is found
      if (targetElement) {
      
      	// Get element children
        targetElementChildren = Array.from(targetElement.children);

				// Iterate over children
        targetElementChildren.forEach(function(c){
        
        	// Switch dataset
          switch (c.dataset.targetControl) {
            case 'play': {
              c.addEventListener('click', function(){
                play(el);
              });
              break;
            };
            case 'pause': {
              c.addEventListener('click', function(){
                pause(el);
              });
              break;
            };
            default: {};
          };
        });
      };
    };

  });
  
  function play(el) {
		el.play();
  };
  
  function pause(el) {
		el.pause();
  };

}())