JSFiddle - React, Tailwind, and code Playground

by robaldred

HTML

<script src="http://code.createjs.com/soundjs-0.5.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>
<script src="http://static.stardotstar.com/scripts/visibility.min.js"></script>
hello

JavaScript

var instance;
var instance_ends_at = null;
var sound_timer;
var tl;

function pause() {
    instance.pause();
    sound_timer.timeScale(0);
    tl.timeScale(0);
}

function resume() {
    instance.resume();
    sound_timer.timeScale(1);
    tl.timeScale(1);
}

function init() {
	createjs.Sound.addEventListener("fileload", loadHandler);
	createjs.Sound.registerSound("http://static.stardotstar.com/audio/menu.ogg", "sound");
    
    Visibility.change(function(event, state) {
        if(state == 'hidden') {
            console.log('tab hidden, pause');
			pause();
        } else if (state == 'visible') {
            console.log('tab visibile, resume');
		    resume();
        }
    });    
}

function stopSound() {
    curpos = instance.getPosition();
    console.log("Stopping sound at",curpos/1000);
    if(curpos < instance_ends_at) {
        diff = instance_ends_at - curpos;
        console.error("Sound being stopped",diff,"ms before it should be");
    }
    sound_timer.kill();
    instance.stop();
}

function loadHandler(event) {
    tl = new TimelineLite()
    tl.add(function() {
        playSound(0,9.5);
    })
           
    tl.add(function() {
        playSound(9.6,12.5);
    },"+=10")
    
    tl.add(function() {
        playSound(22.3,11);
    },"+=13")
}

function playSound(from,duration) {
    console.log("Playing from",from,"for",duration);
    instance = createjs.Sound.createInstance("sound");
    fromms = from*1000;
    instance.play(createjs.Sound.INTERRUPT_ANY,0,fromms,0,1,0);
    instance_ends_at = (from+duration)*1000;
    sound_timer = TweenMax.delayedCall(duration,stopSound);
}

init();