<style>
 {
  padding: 0px;
  margin: 0px;
  background-color: #ddd;
  text-align: center;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}
 
.sprech {
  font-family: Verdana;
  color: black;
  position: relative;
  width: 421px;
  height: 350px;
  text-align: center;
  line-height: 22px;
  background-color: white;
  border: 4px solid #777;
  border-radius: 70px;
  box-shadow: inset 0 0 14px #3ee0f5;
  margin: 55px auto;
  z-index: 1000;
  word-break: break-all;
  padding: 20px 10px 30px 50px;
  vertical-align: middle;
  max-width:35%;
}
 
.corntent {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 10000;
  box-sizing: border-box;
  pointer-events: none;
  border-radius: 36px;
  overflow: hidden;
}
 
.corntent:after,
.corntent:before {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 10000;
  box-sizing: border-box;
  pointer-events: none;
  border-radius: 36px;
  overflow: hidden;
}
 
.corntent:before {
  background-image: repeating-linear-gradient( 0deg, rgba(0, 0, 0, .4), transparent 3px, rgba(0, 0, 0, .4) 1px, transparent 1px );
  animation: jinggle .5s linear infinite;
}
 
.corntent:after {
  background-image: repeating-linear-gradient( 25deg, rgba(0, 0, 0, .4) 1px, transparent 2px, rgba(0, 0, 0, .2) 1px, transparent 1px );
  animation: winggle .5s linear infinite;
}
 

@keyframes winggle {
  0% {
    margin-left: -1px;
  }
 
  50% {
    margin-left: 1px;
  }
 
  100% {
    margin-left: 0px;
  }
}
 
@keyframes jinggle {
  0% {
    margin-top: -1px;
  }
 
  50% {
    margin-top: 1px;
  }
 
  100% {
    margin-top: 0px;
  }
}
 
.sprech:after,
.sprech:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  top: 100%;
  z-index: 1001;
}
 
.sprech:after {
  left: 188px;
  border: 13px solid;
  border-color: rgba(0,0,0,1) transparent transparent rgba(0,0,0,1);
}
 
.sprech:before {
  left: 186px;
  border: 15px solid;
  border-color: #666 transparent transparent #666;
}
 
.txtLine {
  position: absolute;
  left: 6px;
  display: inline-block;
  width: 100%;
}
 
.txtLine div {
  position: absolute;
  left:8px;
  display: inline-block;
  max-width: 100%;
}
 
.showe {
  padding-right: 20px;
}
 
.showe div {
  right: 0px;
  height: 100%;
  width: 20px;
}
 
.showe div:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  animation: letters .2s linear infinite;
}
 

._hide {
  overflow: hidden;
  width: 5px;
  visibility: hidden;
}
</style>
 

<div class="sprech">
  <div class="corntent">
  </div><div class="txtLine">
  <div class="showe streetch"></div>
  <div class="hide">Möchtest Du mich reden hören, klicke mich bitte an.</div>
  </div>
</div>
 

 
 
 
<style>
.robot {
  box-sizing: border-box;
  position: relative;
  width: 160px;
  height: 180px;
  bottom: 0;
  left: calc(50% - 80px);
  margin:-26px; /* Für Portal-Box */ /* margin: 20px; */ /* Für Kopfleiste */
  cursor:pointer;
  z-index: 999998;
}
 
.head {
  position: absolute;
  width: 160px;
  height: 100px;
  background-color: #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
  transform-origin: 50% 100%;
  /* Kopf - Bewegen geändert 8000 / -1000 millisekunden  ist damit es links rechts bewegt */
  -webkit-animation: bob 8000ms ease-in-out alternate infinite -1000ms;
          animation: bob 8000ms ease-in-out alternate infinite -1000ms;
}
 
.eyes {
  position: absolute;
  top: calc(25% - 10px);
  right: 30px;
  left: 30px;
  height: 20px;
  /* Augen - Blinken geändert 2910 millisekunden  ist damit es öfters Blinzelt mit augen */
  -webkit-animation: blink 2910ms linear forwards infinite;
          animation: blink 2910ms linear forwards infinite;
}
 
.eyeball {
  position: absolute;
  width: 12px;
  height: 20px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  background-color: black;
}
 
.eyeball_left {
  left: 0;
  /* Augen - Blinken geändert 1000 millisekunden */
  transition: transform 1000ms ease-in-out;
}
 
.eyeball_right {
  right: 0;
  /* Augen - Blinken geändert 1000 millisekunden */
  transition: transform 1000ms ease-in-out;
}
 
.mouth {border:1px solid #aaaaaa;
  position: absolute;
  bottom: 5px;
  left: 5px;
  /* Mund - Höhe geändert 150 / 20  Pixel */
  width: 150px;
  height: 20px;
  background-color: black;
  overflow: hidden;
  border-radius: 5px;
  transition: height 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
 
.mouth-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
 
.robot_speaking .mouth {
  /* Mund - Höhe geändert 15 Pixel */
  height:15px;
}
.robot_speaking .mouth-container {
  /* Mund - Sprech geschwindigkeit auf 0,3 sekunden geändert  */
  -webkit-animation: speakingAnim 0.3s infinite;
          animation: speakingAnim 0.3s infinite;
}
 
.mouth-container-line {
  position: absolute;
  top: 50%;
  height: 2px;
  /* Mund- Strich Farbe geändert Lichtblau */
  background-color: lightblue;
  width: 100%;
  margin-top: -1px;
}
 
.torso {
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px);
  width: 80px;
  height: 60px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.neck {
  position: absolute;
  bottom: 45px;
  left: calc(50% - 15px);
  width: 30px;
  height: 50px;
  border-radius: 15px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.arms {
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 50px;
}
 
.arm {
  position: absolute;
  top: 0;
  width: 20px;
  height: 50px;
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #ccc 0%, #e6e6e6 40%, #e6e6e6 60%, #ccc 100%);
}
 
.arm_left {
  left: 0;
}
 
.arm_right {
  right: 0;
}
 
@-webkit-keyframes lowAnim {
  0% {
    filter: url("#low-0");
  }
  25% {
    filter: url("#low-1");
  }
  50% {
    filter: url("#low-2");
  }
  75% {
    filter: url("#low-3");
  }
  100% {
    filter: url("#low-4");
  }
}
 
@keyframes lowAnim {
  0% {
    filter: url("#low-0");
  }
  25% {
    filter: url("#low-1");
  }
  50% {
    filter: url("#low-2");
  }
  75% {
    filter: url("#low-3");
  }
  100% {
    filter: url("#low-4");
  }
}
 
@-webkit-keyframes listeningAnim {
  0% {
    filter: url("#listening-0");
  }
  25% {
    filter: url("#listening-1");
  }
  50% {
    filter: url("#listening-2");
  }
  75% {
    filter: url("#listening-3");
  }
  100% {
    filter: url("#listening-4");
  }
}
 
@keyframes listeningAnim {
  0% {
    filter: url("#listening-0");
  }
  25% {
    filter: url("#listening-1");
  }
  50% {
    filter: url("#listening-2");
  }
  75% {
    filter: url("#listening-3");
  }
  100% {
    filter: url("#listening-4");
  }
}
 
 
@-webkit-keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
 
@keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
 
@keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
</style>
 
<div class="robot" title="Ich möchte Dir etwas sagen!">
    <div class="neck"></div>
    <div class="arms">
        <div class="arm arm_left"></div>
        <div class="arm arm_right"></div>
    </div>
    <div class="torso"></div>
    <div class="head">
        <div class="eyes">
            <div class="eyeball eyeball_left"></div>
            <div class="eyeball eyeball_right"></div>
        </div>
        <div class="mouth">
            <div class="mouth-container">
                <div class="mouth-container-line"></div>
            </div>
          </div>
    </div>
</div>
&nbsp;
 
<!-- Folgende Zeile wird benötigt, wenn kein jQuery vorhanden ist --> 
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
<script>
window.addEventListener('load', function(){
  
function tellusSoething(){
  $(".robot_speaking .mouth").css("display", $(".robot_speaking .mouth").css("display") == "none" ? "block" : "none");
  setTimeout(function(){tellusSoething();}, 50);
}
tellusSoething();
 
const robot = document.querySelector('.robot');
const robotsp = document.querySelector('.mouth');
 
let message = new SpeechSynthesisUtterance();
 
message.text = `
Darf ich mich vorstellen, 
  
ich bin Hermine, 
  
Ihr neuer Forum-Roboter.
&nbsp;
Herzlich willkommen im Black - Angel´s - Club!
&nbsp;
Hier sind Sie im Forum bei Ankündigungen und Informationen. 
&nbsp;
Hier sind alle wichtigen Ankündigungen und Informationen rund um das Forum Black - Angel´s - Club!
&nbsp;
Danke! 
&nbsp;
Viel Spaß Euere Hermine.
`;
 
let voices = [];
 
message.onend = function (event) {
  robot.classList.remove('robot_speaking');
  robotsp.style.display = null;
};
 
robot.addEventListener('click', event => {
  if (speechSynthesis.speaking) {
    robot.classList.remove('robot_speaking');
    robotsp.style.display = null;
    speechSynthesis.cancel();
  } else {
    robot.classList.add('robot_speaking');
    speechSynthesis.speak(message); 
  }
});
&nbsp;
});
</script>
 
&nbsp;<!-- Hier beginnt das Flimmer Sprechblase  Javascript --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
<script id="rendered-js">
$(document).ready(function () {
  $(document).ready(function () {
 
    $.line(0, $('.txtLine').first());
 

    $(window).resize(function () {
      $('.txtLine').css({ 'margin-left': Math.ceil($('boody').outerWidth() / 2) });
    });
  });
 

  $.line = function (i, line) {
    $(line).delay(i * 1000).queue(function (n) {
      var shw = $(line).find('.showe');
      var hid = $(line).find('.hide');
      var txt = $(hid).text();
      if ($(shw).hasClass('streetch')) {
        $(shw).parents('.sprech').css({ 'height': 2 });
      }
      $(shw).prepend('<div></div>');
      for (var ii = 0; ii < txt.length; ii++) {if (window.CP.shouldStopExecution(0)) break;
 
        $.letter(ii, line, shw, hid, txt, i);
      }window.CP.exitedLoop(0);
 
      n();
 
    });
  };
 
  $.letter = function (ii, line, shw, hid, txt, i) {
    $(line).delay(20).queue(function (n) {
      var char = txt[ii];
      $(shw).html($(shw).html() + char);
      n();
 
      if ($(shw).hasClass('streetch')) {
 
        if ($(shw).outerWidth() > $(shw).parents('.sprech').outerWidth() - 5) {
          $(shw).parents('.sprech').css({ 'width': $(shw).parents('.sprech').outerWidth() + 1 });
        }
        if ($(shw).outerHeight() > $(shw).parents('.sprech').outerHeight() - 5) {
          console.log($(shw).parents('.sprech').outerHeight() + 5);
          $(shw).parents('.sprech').css({ 'height': $(shw).parents('.sprech').outerHeight() + 1 });
        } else
        {
 
        }
 
      } else {
        if ($(shw).outerHeight() > $(shw).parents('.sprech').outerHeight() - 5) {
          $(shw).parents('.sprech').css({ 'height': $(shw).parents('.sprech').outerHeight() + 1 });
        }
      }
 

      if (ii == txt.length - 1) {
 
        $(line).delay(5).queue(function (n) {
          $(shw).css({ 'border-bottom': '', 'box-shadow': '' });
          $(shw).find('div').remove();
          var incr = i++;
          $.line(incr, $(line).next());
          n();
        });
      }
    });
  };
});
//# sourceURL=pen.js
    </script>
 

<center><h2> Er funktioniert im Moment nur auf Microsoft Edge Browser mit dem Stimmenwechsel, wird aber noch daran gearbeitet, das er auf allen Browser funktioniert.</h2></center> 
 

<center><h1> Hier sehen Sie unsere neuen angepassten<br> <span style="color: rgb(255, 0, 0);">•</span> James <span style="color: rgb(255, 0, 0);">•</span></h1></center> <br><br>
 
<style>
.robot_div {
  display:inline-block;   
  margin:0 0 10px 10px;
  cursor:pointer;
  -webkit-box-shadow: 0 6px 4px -4px #aaaaaa;
  -moz-box-shadow: 0 6px 4px -4px aaaaaa;
  box-shadow: 0 6px 4px -4px aaaaaa;
}
 
.robot {  
  position: relative;
  bottom: 0;
  display:inline-block; 
  width: 160px;
  height: 180px;
  margin:20px 0 0 0;
}
 
.head {
  position: absolute;
  width: 160px;
  height: 100px;
  border-radius: 15px;
  overflow: hidden;
  background-color: #cccccc;
  background: linear-gradient(to right, #cccccc 0%, #f8f8f8 40%, #f8f8f8 60%, #cccccc 100%);
  transform-origin: 50% 100%;
  -webkit-animation: bob 8000ms ease-in-out alternate infinite -1000ms;
          animation: bob 8000ms ease-in-out alternate infinite -1000ms;
}
 
.eyes {
  position: absolute;
  top: calc(25% - 10px);
  right: 40px;
  left: 40px;
  height: 20px;
  -webkit-animation: blink 10000ms linear forwards infinite;
          animation: blink 10000ms linear forwards infinite;
}
.eyeball {
  position: absolute;
  width: 12px;
  height: 20px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  background-color: black;
}
.eyeball_left {
  left: 0;
  transition: transform 1000ms ease-in-out;
}
.eyeball_right {
  right: 0;
  transition: transform 1000ms ease-in-out;
}
 
.mouth {
  position: absolute;
  bottom: 10px;
  left: 15px; right:15px;
  margin:auto;
  width:auto;
  height: 20px; 
  background-color: black;
  overflow: hidden;
  border-radius: 5px;
}
.mouth-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mouth-container-line {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: #aaaaaa;
  width: 100%;
  margin-top: -1px;
}
.robot_speaking .mouth-container-line {
  background-color: lightblue;
}
 
.torso {
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px); 
  width: 80px;
  height: 60px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to right, #bbbbbb 0%, #f7f7f7 40%, #f7f7f7 60%, #bbbbbb 100%);
}
.torso .language {
   color:#383838;
   border-radius: 6px 6px 0 0;
   border-bottom:1px solid #c1c1c2;   
}
.torso .language:hover {
  background: #888888;
  color:#eeeeee;
}
 
.neck {
  position: absolute;
  bottom: 45px;
  left: calc(50% - 15px);
  width: 30px;
  height: 50px;
  border-radius: 15px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #cccccc 0%, #e6e6e6 40%, #e6e6e6 60%, #cccccc 100%);
}
 
.arms {
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 50px;
}
.arm {
  position: absolute;
  top: 0;
  width: 20px;
  height: 50px;
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #cccccc 0%, #e6e6e6 40%, #e6e6e6 60%, #cccccc 100%);
}
.arm_left {
  left: 0;
}
.arm_right {
  right: 0;
}
 
.bubble {
  position: relative;
  right:0%;
  left:0px;
  background: #ffffff;
  font-family: "arial", sans-serif;
  font-size: 13px;
  font-weight:bold;
  text-align: center;
  color: #383838;
  border:1px solid #999999;
  border-radius: 20px;
  padding: 5px 20px; 
  background: linear-gradient(180deg,#bbbbbb 0%, #f7f7f7 40%, #f7f7f7 60%, #bbbbbb 100%);
}
.bubble:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-right: 24px solid #888888;
  border-left: 5px solid transparent;
  border-top: 5px solid #888888;
  border-bottom: 20px solid transparent;
  right: 55%;
  bottom: -24px;
  top: 100%;
}
.bubble:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  right: 55.1%;
  top: 100%;
  border-right: 23px solid #cccccc;
  border-left: 4px solid transparent;
  border-top: 4px solid #cccccc;
  border-bottom: 19px solid transparent;
}
.robot_div:hover .bubble {
  background:#dddddd;
}
.robot_div:hover .bubble:before {
  border-right-color: #999999;
  border-top-color: #999999;
}
.robot_div:hover .bubble:after {
  border-right-color:  #dddddd;
  border-top-color: #dddddd;
}
  
@-webkit-keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
@keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
</style>
 
<center>
<div class="James_1 robot_div">
  <!-- Sprechblase -->
  <br><div class="bubble">Ich kann sprechen! <br>Klicken Sie mich einfach an!</div><br>
  
  <div class="robot">
    <div class="neck"></div>
    <div class="arms">
        <div class="arm arm_left"></div>
        <div class="arm arm_right"></div>
    </div>
    <div class="torso"><div class="language" title="Hallo, ich kann auch English sprechen!">GB</div><FONT COLOR="#BDBDBD">&#9788;<br>James</FONT></div>
    <div class="head">
        <div class="eyes">
            <div class="eyeball eyeball_left"></div>
            <div class="eyeball eyeball_right"></div>
        </div>
        <div class="mouth">
            <div class="mouth-container">
                <div class="mouth-container-line"></div>
            </div>
        </div>
    </div>
  </div>
</div> 
</center>
 
<!-- Wird benötigt, wenn kein jQuery vorhanden ist --> 
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->
<script>
window.addEventListener('load', function(){
 
function tellusSoething(){
  $(".robot_speaking .mouth").css("display", $(".robot_speaking .mouth").css("display") == "none" ? "block" : "none");
  setTimeout(function(){tellusSoething();}, 115);
}
tellusSoething();
  
/* #### Stimme und Fremdsprachen #### */
const Stimme = '2';  // 0=Hedda DE - Default, 1=Katja DE, 3=Stefan DE, 138=Ingrid DE Österreich 139=Jonas DE Österreich, 144=Jan DE Schweiz, 145=Leni DE Schweiz
const Fremdsprache = '116';  // 107=Sonja EN, 116= EN // 130=Eloise FR, 131=Henry FR // 162=Diego IT, 164=Isabella IT // 260=Alvaro SP, 261=Elvira SP
 
const robot1 = document.querySelector('.robot_div');
const robotsp = document.querySelector('.mouth');
 
let message1 = new SpeechSynthesisUtterance();
 let message2 = new SpeechSynthesisUtterance();
/* #### Text für James 1 - Anfang #### */
// Absätze ergeben eine kleine Pause beim Vorlesen! 
// Symbole und Auskommentierungszeichen werden auf mobilen Endgeräten auch vorgelesen!
 
message1.text = `
 
Darf ich mich vorstellen, 
  
ich bin James, 
  
Ihr neuer Forum-Roboter.
 
Herzlich willkommen im Black - Angel´s - Club!
 
Hier sind Sie im Forum bei Ankündigungen und Informationen. 
 
Hier sind alle wichtigen Ankündigungen und Informationen rund um das Forum Black - Angel´s - Club!
 
Danke! 
 
Viel Spaß Euer 
 
James.
 
 May I introduce myself, 
  
 I'm James 
  
 Your new forum robot.
 
 Welcome to the Black - Angel's - Club!
 
 Here you are in the forum for announcements and information. 
 
 Here are all the important announcements and information about the Forum Black - Angel's - Club!
 
 Thanks! 
 
 Have fun you 
 
 James
`;
/* #### Text für James 1 - Ende #### */
 message1.text = `I'm James 
  
 Your new forum robot.
 
 Welcome to the Black - Angel's - Club!
 
 Here you are in the forum for announcements and information. 
 
 Here are all the important announcements and information about the Forum Black - Angel's - Club!
 
 Thanks! 
 
 Have fun you 
 
 James
`;
let voices = [];
 
speechSynthesis.cancel(); 
speechSynthesis.addEventListener('voiceschanged', event => {
  voices = speechSynthesis.getVoices();
  message1.voice = voices[Stimme]; 
  
  let linkstate = 0;
  $('.torso .language').on("click",function(){
    if(linkstate == 0){ 
      linkstate = 1;
      $(this).attr('style','background: linear-gradient(to right, #888888 0%, #cccccc 40%, #cccccc 60%, #888888 100%); color:#222222;');
      message1.voice = voices[Fremdsprache];
    } else{
      linkstate = 0;
      $(this).css({'background': '','color':''});
      message1.voice = voices[Stimme];
      speechSynthesis.speak(message2);
    } 
  });
 
});
 
message1.onend = function (event) {
  robot1.classList.remove('robot_speaking');
  robotsp.style.display = null;
};
 
robot1.addEventListener('click', event => {
  if (speechSynthesis.speaking) {
    robot1.classList.remove('robot_speaking');
    robotsp.style.display = null;
    speechSynthesis.cancel();
  } else {
    robot1.classList.add('robot_speaking');
    speechSynthesis.speak(message1);
  }
});
 
});
</script>
 

<center><h2> Er funktioniert im Moment nur auf Microsoft Edge Browser mit dem wechseln der Stimme.</h2></center> 
 

<center><h1> Hier sehen Sie unsere neuen Prototyp<br> <span style="color: rgb(255, 0, 0);">•</span> James <span style="color: rgb(255, 0, 0);">•</span></h1></center> <br><br>
 
<style>
.robot_div {
  display:inline-block;   
  margin:0 0 10px 10px;
  cursor:pointer;
  -webkit-box-shadow: 0 6px 4px -4px #aaaaaa;
  -moz-box-shadow: 0 6px 4px -4px aaaaaa;
  box-shadow: 0 6px 4px -4px aaaaaa;
}
 
.robot {  
  position: relative;
  bottom: 0;
  display:inline-block; 
  width: 160px;
  height: 180px;
  margin:20px 0 0 0;
}
 
.head {
  position: absolute;
  width: 160px;
  height: 100px;
  border-radius: 15px;
  overflow: hidden;
  background-color: #cccccc;
  background: linear-gradient(to right, #cccccc 0%, #f8f8f8 40%, #f8f8f8 60%, #cccccc 100%);
  transform-origin: 50% 100%;
  -webkit-animation: bob 8000ms ease-in-out alternate infinite -1000ms;
          animation: bob 8000ms ease-in-out alternate infinite -1000ms;
}
 
.eyes {
  position: absolute;
  top: calc(25% - 10px);
  right: 40px;
  left: 40px;
  height: 20px;
  -webkit-animation: blink 10000ms linear forwards infinite;
          animation: blink 10000ms linear forwards infinite;
}
.eyeball {
  position: absolute;
  width: 12px;
  height: 20px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
  background-color: black;
}
.eyeball_left {
  left: 0;
  transition: transform 1000ms ease-in-out;
}
.eyeball_right {
  right: 0;
  transition: transform 1000ms ease-in-out;
}
 
.mouth {
  position: absolute;
  bottom: 10px;
  left: 15px; right:15px;
  margin:auto;
  width:auto;
  height: 20px; 
  background-color: black;
  overflow: hidden;
  border-radius: 5px;
}
.mouth-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mouth-container-line {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: #aaaaaa;
  width: 100%;
  margin-top: -1px;
}
.robot_speaking .mouth-container-line {
  background-color: lightblue;
}
 
.torso {
  position: absolute;
  bottom: 0;
  left: calc(50% - 40px); 
  width: 80px;
  height: 60px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to right, #bbbbbb 0%, #f7f7f7 40%, #f7f7f7 60%, #bbbbbb 100%);
}
.torso .language {
   color:#383838;
   border-radius: 6px 6px 0 0;
   border-bottom:1px solid #c1c1c2;   
}
.torso .language:hover {
  background: #888888;
  color:#eeeeee;
}
 
.neck {
  position: absolute;
  bottom: 45px;
  left: calc(50% - 15px);
  width: 30px;
  height: 50px;
  border-radius: 15px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #cccccc 0%, #e6e6e6 40%, #e6e6e6 60%, #cccccc 100%);
}
 
.arms {
  position: absolute;
  bottom: 0;
  left: 30px;
  right: 30px;
  height: 50px;
}
.arm {
  position: absolute;
  top: 0;
  width: 20px;
  height: 50px;
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 7%, #646464 10%), linear-gradient(to right, #cccccc 0%, #e6e6e6 40%, #e6e6e6 60%, #cccccc 100%);
}
.arm_left {
  left: 0;
}
.arm_right {
  right: 0;
}
 
.bubble {
  position: relative;
  right:0%;
  left:0px;
  background: #ffffff;
  font-family: "arial", sans-serif;
  font-size: 13px;
  font-weight:bold;
  text-align: center;
  color: #383838;
  border:1px solid #999999;
  border-radius: 20px;
  padding: 5px 20px; 
  background: linear-gradient(180deg,#bbbbbb 0%, #f7f7f7 40%, #f7f7f7 60%, #bbbbbb 100%);
}
.bubble:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-right: 24px solid #888888;
  border-left: 5px solid transparent;
  border-top: 5px solid #888888;
  border-bottom: 20px solid transparent;
  right: 55%;
  bottom: -24px;
  top: 100%;
}
.bubble:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  right: 55.1%;
  top: 100%;
  border-right: 23px solid #cccccc;
  border-left: 4px solid transparent;
  border-top: 4px solid #cccccc;
  border-bottom: 19px solid transparent;
}
.robot_div:hover .bubble {
  background:#dddddd;
}
.robot_div:hover .bubble:before {
  border-right-color: #999999;
  border-top-color: #999999;
}
.robot_div:hover .bubble:after {
  border-right-color:  #dddddd;
  border-top-color: #dddddd;
}
  
@-webkit-keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@keyframes bob {
  0% {
    transform: rotate(-3deg);
  }
  40% {
    transform: rotate(-3deg);
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
            animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  60% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
@keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
</style>
 
<center>
<div class="James_1 robot_div">
  <!-- Sprechblase -->
  <br><div class="bubble">Ich kann sprechen! <br>Klicken Sie mich einfach an!</div><br>
  
  <div class="robot">
    <div class="neck"></div>
    <div class="arms">
        <div class="arm arm_left"></div>
        <div class="arm arm_right"></div>
    </div>
    <div class="torso"><div class="language" title="Hallo, ich kann auch English sprechen!">GB</div><FONT COLOR="#BDBDBD">&#9788;<br>James</FONT></div>
    <div class="head">
        <div class="eyes">
            <div class="eyeball eyeball_left"></div>
            <div class="eyeball eyeball_right"></div>
        </div>
        <div class="mouth">
            <div class="mouth-container">
                <div class="mouth-container-line"></div>
            </div>
        </div>
    </div>
  </div>
</div> 
</center>
 
<!-- Wird benötigt, wenn kein jQuery vorhanden ist --> 
<!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->
<script>
window.addEventListener('load', function(){
 
function tellusSoething(){
  $(".robot_speaking .mouth").css("display", $(".robot_speaking .mouth").css("display") == "none" ? "block" : "none");
  setTimeout(function(){tellusSoething();}, 115);
}
tellusSoething();
  
/* #### Stimme und Fremdsprachen #### */
const Stimme = '2';  // 0=Hedda DE - Default, 1=Katja DE, 3=Stefan DE, 138=Ingrid DE Österreich 139=Jonas DE Österreich, 144=Jan DE Schweiz, 145=Leni DE Schweiz
const Fremdsprache = '116';  // 107=Sonja EN, 116= EN // 130=Eloise FR, 131=Henry FR // 162=Diego IT, 164=Isabella IT // 260=Alvaro SP, 261=Elvira SP
 
const robot1 = document.querySelector('.robot_div');
const robotsp = document.querySelector('.mouth');
 
let message1 = new SpeechSynthesisUtterance();
 let message2 = new SpeechSynthesisUtterance();
/* #### Text für James 1 - Anfang #### */
// Absätze ergeben eine kleine Pause beim Vorlesen! 
// Symbole und Auskommentierungszeichen werden auf mobilen Endgeräten auch vorgelesen!
 
message2.text = `
 
Darf ich mich vorstellen, 
  
ich bin James, 
  
Ihr neuer Forum-Roboter.
 
Herzlich willkommen im Black - Angel´s - Club!
 
Hier sind Sie im Forum bei Ankündigungen und Informationen. 
 
Hier sind alle wichtigen Ankündigungen und Informationen rund um das Forum Black - Angel´s - Club!
 
Danke! 
 
Viel Spaß Euer 
 
James.
 
 
`;
/* #### Text für James 1 - Ende #### */
 message1.text = `
 
 May I introduce myself, 
  
 I'm James 
  
 Your new forum robot.
 
 Welcome to the Black - Angel's - Club!
 
 Here you are in the forum for announcements and information. 
 
 Here are all the important announcements and information about the Forum Black - Angel's - Club!
 
 Thanks! 
 
 Have fun you 
 
 James.
`;
let voices = [];
 
speechSynthesis.cancel(); 
speechSynthesis.addEventListener('voiceschanged', event => {
  voices = speechSynthesis.getVoices();
  message1.voice = voices[Stimme]; 
  message2.voice = voices[Stimme];
  let linkstate = 0;
  $('.torso .language').on("click",function(){
    if(linkstate == 0){ 
      linkstate = 1;
      $(this).attr('style','background: linear-gradient(to right, #888888 0%, #cccccc 40%, #cccccc 60%, #888888 100%); color:#222222;');
      message1.voice = voices[Fremdsprache];
    } else{
      linkstate = 0;
      $(this).css({'background': '','color':''});
      message1.voice = voices[Stimme];
      message2.voice = voices[Stimme];
      speechSynthesis.speak(message2);
      speechSynthesis.speak(message1);
    } 
  });
 
});
 
message1.onend = function (event) {
  robot1.classList.remove('robot_speaking');
  robotsp.style.display = null;
};
 
robot1.addEventListener('click', event => {
  if (speechSynthesis.speaking) {
    robot1.classList.remove('robot_speaking');
    robotsp.style.display = null;
    speechSynthesis.cancel();
  } else {
    robot1.classList.add('robot_speaking');
    speechSynthesis.speak(message1);
    speechSynthesis.speak(message2);
  }
});
 
});
</script>