JSFiddle - React, Tailwind, and code Playground

by Simon Hi

HTML

<button id="startButton" type="button" onclick="startAll();">Start</button>
<button id="resetButton" type="button" onclick="resetAll();">Reset</button>
<br>
<audio id="audio" src="http://jeudego.org/z/exemple.mp3"></audio>
<div id="textContener" class="coloredBackground"><span id="text">Maman, je n'ai rien aux dents !</span></div>
<br>
<audio id="audio2" src="http://jeudego.org/z/exemple2.mp3"></audio>
<div id="textContener2" class="coloredBackground"><span id="text2">C'est bien mon petit. Continue comme ça !</span></div>

CSS

.coloredBackground
{
	display:inline-block;
    background-color:pink;
    width:0;
}
.coloredBackground span {white-space:nowrap;}

JavaScript

function playNext()
{
	document.getElementById("textContener2").style.transition="width "+document.getElementById("audio2").duration+"s linear";
	document.getElementById("textContener2").style.width=document.getElementById("text2").offsetWidth+"px";
	document.getElementById("audio2").play();
}

function startAll()
{
	document.getElementById("textContener").style.transition="width "+document.getElementById("audio").duration+"s linear";
	document.getElementById("textContener").style.width=document.getElementById("text").offsetWidth+"px";
	document.getElementById("audio").play();
}

function resetAll()
{
    document.getElementById("textContener").style.transition="none";
    document.getElementById("textContener").style.width="0";
    document.getElementById("textContener2").style.transition="none";
    document.getElementById("textContener2").style.width="0";
}

function init()
{
    document.getElementById("audio").addEventListener("ended",playNext,false);
}

window.addEventListener("load",init,false);