<commit_before><!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>speech-synthesis</title>
  <link href='http://fonts.googleapis.com/css?family=Titillium+Web:200,300' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
  <link rel="icon" type="image/png" href="img/logo.png">
  <style>

    [ng-cloak] { display: none; }
    html, body { 
      font-family: 'Titillium Web', sans-serif; 
      padding: 0;
      margin: 0;
      text-align: center;
      height: 100%;
    }

    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    header, footer {
      background: rgb(229,42,58);
      padding: 10px 0;
    }

    footer {
      position: absolute;
      bottom: 0;
      width: 100%;
    }

    .div {
      position: relative;
      padding-bottom: 150px;
    }

    a {
      color: white;
      text-decoration: none;
    }

    a:hover, a:focus {
      text-decoration: underline;
    }

    .text-center {
      text-align: center;
    }

    .text-left {
      text-align: left;
    }

    .title {
      color: white;
      font-weight: 100;
    }

    .subtitle {
      padding: 0 10px;
    }

    .body {
      margin: 0 auto;
      width: 100%;
      max-width: 600px;
      min-height: 600px;
      padding: 10px;
    }

    .ribbon-wrapper {
      width: 85px;
      height: 88px;
      overflow: hidden;
      position: absolute;
      top: -3px;
      right: -3px;
    }

    .ribbon {
      font: bold 15px Sans-Serif;
      color: #333;
      text-align: center;
      text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
      -webkit-transform: rotate(45deg);
      -moz-transform:    rotate(45deg);
      -ms-transform:     rotate(45deg);
      -o-transform:      rotate(45deg);
      position: relative;
      padding: 7px 0;
      left: -5px;
      top: 15px;
      width: 120px;
      background-color: rgb(229,42,58);
      color: white;
    }

    .love {
      display: inline-block;
      position: relative;
      top: .2em;
      font-size: 1.2em;
      color: white;
      -webkit-transform: scale(.9);
      -moz-transform: scale(.9);
      transform: scale(.9);
      -webkit-animation: love .5s infinite linear alternate-reverse;
      -moz-animation: love .5s infinite linear alternate-reverse;
      animation: love .5s infinite linear alternate-reverse;
    }

    @-webkit-keyframes love {
      to {-webkit-transform: scale(1.2);}
    }
    @-moz-keyframes love {
      to {-moz-transform: scale(1.2);}
    }
    @keyframes love {
      to {transform: scale(1.2);}
    }

    .code {
      padding: 2px 10px;
      background-color: rgb(29,31,33);
      color: rgb(175,186,183);
      font-family: 'Droid Sans Mono', 'Titillium Web', sans-serif;
      font-size: 14px;
    }

    .code-prompt {
      font-weight: bold;
    }

    .code-vial {
      color: rgb(108,143,167);
    }

    .code-yellow {
      color: rgb(230,151,70);
    }

    .textarea {
      width: 100%;
      height: 100px;
      resize: vertical; 
      font-family: 'Droid Sans Mono', 'Titillium Web', sans-serif;
      font-size: 28px;
      line-height: 40px;
    }

    .range {
      width: 100%;
    }

    </style>
</head>
<body class="container" ng-app="adaptiveApp">

  <div ng-controller="AdaptiveCtrl" class="div">

  <header>
    <h1 class="text-center title">speech-synthesis</h1>
    <p class="text-center title"><i>Speech Synthesis polyfill</i></p>

    <a href="https://github.com/janantala/speech-synthesis"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>

    <p class="code">
      <span class="code-prompt code-vial">❯</span> bower install <span class="code-yellow">speech-synthesis</span>
    </p>

    <p>
      <iframe src="http://ghbtns.com/github-btn.html?user=janantala&repo=speech-synthesis&type=watch&count=true"
    allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

      <iframe src="http://ghbtns.com/github-btn.html?user=janantala&repo=speech-synthesis&type=fork"
    allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>

      <iframe src="http://ghbtns.com/github-btn.html?user=janantala&type=follow"
      allowtransparency="true" frameborder="0" scrolling="0" width="132" height="20"></iframe>
    </p>
  </header>

  <div class="body">

    <h3>Load dependecies:</h3>

    <p class="code code-html">
      <span>&lt;script src="bower_components/speech-synthesis/polyfill.min.js"&gt;&lt;/script&gt;</span>
    </p>

    <h3>Usage:</h3>

    <p class="code code-html text-left">
      <span class="">var u = new SpeechSynthesisUtterance('Hello World');</span><br>
      <span class="">u.lang = 'en-US';</span><br>
      <span class="">u.volume = 1.0;</span><br>
      <span class="">u.rate = 1.0;</span><br>
      <span class="">speechSynthesis.speak(u);</span><br>
    </p>

    <p>
      
    </p>
    <p>
      <form ng-submit="speak(text, lang, volume, rate)">
        <label for="text">Text:</label>
        <textarea type="text" id="text" class="textarea" ng-model="text" placeholder="YOUR TEXT TO SPEECH"></textarea>

        <p>
          <label for="lang">Lang:</label>
          <input type="text" ng-model="lang" id="lang">
        </p>

        <p>
          <label for="volume">Volume: {{volume}}</label>
          <input type="range" id="volume" class="range" ng-model="volume" min="0" max="1" step="0.1"/>
        </p>

        <p>
          <label for="rate">Rate: {{rate}}</label>
          <input type="range" id="rate" class="range" ng-model="rate" min="0.1" max="10" step="0.1"/>
        </p>

        <button type="submit" >Speek</button>
      </form>
    </p>

    <p>
      <button ng-click="pause()">Pause</button>
      <button ng-click="resume()">Resume</button>
      <button ng-click="cancel()">Cancel queue</button>
    </p>

  </div>

  <footer>
    <p class="text-center">Made with <span class="love">♥</span> by <a href="http://janantala.com"><NAME></a></p>
    <p class="text-center">2014 Licensed under <a href="http://opensource.org/licenses/MIT">MIT</a></p>
  </footer>`

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="text/javascript" src="src/polyfill.js"></script>

<script type="text/javascript">


angular.module('adaptiveApp', []).

controller('AdaptiveCtrl', function ($scope) {
  $scope.text = 'YOUR TEXT TO SPEECH';
  $scope.lang = 'en-US';
  $scope.volume = 1.0; // 0 to 1
  $scope.rate = 1.0; // 0.1 to 10

  $scope.speak = function(text, lang, volume, rate){

    var u = new SpeechSynthesisUtterance(text) || new SpeechSynthesisUtterancePolyfill(text);
    u.lang = lang;
    u.volume = volume;
    u.rate = rate;
    u.onend = function(event) { console.log('Finished in ' + event.elapsedTime + ' seconds.'); };
    u.onpause = function(event) { console.log('Paused in ' + event.elapsedTime + ' seconds.'); };
    u.onresume = function(event) { console.log('Resumed in ' + event.elapsedTime + ' seconds.'); };
    var ss = speechSynthesis || speechSynthesisPolyfill;
    ss.speak(u);

  };

  $scope.pause = function(){
    var ss = speechSynthesis || speechSynthesisPolyfill;
    ss.pause();
  };

  $scope.resume = function(){
    var ss = speechSynthesis || speechSynthesisPolyfill;
    ss.resume();
  };

  $scope.cancel = function(){
    var ss = speechSynthesis || speechSynthesisPolyfill;
    ss.cancel();
  };<commit_msg>chore(demo): update to new polyfill names<commit_after><!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>speech-synthesis</title>
  <link href='http://fonts.googleapis.com/css?family=Titillium+Web:200,300' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
  <link rel="icon" type="image/png" href="img/logo.png">
  <style>

    [ng-cloak] { display: none; }
    html, body { 
      font-family: 'Titillium Web', sans-serif; 
      padding: 0;
      margin: 0;
      text-align: center;
      height: 100%;
    }

    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    header, footer {
      background: rgb(229,42,58);
      padding: 10px 0;
    }

    footer {
      position: absolute;
      bottom: 0;
      width: 100%;
    }

    .div {
      position: relative;
      padding-bottom: 150px;
    }

    a {
      color: white;
      text-decoration: none;
    }

    a:hover, a:focus {
      text-decoration: underline;
    }

    .text-center {
      text-align: center;
    }

    .text-left {
      text-align: left;
    }

    .title {
      color: white;
      font-weight: 100;
    }

    .subtitle {
      padding: 0 10px;
    }

    .body {
      margin: 0 auto;
      width: 100%;
      max-width: 1000px;
      min-height: 600px;
      padding: 10px;
    }

    .ribbon-wrapper {
      width: 85px;
      height: 88px;
      overflow: hidden;
      position: absolute;
      top: -3px;
      right: -3px;
    }

    .ribbon {
      font: bold 15px Sans-Serif;
      color: #333;
      text-align: center;
      text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
      -webkit-transform: rotate(45deg);
      -moz-transform:    rotate(45deg);
      -ms-transform:     rotate(45deg);
      -o-transform:      rotate(45deg);
      position: relative;
      padding: 7px 0;
      left: -5px;
      top: 15px;
      width: 120px;
      background-color: rgb(229,42,58);
      color: white;
    }

    .love {
      display: inline-block;
      position: relative;
      top: .2em;
      font-size: 1.2em;
      color: white;
      -webkit-transform: scale(.9);
      -moz-transform: scale(.9);
      transform: scale(.9);
      -webkit-animation: love .5s infinite linear alternate-reverse;
      -moz-animation: love .5s infinite linear alternate-reverse;
      animation: love .5s infinite linear alternate-reverse;
    }

    @-webkit-keyframes love {
      to {-webkit-transform: scale(1.2);}
    }
    @-moz-keyframes love {
      to {-moz-transform: scale(1.2);}
    }
    @keyframes love {
      to {transform: scale(1.2);}
    }

    .code {
      padding: 2px 10px;
      background-color: rgb(29,31,33);
      color: rgb(175,186,183);
      font-family: 'Droid Sans Mono', 'Titillium Web', sans-serif;
      font-size: 14px;
    }

    .code-prompt {
      font-weight: bold;
    }

    .code-vial {
      color: rgb(108,143,167);
    }

    .code-yellow {
      color: rgb(230,151,70);
    }

    .textarea {
      width: 100%;
      height: 100px;
      resize: vertical; 
      font-family: 'Droid Sans Mono', 'Titillium Web', sans-serif;
      font-size: 28px;
      line-height: 40px;
    }

    .range {
      width: 100%;
    }

    </style>
</head>
<body class="container" ng-app="adaptiveApp">

  <div ng-controller="AdaptiveCtrl" class="div">

  <header>
    <h1 class="text-center title">speech-synthesis</h1>
    <p class="text-center title"><i>Speech Synthesis polyfill</i></p>

    <a href="https://github.com/janantala/speech-synthesis"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>

    <p class="code">
      <span class="code-prompt code-vial">❯</span> bower install <span class="code-yellow">speech-synthesis</span>
    </p>

    <p>
      <iframe src="http://ghbtns.com/github-btn.html?user=janantala&repo=speech-synthesis&type=watch&count=true"
    allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

      <iframe src="http://ghbtns.com/github-btn.html?user=janantala&repo=speech-synthesis&type=fork"
    allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>

      <iframe src="http://ghbtns.com/github-btn.html?user=janantala&type=follow"
      allowtransparency="true" frameborder="0" scrolling="0" width="132" height="20"></iframe>
    </p>
  </header>

  <div class="body">

    <h3>Load dependecies:</h3>

    <p class="code code-html">
      <span>&lt;script src="bower_components/speech-synthesis/polyfill.min.js"&gt;&lt;/script&gt;</span>
    </p>

    <h3>Usage:</h3>

    <p class="code code-html text-left">
      <span class="code-yellow">// Initialize polyfill</span><br>
      <span class="">var fallbackSpeechSynthesis = window.speechSynthesis || window.speechSynthesisPolyfill;</span><br>
      <span class="">var fallbackSpeechSynthesisUtterance = window.SpeechSynthesisUtterance || window.SpeechSynthesisUtterancePolyfill;</span><br>
      <br>

      <span class="">var u = new fallbackSpeechSynthesisUtterance('Hello World');</span><br>
      <span class="">u.lang = 'en-US';</span><br>
      <span class="">u.volume = 1.0;</span><br>
      <span class="">u.rate = 1.0;</span><br>
      <span class="">u.onend = function(event) { console.log('Finished in ' + event.elapsedTime + ' seconds.'); };</span><br>
      <span class="">fallbackSpeechSynthesis.speak(u);</span><br>
    </p>

    <p>
      
    </p>
    <p>
      <form ng-submit="speak(text, lang, volume, rate)">
        <label for="text">Text:</label>
        <textarea type="text" id="text" class="textarea" ng-model="text" placeholder="YOUR TEXT TO SPEECH"></textarea>

        <p>
          <label for="lang">Lang:</label>
          <input type="text" ng-model="lang" id="lang">
        </p>

        <p>
          <label for="volume">Volume: {{volume}}</label>
          <input type="range" id="volume" class="range" ng-model="volume" min="0" max="1" step="0.1"/>
        </p>

        <p>
          <label for="rate">Rate: {{rate}}</label>
          <input type="range" id="rate" class="range" ng-model="rate" min="0.1" max="10" step="0.1"/>
        </p>

        <button type="submit" >Speek</button>
      </form>
    </p>

    <p>
      <button ng-click="pause()">Pause</button>
      <button ng-click="resume()">Resume</button>
      <button ng-click="cancel()">Cancel queue</button>
    </p>

  </div>

  <footer>
    <p class="text-center">Made with <span class="love">♥</span> by <a href="http://janantala.com"><NAME></a></p>
    <p class="text-center">2014 Licensed under <a href="http://opensource.org/licenses/MIT">MIT</a></p>
  </footer>`

</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="text/javascript" src="src/polyfill.js"></script>

<script type="text/javascript">

// Initialize polyfill
var fallbackSpeechSynthesis = window.speechSynthesis || window.speechSynthesisPolyfill;
var fallbackSpeechSynthesisUtterance = window.SpeechSynthesisUtterance || window.SpeechSynthesisUtterancePolyfill;

angular.module('adaptiveApp', []).

controller('AdaptiveCtrl', function ($scope) {
  $scope.text = 'YOUR TEXT TO SPEECH';
  $scope.lang = 'en-US';
  $scope.volume = 1.0; // 0 to 1
  $scope.rate = 1.0; // 0.1 to 10

  $scope.speak = function(text, lang, volume, rate){

    var u = new fallbackSpeechSynthesisUtterance(text);
    u.lang = lang;
    u.volume = volume;
    u.rate = rate;
    u.onend = function(event) { console.log('Finished in ' + event.elapsedTime + ' seconds.'); };
    u.onpause = function(event) { console.log('Paused in ' + event.elapsedTime + ' seconds.'); };
    u.onresume = function(event) { console.log('Resumed in ' + event.elapsedTime + ' seconds.'); };
    fallbackSpeechSynthesis.speak(u);

  };

  $scope.pause = function(){
    fallbackSpeechSynthesis.pause();
  };

  $scope.resume = function(){
    fallbackSpeechSynthesis.resume();
  };

  $scope.cancel = function(){
    fallbackSpeechSynthesis.cancel();
  };
{'fraction_non_alphanumeric': 0.17664855519881453, 'fraction_numerical': 0.02772289454186219, 'mean_word_length': 2.7641180571694166, 'pattern_counts': {'":': 0, '<': 260, '<?xml version=': 0, '>': 260, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2695376', 'n_tokens_mistral': 6163, 'n_tokens_neox': 5561, 'n_words': 1074}