Web 2.0
Multimédia
Internet
Programmation...

<


Raphael Lecerf

Développeur Multimédia à l'Université de LIlle
 

Ajouter une lecture automatique des paragraphes ou de balises spécifiques avec Text-To-Speech en JQuery


29 mai 2018 LABO & TESTS, OUTIL, LEARNING


 Ajouter une lecture automatique des paragraphes ou de balises spécifiques avec Text-To-Speech en JQuery

 

Envie de rajouter de l'interactivité à votre site ou à votre module de langue en permettant la lecture automatique des div ou des balises ALT d'images, grace à l'utilisation de librairies Javascript et JQuery - Voir la démo en fonctionnement

La librairie est basée sur le système Google Text To Speech

Text to Speech

Voici le code en détail :

 //Les librairies

<script class="jsbin" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src='responsivevoice.js'></script>

 <script>
        // script pour faire fonctionner responsivevoice
    var filterblur = document.getElementById("filterblur");
    var maxradius = 40;
    var rdelta = 12;
    var radius = maxradius/2;
    function update() {
        requestAnimationFrame(update);
        if (typeof responsiveVoice !== 'undefined' && responsiveVoice.isPlaying()) {
            radius += (Math.random() * rdelta) - rdelta/2;
            if (radius>maxradius) radius = maxradius/2;
            if (radius<0) radius = maxradius/2;
            if (document.getElementById("filterblur")) document.getElementById("filterblur").setAttribute("stdDeviation",radius);
        } else {
            if (document.getElementById("filterblur")) document.getElementById("filterblur").setAttribute("stdDeviation",0);
        }
    }
    update();
    </script>
    <script>
        // script pour la sélection de texte
function getSelected() {
    if(window.getSelection){
        return window.getSelection();
 
    } else if(document.getSelection){
        return document.getSelection();
 
    } else {
        var selection = document.selection && document.selection.createRange();
 
        if(selection.text) {
            return selection.text;
        }
        return false;
    }
 
    return false;
}
    </script>

<script>
/// on récupére le contenu de la selection et choix de langue
function lire() {
    var test = getSelected();
      if(test != false){
     responsiveVoice.speak( "" + test + "" ,"French Female");
        
      }
        
        }
/// fonction pour lancer la lecture du paragraphe complet cad la DIV
function lireparagraphe() {
         responsiveVoice.speak( $('#paragraphe').text()  ,"French Female");

        }    
    
    </script>

<script>
 ///requete pour récupérer les balises ALT
$(function() {
  $('a').click(function() {
       responsiveVoice.speak( $('img', this).attr('alt')  ,"French Female");
       return false;
  });
});
</script>

 

 Ajouter une lecture automatique des paragraphes ou de balises spécifiques avec Text-To-Speech en JQuery

 

Sélectionner un bout de texte et cliquer sur une touche

Napoléon Ier, né le 15 août 1769 à Ajaccio, et mort le 5 mai 1821 sur l'île Sainte-Hélène, est le premier empereur des Français, du 18 mai 1804 au 6 avril 1814 et du 20 mars 1815 au 22 juin 1815. Second enfant de Charles Bonaparte et Letizia Ramolino, Napoléon Bonaparte est un militaire, général dans les armées de la Première République française, née de la Révolution, commandant en chef de l'armée d'Italie puis de l'armée d'Orient. Parvenu au pouvoir en 1799, par le coup d'État du 18 Brumaire, il est Premier consul jusqu'au 2 août 1802, puis consul à vie jusqu'au 18 mai 1804, date à laquelle il est proclamé empereur par un sénatus-consulte suivi d'un plébiscite. Il est sacré empereur, en la cathédrale Notre-Dame de Paris, le 2 décembre 1804, par le pape Pie VII. En tant que général en chef et chef d'État, Napoléon tente de briser les coalitions montées et financées par le royaume de Grande-Bretagne et qui rassemblent, depuis 1792, les monarchies européennes contre la France et son régime né de la Révolution. Il conduit pour cela les armées françaises d'Italie au Nil et d'Autriche à la Prusse et à la Pologne : ses nombreuses et brillantes victoires (Arcole, Rivoli, Pyramides, Marengo, Austerlitz, Iéna, Friedland), dans des campagnes militaires rapides, disloquent les quatre premières coalitions. Les paix successives, qui mettent un terme à chacune de ces coalitions, renforcent la France et donnent à son chef, Napoléon, un degré de puissance jusqu'alors rarement égalé en Europe, lors de la paix de Tilsit (1807). Il réorganise et réforme durablement l'État et la société. Il porte le territoire français à son extension maximale avec 134 départements en 1812, transformant Rome, Hambourg, Barcelone ou Amsterdam en chefs-lieux de départements français. Il est aussi président de la République italienne de 1802 à 1805, puis roi d’Italie de 1805 à 1814, mais également médiateur de la Confédération suisse de 1803 à 1813 et protecteur de la Confédération du Rhin de 1806 à 1813. Ses victoires lui permettent d'annexer à la France de vastes territoires et de gouverner la majeure partie de l’Europe continentale en plaçant les membres de sa famille sur les trônes de plusieurs royaumes : Joseph sur celui de Naples puis d'Espagne, Louis sur celui de Hollande, Jérôme sur celui de Westphalie et son beau-frère Joachim Murat à Naples. Il crée également un duché de Varsovie, sans oser restaurer formellement l'indépendance polonaise, et soumet temporairement à son influence des puissances vaincues telles que le royaume de Prusse et l'empire d'Autriche.

Cliquer sur les images pour lire la balise ALT

Portrait en pied de Pauline Bonaparte, peint par Marie-Guillemine Benoist en 1808 Bonaparte franchissant le Grand-Saint-Bernard, par Jacques Louis David - Château de Malmaison


Recherche

Statistiques

  • 34 articles
  • aucun commentaire
  • PluXml 5.3.1