JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

<input id="playButt" type="button" value="Play ▶" onclick="audioPlay(); gradientAnim()"/>
<audio id="shepTone" src="http://upload.wikimedia.org/wikipedia/commons/6/61/DescenteInfinie.ogg" loop >

CSS

html{
    background: linear-gradient(45deg, #f06, yellow);
     width:100%;
    height:100%;
}
input[type="button"]{
    padding-left:20px;
    padding-right:20px;
}

JavaScript

animated = false;
var gradientInterval;
var butt = document.getElementById("playButt");
var audio = document.getElementById("shepTone");
function audioPlay(){
    if(butt.value.toLowerCase() === "play ▶")
    {
        audio.play();
        butt.value = "Pause ❚❚";
        
    }
    else
    {
        audio.pause();
        butt.value = "Play ▶";
    }
};
function gradientAnim()
{
    gradientInterval = setInterval(changeColors, 50);   
}
function changeColors()
{
    var gradDeg = Math.random()*45;
document.getElementsByTagName("html")[0].style.background="linear-gradient(" + gradDeg + "deg, #f06, yellow)";
}