PubliHub :: Source Code Viewer

_{Opgelet: Bij PHP-pagina's of serverpagina's wordt enkel de gerenderde html getoond.}

Broncode van https://cdn.publihub.media/demos/app/speak.html

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Custom Element Voice Synthesizer</title>
  <script src="https://cdn.publihub.media/lib/app.js?v3"></script>
  <link rel="stylesheet" href="https://cdn.publihub.media/css/app.css">
  <script src="https://cdn.publihub.media/lib/crowl.speak.js?v2"></script>
</head>
<body data-theme="ios">

  <input-text value="Hallo mensen" id="eentekst" large></input-text>
  <input-range value="1" id="snelheid" min="0.1" max="2" step="0.1"></input-range>

  <!-- Gebruik van het custom element -->
  <app-speak language="nl-BE" id="stem" text="Bowie! Vang de muis" speed="1" gender="male"></app-speak>

  <!-- Voorbeeld van het dynamisch aanpassen van attributen -->
  <button id="changeText">Verander tekst</button>
  <button id="startTalking">Start Praten</button>
  <button id="pauseTalking">Pauzeer</button>
  <button id="stopTalking">Stop</button>

  <select id="gender">
    <option value="male">Mannelijk</option>
    <option value="female">Vrouwelijk</option>
  </select>

  <select id="language">
    <option value="nl-BE">Vlaams</option>
    <option value="nl-NL">Nederlands</option>
    <option value="fr-FR">Frans</option>
  </select>

  <app-part id="voorlezen">Deze tekst wil ik laten voorlezen.</app-part>
  <button id="nieuwetekst">Voorlezen</button>

  <script>
    

    app.ready(function(){
        
        id("stem").after("ready").do(function(){
            id("stem").after("starttalking").send({});
        });

        id("nieuwetekst").after("click").do(function(){
            var voorleestekst = id("voorlezen").innerText;
            id("stem").changeFeature("text", voorleestekst);
            id("stem").after("starttalking").send({});
        });

        id("gender").after("change").do(function(){
            var geslacht = this.value;
            id("stem").changeFeature("gender", geslacht);
        });
        id("language").after("change").do(function(){
            var geslacht = this.value;
            id("stem").changeFeature("language", geslacht);
        });
        
        id("startTalking").after("click").do(function(){
            id("stem").after("starttalking").send({});
        });

        id("pauseTalking").after("click").do(function(){
            id("stem").after("pausetalking").send({});
        });

        id("stopTalking").after("click").do(function(){
            id("stem").after("stoptalking").send({});
        });

        id("changeText").after("click").do(function(){
            var t = id("eentekst").value;
            id("stem").changeFeature("text", t);
        });
        
        id("eentekst").after("paste").do(function(){
            var t = id("eentekst").value;
            console.log(t);
        });


        id("snelheid").after("change").do(function(){
            var s = id("snelheid").value;
            id("stem").changeFeature("speed", s);
        });
    });

    
    
  </script>

  <style>
    
  </style>

</body>
</html>