11523 sujets

JavaScript, DOM et API Web HTML5

(resolu) Affichage texte synchro avec du son

Bonjour,

J'aimerais créé un texte qui s'affiche ou qui se mette en mode HighLight ( un peu comme le karaoké)
synchronisé avec une voix qui dit ce même texte.
(je sais pas si c'est assez clair)

Du coup j'aimerais réalisé cela en Javascript, mais je vois pas trop comment m'y prendre, si quelqu'un a déjà fait ce genre de chose ou même une idée de comment faire?

merci
Modifié par enius76 (23 Jul 2014 - 15:15)
Modérateur
Bonjour,

Si la lecture du texte est relativement uniforme, on peut se baser sur le temps total de l'enregistrement audio pour colorier le texte petit à petit, proportionnellement au temps écoulé depuis le démarrage de l'audio. Le coloriage progressif du texte peut être effectué avec du css sur une classe qui sera affectée à l'élément html contenant le texte lors du démarrage de l'audio (par exemple lors de la survenu de l'event "play"). Y a quand même un peu de boulot pour faire marcher tout ça.

Si le texte n'est pas lu uniformément, on peut éventuellement le découper en tranche, chaque tranche étant supposée être lue de manière relativement uniforme.

On n'a par contre dans ce deuxième cas pas de moyens simples d'adapter ça à n'importe quel texte automatiquement : il faudra probablement faire le découpage à la main (en rangeant par exemple les temps de chaque tranche de texte dans un tableau) .

Amicalement,
Modérateur
Bonjour,

Un exemple de code rudimentaire (on suppose que exemple.mp3 contient l'audio prononçant le texte "maman, je n'ai rien aux dents", et que ce texte dure environ 1,5s) :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Karaoke</title>
<style>
#textContener
{
display:inline-block;
transition: width 1.5s linear;
background-color:pink;
width:0;
}
#textContener span {white-space:nowrap;}
</style>
<script>
function init()
{
document.getElementById("textContener").style.width=document.getElementById("text").offsetWidth+"px";
document.getElementById("audio").play();
}
</script>
</head>

<body onload="init();">

<audio id="audio" src="exemple.mp3"></audio>
<div id="textContener"><span id="text">Maman, je n'ai rien aux dents !</span></div>

</body>
</html>

Amicalement,
ok merci pour les pistes,

Pour mon cas j'ai une piste son par mot, tu penses que je peux garder ça tel quel, ou c'est mieux de regrouper tous en une seule piste audio?
Modérateur
Bonjour,

Un petit jsFiddle pour la route : http://jsfiddle.net/rL9ze/

Si tu as déjà une piste son par mot, tu devrais en effet pouvoir les garder tel quel, et gérer ensuite les enchainements audio et changement de couleur du texte via les events de la balise audio.

Reste à savoir si la fluidité de l'ensemble sera suffisante pour ce que tu veux faire.

Amicalement,
ah merci c'est toujours plus cool avec un ptit visuel Smiley lol

Bon bah j'ai plus qu'à regarder tout ça !

PS: aurais tu une solution pour lire les sons à la suite?

ça va être du genre : 
if (audio1.ended) audio2.play();
?
Modifié par enius76 (18 Jul 2014 - 16:23)
Modérateur
Bonjour,

J'ai modifié le jsFiddle qui enchaine désormais 2 textes à la suite : http://jsfiddle.net/rL9ze/

A adapter selon les besoins.

EDIT : le code récupère aussi désormais la durée des audios automatiquement.

Amicalement,
Modifié par parsimonhi (19 Jul 2014 - 10:08)
Désolé je n'ai pas eu le temps de répondre ce week end,

En tout cas merci pour tout parsimonhi ça m'aide beaucoup Smiley cligne

amicalement;
Sujet clos
Aller à