let mobile = false;
let prev = 100;

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
mobile = true;
}

function rotateOn(id) {
let tshid = [“shape” + id];
let tsh = document.getElementById(tshid);
tsh.classList.add(“shape-rotate”);
}

function rotateOff(id) {
let tshid = [“shape” + id];
let tsh = document.getElementById(tshid);
tsh.classList.remove(“shape-rotate”);
}

function audioOn(id) {

// Buttons
let ionID = [‘icon-on’ + id];
let iconPlay = document.getElementById(ionID);
iconPlay.style.display = “none”;

let ioffID = [‘icon-off’ + id];
let iconPause = document.getElementById(ioffID);
iconPause.style.display = “block”;

// Visualization
rotateOn(id);

}

function audioOff(id) {

// Buttons
let ionID = [‘icon-on’ + id];
let iconPlay = document.getElementById(ionID);
iconPlay.style.display = “block”;

let ioffID = [‘icon-off’ + id];
let iconPause = document.getElementById(ioffID);
iconPause.style.display = “none”;

// Visualization
rotateOff(id);

}

function activateAudio(id) {

for (let e = 0; e < count; e++) {
// Pause all audio and reset to start
let afReset = [‘video’ + e];
let audReset = document.getElementById(afReset);

//let vzReset = [‘vizvideo’ + e];
//let vizReset = document.getElementById(vzReset);

// Reset icon to play
//let iReset = [‘icon’ + e];
//let iconReset = document.getElementById(iReset);
///iconReset.classList.remove(‘tmp-aud-pause’);

// Ignore the selected audio
if (e != id) {
audReset.pause();
rotateOff(e);
audioOff(e);
}

}

// Play selected audio
let afPlay = [‘video’ + id];
let audPlay = document.getElementById(afPlay);

// let vzPlay = [‘vizvideo’ + id];
// let vizPlay = document.getElementById(vzPlay);

let iPlay = [‘icon’ + id];
let iconPlay = document.getElementById(iPlay);

if (audPlay.paused == true) {
//iconPlay.classList.add(‘tmp-aud-pause’);
audPlay.play();
rotateOn(id);
audioOn(id);
} else {
//iconPlay.classList.remove(‘tmp-aud-pause’);
audPlay.pause();
rotateOff(id);
audioOff(id);
}

}

function formatDuration(d) {

let m = parseInt(d / 60, 10);
let s = Math.round(d % 60);
let mp = ”;
let sp = ”;
if (m < 10) {
mp = ‘0’;
}
if (s {
audPlay.pause();
audPlay.currentTime = 0;
durPlay.innerHTML = formatDuration(audPlay.duration);

});

}

function toggleAudio(id) {

// Stop other players from playing, start or pause selected audio
activateAudio(id);

// Monitor the selected audio, for end and duration
monitorAudio(id);

}

function replayAudio(id) {

let afPlay = [‘video’ + id];
let audPlay = document.getElementById(afPlay);

let ionID = [‘icon-on’ + id];
let iconPlay = document.getElementById(ionID);
iconPlay.style.display = “none”;

let ioffID = [‘icon-off’ + id];
let iconPause = document.getElementById(ioffID);
iconPause.style.display = “block”;

rotateOn(id);
audPlay.play();
audPlay.currentTime = 0;

if(prev != id) {
let prPlay = [‘video’ + prev];
let prevPlay = document.getElementById(prPlay);
prevPlay.pause();
rotateOff(prev);
audioOff(prev);
}

monitorAudio(id);

}

// Find all the audio players and populate with ids and functions

let count;

function setupMedia() {

// Get all media players
let m = document.getElementsByClassName(‘tmp-media’);
// Get the media file container
let mf = document.getElementsByClassName(‘tmp-media-file’);
// Get the video tag for the media file
let mfv = document.querySelectorAll(“.tmp-media-file video”);
// Get the visualizer container
//let viz = document.getElementsByClassName(“tmp-visualizer”);
// Get the visualizer video tag
// let vizv = document.querySelectorAll(“.tmp-visualizer video”);
// Get the progress container
// let prog = document.getElementsByClassName(“tmp-progress”);
// Get the duration container
let dur = document.getElementsByClassName(“tmp-duration”);
// Get the current time container
let time = document.getElementsByClassName(“tmp-time”);
// Get the controls container
let cntrl = document.getElementsByClassName(“tmp-controls”);
// Get the on icon
let iconon = document.getElementsByClassName(“tmp-icon-on”);
// Get the off icon
let iconoff = document.getElementsByClassName(“tmp-icon-off”);
// Get the replay icon
let iconrp = document.getElementsByClassName(“tmp-icon-replay”);
// Get the shape file
let tsh = document.getElementsByClassName(“tmp-shape”);

let lng = 3; // m.length;

for (let e = 0; e < lng; e++) {

// Setup ‘tmp-media’
let mID = [‘media’ + e];
m[e].setAttribute(‘id’, mID);

// Setup ‘tmp-media-file’
let mfID = [‘mediafile’ + e];
mf[e].setAttribute(‘id’, mfID);

// Setup ‘tmp-media-file video’
let mfvID = [‘video’ + e];
mfv[e].setAttribute(‘id’, mfvID);

// Setup ‘tmp-visualizer’
// let vizID = [‘viz’ + e];
// viz[e].setAttribute(‘id’, vizID);

// Setup ‘tmp-visualizer video’
// let vizvID = [‘vizvideo’ + e];
// vizv[e].setAttribute(‘id’, vizvID);

// Setup ‘tmp-progress’
//let progID = [‘prog’ + e];
//prog[e].setAttribute(‘id’, progID);

// Setup ‘tmp-duration’
let durID = [‘dur’ + e];
dur[e].setAttribute(‘id’, durID);
dur[e].innerHTML = formatDuration(mfv[e].duration);

// Setup ‘tmp-time’
let timeID = [‘time’ + e];
time[e].setAttribute(‘id’, timeID);

// Setup ‘tmp-controls’
let cntrlID = [‘controls’ + e];
cntrl[e].setAttribute(‘id’, cntrlID);

// Setup ‘tmp-icon-on’
let ionID = [‘icon-on’ + e];
iconon[e].setAttribute(‘id’, ionID);

// Setup ‘tmp-icon-off’
let ioffID = [‘icon-off’ + e];
iconoff[e].setAttribute(‘id’, ioffID);

// Setup ‘tmp-icon-replay’
let irpID = [‘icon-replay’ + e];
iconrp[e].setAttribute(‘id’, irpID);

// Add the toggle play/pause to the icons
let audFunc = [‘toggleAudio(‘ + e + ‘)’];
let audrpFunc = [‘replayAudio(‘ + e + ‘)’];
iconon[e].setAttribute(‘onclick’, audFunc);
iconoff[e].setAttribute(‘onclick’, audFunc);
iconrp[e].setAttribute(‘onclick’, audrpFunc);
// and to the visualizer
//viz[e].setAttribute(‘onclick’, audFunc);

// Setup shape
let tshid = [‘shape’ + e];
tsh[e].setAttribute(‘id’, tshid);

}

// Store the number of audio players
count = m.length;

// Cleanup
m,mf,mfv,dur,time,cntrl,iconon,iconoff,tsh,(iconrp= undefined);

}

function setup() {

setupMedia();

}

/* Preload */

function ready(e){(document.attachEvent?”complete”===document.readyState:”loading”!==document.readyState)?e():document.addEventListener(“DOMContentLoaded”,e)}document.onmouseleave=function(){window.isReady=!1},window.addEventListener(“resize”,function(){window.isReady=!1}),window.isReady=void 0!==window.isReady&&window.isReady,ready(function(){var e=setInterval(function(){window.imagesLoaded&&(imagesLoaded(“#tmp-load”,{background:!0},function(){window.isReady=!1,clearInterval(e)}),clearInterval(e))},100);if(!1!==window.isReady)return;window.isReady=!0;const t=setTimeout(function(){clearTimeout(t),setup()},300)});

Like what you see? How about some more R29 goodness, right here?