<style>
  
  .chat{
    position: absolute;
    min-width: 140px;
    border-radius: 90px;
    border: 1px solid #ccd4dd;
    bottom: 443px;
    right: 370px;
    overflow: hidden;
    padding: 30px 30px;
    border-bottom-left-radius: 8px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3b83ad;
    box-shadow: 0 0 7px #eee;
  }
  p{
    margin: 0;
  }
}
</style>
 
<div class="chat">
      <p class="text-message">Möchtest du mich reden hören Klicke mich bitte an</p>
    </div>
  </div>
</div>
 
<style>
.robot {
  box-sizing: border-box;
  position: relative;
  width: 160px;
  height: 180px;
  bottom: 0;
  left: calc(50% - 80px);
  margin:20px;
  cursor:pointer;
}
 
.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%;
  -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;
  -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 100ms ease-in-out;
}
 
.eyeball_right {
  right: 0;
  transition: transform 100ms ease-in-out;
}
 
.mouth {
  position: absolute;
  bottom: 5px;
  left: 5px;
  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 {
  height: 40px;
}
.robot_speaking .mouth-container {
  -webkit-animation: speakingAnim 0.3s infinite;
          animation: speakingAnim 0.3s infinite;
}
 
.mouth-container-line {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: limegreen;
  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");
  }
}
&nbsp;
@-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");
  }
}
&nbsp;
@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");
  }
}
&nbsp;
@-webkit-keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-4");
  }
}
@keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-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);
  }
}
&nbsp;
@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);
  }
}
&nbsp;
@keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
</style>
&nbsp;
<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;
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:0; height:0;">
    <defs>
        <!-- Low -->
        <filter id="low-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"></feTurbulence>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="1" ></feDisplacementMap>
        </filter>
        <filter id="low-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" ></feDisplacementMap>
        </filter>
        <filter id="low-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" ></feDisplacementMap>
        </filter>
        <filter id="low-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" ></feDisplacementMap>
        </filter>
        <filter id="low-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="0.5" ></feDisplacementMap>
        </filter>
        <!-- Listening -->
        <filter id="listening-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"></feTurbulence>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="2" ></feDisplacementMap>
        </filter>
        <filter id="listening-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" ></feDisplacementMap>
        </filter>
        <filter id="listening-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="2" ></feDisplacementMap>
        </filter>
        <filter id="listening-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" ></feDisplacementMap>
        </filter>
        <filter id="listening-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" ></feDisplacementMap>
        </filter>
        <!-- Speaking -->
        <filter id="speaking-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"></feTurbulence>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="12" ></feDisplacementMap>
        </filter>
        <filter id="speaking-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" ></feDisplacementMap>
        </filter>
        <filter id="speaking-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="12" ></feDisplacementMap>
        </filter>
        <filter id="speaking-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" ></feDisplacementMap>
        </filter>
        <filter id="speaking-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="11" ></feDisplacementMap>
        </filter>
    </defs>
</svg>
 
&nbsp;
<script id="rendered-js">
/* 
 * KLICKEN SIE DEN ROBOTER AN, DAMIT ER SPRECHEN KANN
 * Text in message.text ändern
 * Variable zum Ändern der Roboternachricht
 *
 * CONFIG.DEFAULT: false, wird überschrieben
 * Standardstimme des Systems
 */
 
const CONFIG = {
  DEFAULT: false,
  VOICE: 'Fred' };
 
&nbsp;
const robot = document.querySelector('.robot');
 
let message = new SpeechSynthesisUtterance();
 
message.text = `Darf ich mich vorstellen Ich bin James ihr neuer Forum-Roboter.
Herzlich willkommen im Black - Angel´s - Club!
Black - Angel´s - Club hat am 16.Oktober 2022 seine Pforten geöffnet.
Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig!
Wir haben einige geschützte Bereiche  wie z.B. • Private Foto-Galerie für Mitglieder.
Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden. 
Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will. 
Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. Und ihr Lieben Gäste ihr Dürft Euch gerne ins Gästebuch eintragen.
Danke! 
Viel Spaß Euer
James`;
 
let voices = [];
 
&nbsp;
speechSynthesis.addEventListener('voiceschanged', event => {
  voices = speechSynthesis.getVoices();
  if (!CONFIG.DEFAULT) {
    message.voice = voices.find(voice => voice.name === CONFIG.VOICE);
  }
});
 
message.onend = function (event) {
  robot.classList.remove('robot_speaking');
};
 
robot.addEventListener('click', event => {
  if (speechSynthesis.speaking) {
    robot.classList.remove('robot_speaking');
    speechSynthesis.cancel();
  } else {
    robot.classList.add('robot_speaking');
    speechSynthesis.speak(message);
  }
});
//# sourceURL=pen.js
</script>
&nbsp;
 

 
 

<style>
  
  .chat{
    position: absolute;
    min-width: 140px;
    border-radius: 90px;
    border: 1px solid #ccd4dd;
    bottom: 643px;
    right: 340px;
    overflow: hidden;
    padding: 30px 30px;
    border-bottom-left-radius: 8px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3b83ad;
    box-shadow: 0 0 7px #eee;
  }
  p{
    margin: 0;
  }
}
</style>
 
<div class="chat">
      <p class="text-message">Möchtest du mich reden hören Klicke mich bitte an</p>
    </div>
  </div>
</div>
 
<style>
.robot {
  box-sizing: border-box;
  position: relative;
  width: 160px;
  height: 180px;
  bottom: 0;
  left: calc(50% - 80px);
  margin:20px;
  cursor:pointer;
}
 
.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%;
  -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;
  -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 100ms ease-in-out;
}
 
.eyeball_right {
  right: 0;
  transition: transform 100ms ease-in-out;
}
 
.mouth {
  position: absolute;
  bottom: 5px;
  left: 5px;
  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 {
  height: 40px;
}
.robot_speaking .mouth-container {
  -webkit-animation: speakingAnim 0.3s infinite;
          animation: speakingAnim 0.3s infinite;
}
 
.mouth-container-line {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: limegreen;
  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");
  }
}
&nbsp;
@-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");
  }
}
&nbsp;
@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");
  }
}
&nbsp;
@-webkit-keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-4");
  }
}
@keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-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);
  }
}
&nbsp;
@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);
  }
}
&nbsp;
@keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
</style>
&nbsp;
<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;
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
    <defs>
        <!-- Low -->
        <filter id="low-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"></feTurbulence>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="1" ></feDisplacementMap>
        </filter>
        <filter id="low-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" ></feDisplacementMap>
        </filter>
        <filter id="low-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" ></feDisplacementMap>
        </filter>
        <filter id="low-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" ></feDisplacementMap>
        </filter>
        <filter id="low-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="0.5" ></feDisplacementMap>
        </filter>
        <!-- Listening -->
        <filter id="listening-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"></feTurbulence>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="2" ></feDisplacementMap>
        </filter>
        <filter id="listening-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" ></feDisplacementMap>
        </filter>
        <filter id="listening-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="2" ></feDisplacementMap>
        </filter>
        <filter id="listening-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" ></feDisplacementMap>
        </filter>
        <filter id="listening-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" ></feDisplacementMap>
        </filter>
        <!-- Speaking -->
        <filter id="speaking-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"></feTurbulence>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="12" ></feDisplacementMap>
        </filter>
        <filter id="speaking-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" ></feDisplacementMap>
        </filter>
        <filter id="speaking-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="12" ></feDisplacementMap>
        </filter>
        <filter id="speaking-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" ></feDisplacementMap>
        </filter>
        <filter id="speaking-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="11" ></feDisplacementMap>
        </filter>
    </defs>
</svg>
 
&nbsp;
<script id="rendered-js">
/* 
 * KLICKEN SIE DEN ROBOTER AN, DAMIT ER SPRECHEN KANN
 * Text in message.text ändern
 * Variable zum Ändern der Roboternachricht
 *
 * CONFIG.DEFAULT: false, wird überschrieben
 * Standardstimme des Systems
 */
 
const CONFIG = {
  DEFAULT: false,
  VOICE: 'Fred' };
 
&nbsp;
const robot = document.querySelector('.robot');
 
let message = new SpeechSynthesisUtterance();
 
message.text = `Darf ich mich vorstellen Ich bin James ihr neuer Forum-Roboter.
Herzlich willkommen im Black - Angel´s - Club!
Black - Angel´s - Club hat am 16.Oktober 2022 seine Pforten geöffnet.
Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig!
Wir haben einige geschützte Bereiche  wie z.B. • Private Foto-Galerie für Mitglieder.
Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden. 
Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will. 
Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. Und ihr Lieben Gäste ihr Dürft Euch gerne ins Gästebuch eintragen.
Danke! 
Viel Spaß Euer
James`;
 
let voices = [];
 
&nbsp;
speechSynthesis.addEventListener('voiceschanged', event => {
  voices = speechSynthesis.getVoices();
  if (!CONFIG.DEFAULT) {
    message.voice = voices.find(voice => voice.name === CONFIG.VOICE);
  }
});
 
message.onend = function (event) {
  robot.classList.remove('robot_speaking');
};
 
robot.addEventListener('click', event => {
  if (speechSynthesis.speaking) {
    robot.classList.remove('robot_speaking');
    speechSynthesis.cancel();
  } else {
    robot.classList.add('robot_speaking');
    speechSynthesis.speak(message);
  }
});
//# sourceURL=pen.js
</script>
&nbsp;
 

<body class="bg-dark text-white" >
  <div class="container text-center " >
  <img src="https://bradtraversy.github.io/type-n-speak/img/speech.png" class="mb-15">
  <div class="row">
    <div class=" col-md-6 mx-auto">
 
      <form>
        <div class="form-group">
 
          <textarea id="text-input"  placeholder="type any thing you want.."class=" form-control form-control-lg" >
 
          </textarea>
        </div>
        <div class="form-group">
<label for="rate">Rate</label>
<div id="rate-value" class="badge badge-primary float-right">1
 
</div>
                        <input type="range" id="rate" class="custom-range" min="0.5" max="2" value="1" step="0.1">  
          </div>
          <div class="form-group">
              <label for="pitch">pitch</label>
              <div id="pitch-value" class="badge badge-primary float-right">1
              
              </div>
              <input type="range" id="pitch" class="custom-range" min="0" max="2" value="1" step="0.1">  
                        </div>
                    
<div class="form-group">
<select id="voice-select" class="form-control form-control-lg" >
  </select>
 
  </div>
  <button class="btn btn-primary btn-lg btn-block">speak</button>                    
      
      </form>
      <p class="text-secondary"> Hinweis: Diese App verwendet die Web Speech API, die experimentell ist und in einigen Versionen bestimmter Browser möglicherweise nicht vollständig funktioniert.</p>
      </div>
   
</div>
  </div>
 

 

 

<script id="rendered-js">
//get speech api
var synth = speechSynthesis;
 
//dom
var txtfrm = document.querySelector("form");
var txtinput = document.getElementById("text-input");
var voiceSelect = document.querySelector("#voice-select");
var rate = document.querySelector('#rate');
var ratevalue = document.querySelector('#rate-value');
var pitch = document.querySelector('#pitch');
var pitchvalue = document.querySelector('#pitch-value');
 

 
// Init voices array
var voices = [];
 
function getVoices() {
  voices = synth.getVoices();
 
  // Loop through voices and create an option for each one
  voices.forEach(voice => {
    // Create option element
    var option = document.createElement('option');
    // Fill option with voice and language
    option.textContent = voice.name + '(' + voice.lang + ')';
 
    // Set needed option attributes
    option.setAttribute('data-lang', voice.lang);
    option.setAttribute('data-name', voice.name);
    voiceSelect.appendChild(option);
  });
};
 

 
getVoices();
if (synth.onvoiceschanged !== undefined) {
  synth.onvoiceschanged = getVoices;
}
 

// Speak
function speak() {
  // Check if speaking
  if (synth.speaking) {
    console.error('Already speaking...');
    return;
  }
 

  // Get speak text
  const speakText = new SpeechSynthesisUtterance(txtinput.value);
 
  // Speak end
  speakText.onend = e => {
    console.log('Done speaking...');
    body.style.background = '#141414';
  };
 
  // Speak error
  speakText.onerror = e => {
    console.error('Something went wrong');
  };
 
  // Selected voice
  var selectedVoice = voiceSelect.selectedOptions[0].getAttribute(
  'data-name');
 

  // Loop through voices
  voices.forEach(voice => {
    if (voice.name === selectedVoice) {
      speakText.voice = voice;
    }
  });
 
  // Set pitch and rate
  speakText.rate = rate.value;
  speakText.pitch = pitch.value;
  // Speak
  synth.speak(speakText);
}
// };
 
// EVENT LISTENERS
 
// Text form submit
txtfrm.addEventListener('submit', e => {
  e.preventDefault();
  speak();
  txtInput.blur();
});
 
// Rate value change
rate.addEventListener('change', e => ratevalue.textContent = rate.value);
 
// Pitch value change
pitch.addEventListener('change', e => pitchvalue.textContent = pitch.value);
 
// Voice select change
voiceSelect.addEventListener('change', e => speak());
//# sourceURL=pen.js
    </script>
 

<style>
 

body {
  font-family: sans-serif;
  background-color: #222;
  color: #fff;
}
 
textarea {
  background-color: #222;
  color: #fff;
  border: 1px inset #333;
  outline: none; /* Dies sollte den weißen Rand außerhalb der Grenze loswerden*/
  box-shadow: none;
}
textarea:focus {
  background-color: #333;
  color: #fff;
  border: 1px inset #333;
  box-shadow: 0 0 5px 5px #08f;
}
 

input[type="button"], button {
  background-color: #222;
  color: #fff;
  border: 1px outset #333;
  cursor: pointer;
  /* TODO: Übergang*/
}
input[type=button]:hover,
button:hover {
  background-color: #444;
  color: #fff;
  border: 1px outset #66;
  
}
 
/* ---------- */
/* TODO: später ein anderes Farbschema wählen */
:root {
 --range-width: 50%;
 --range-margin: 18px 0; /* TODO: Teilen Sie diese Variable! */
 /*
 --range-margin-horiz: 18px;
 --range-margin-vert: 0;
  */
 --appearance: none;
 --range-focus-outline: none;
 --box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 /* thumb */
 --thumb-border: 1px solid #000000;
 --thumb-height: 36px;
 --thumb-width: 16px;
 --thumb-border-radius: 3px;
 --thumb-bg: #ffffff;               /* TODO: --thumb-range-bg umbenennen?*/
 --thumb-cursor: pointer;
  /* track */
 --track-height: 8.4pt;
 --track-width: 100%;
 --track-bg: transparent;           /* TODO: rename: --track-init-bg */
 --track-color: transparent;        /* TODO: rename --track-init-color */
 --track-border-color: transparent; /* TODO: rename: --track-init-border-color */
 --track-border-width: 16px 0;
 --track-cursor: pointer;
 --track-range-bg: #3071a9;
 
 /* TODO: Is this thumb or track? (more than likey track) */
 --fill-border: 0.2px solid #010101; /* TODO: rename: --track-border */
 --fill-border-radius: 2.6px;         /* TODO: rename --track-border-radius */
 --fill-lower-bg: #2a6495;
 --fill-upper-bg: #3071a9;            /* TODO: rename: --fill-bg? */
 --fill-lower-focus-bg: #3071a9;
 --fill-upper-focus-bg: #367ebd;      /* TODO: rename: --fill-focus-bg? */
}
 
/* everybody    alle */
input[type=range] {
  -webkit-appearance: var(--appearance);
  margin: var(--range-margin);
  width: var(--range-width);
}
/* everybody focus */
input[type=range]:focus { outline: var(--range-focus-outline); }
/* Webkit Thumb */
input[type=range]::-webkit-slider-thumb {
  box-shadow:  var(--box-shadow);
  border: var(--thumb-border);
  height: var(--thumb-height);
  width: var(--thumb-width);
  border-radius: var(--thumb-border-radius);
  background: var(--thumb-bg);
  cursor: var(--thumb-cursor);
  -webkit-appearance: var(--appearance);
  margin-top: -14px;    /* TODO: calculate! */
}
/* Webkit Track */
input[type=range]::-webkit-slider-runnable-track {
  height: var(--track-height);
  width: var(--track-width);
  cursor: var(--track-cursor);
  box-shadow: var(--box-shadow);
  background: var(--fill-upper-bg);
  border-radius: calc(var(--fill-border-raidus)/2);
  border: var(--fill-border);
}
/* Webkit Track Focus */
input[type=range]:focus::-webkit-slider-runnable-track {background: var(--fill-upper-focus-bg);}
/* Mozilla Thumb */
input[type=range]::-moz-range-thumb {
  box-shadow: var(--box-shadow);
  border: var(--thumb-border);
  height: var(--thumb-height);
  width: var(--thumb-width);
  border-radius: var(--thumb-border-radius);
  background: var(--thumb-bg);
  cursor: var(--thumb-cursor);
}
/* Mozilla Track */
input[type=range]::-moz-range-track {
  width: var(--track-width);
  height: var(--track-height);
  cursor: var(--track-cursor);
  box-shadow: var(--box-shadow);
  background: var(--track-range-bg);
  border-radius: calc(var(--fill-border-raidus)/2);
  border: var(--fill-border);
}
/* TODO: Mozilla Track Focus */
/* MSIE Thumb */
input[type=range]::-ms-thumb {
  box-shadow: var(--box-shadow);
  border: var(--thumb-border);
  height: var(--thumb-height);
  width: var(--thumb-width);
  border-radius: var(--thumb-border-radius);
  background: var(--thumb-bg);
  cursor: var(--thumb-cursor);
}
/* MSIE Track */
input[type=range]::-ms-track {
  width: var(--track-width);
  height: var(--track-height);
  cursor: var(--track-cursor);
  background: var(--track-bg);
  border-color: var(--track-border-color);
  border-width: var(--track-border-width);
  color: var(--track-color);
}
input[type=range]::-ms-fill-lower {
  background: var(--fill-lower-bg);
  border: var(--fill-border);
  border-radius: var(--fill-border-radius);
  box-shadow: var(--box-shadow);
}
input[type=range]::-ms-fill-upper {
  background: var(--fill-upper-bg);
  border: var(--fill-border);
  border-radius: var(--fill-border-radius);
  box-shadow: var(--box-shadow);
}
/* MSIE Track Focus */
input[type=range]:focus::-ms-fill-lower { background: var(--fill-lower-focus-bg); }
input[type=range]:focus::-ms-fill-upper { background: var(--fill-upper-focus-bg); }
 
/* ---------- */
 
.panel {
  display: flex;
  flex-direction: column;
}
 
.panel > .field {
  min-width: 200px;
}
 
.field > label {
  display: inline-block;
  min-width: 100px;
}
 
#voices {
  /* display: block; */
  min-width: 400px;
}
 
</style>
 

<div>
  <h1>Text To Speech</h1>
  <hr>
  <div style="text-align: center;">
  <textarea id="say" name="say" rows="20" cols="50"></textarea><br>
  <input type="button" id="speak" name="speak" value="Speak Freak!">
  </div>
  <hr>
  <h2>Other settings</h2>
  <div>
    <!-- Voices bekommt eine eigene Zeile, weil es so breit ist!  -->
    <div class="field" id="voices">
      <label for="voice">Voice</label>
      <select id="voice" name="voice"></select>
    </div>
  </div>
  <div class="panel">
    
    <div class="field">
      <label for="volume">Volume</label>
      <input  type="range" id="volume" name="volume" min="0" max="1" step="0.01" value="0.5">
      <output for="volume"></output>
    </div>
    <div class="field">
      <label for="pitch">Pitch</label>
      <input type="range" id="pitch" name="pitch" min="0" max="2" step="0.01" value="1"><!-- default 1 -->
      <output for="pitch"></output>
    </div>
    <div class="field">
      <label for="rate">Rate</label>
      <input type="range" id="rate" name="rate" min="0.1" max="10" step="0.1" value="1">
      <output for="rate"></output>
    </div>
    
<!--
     <div class="field">
       <label for=""></label>
       <input type="range" id="" name="" min="" max="" step="" value="">
       <Ausgabe für=""></Ausgabe>
     </div>
    -->
  </div>
</div>
 

<script id="rendered-js">
//window.speechSynthesis.speak(new SpeechSynthesisUtterance(`'Cause you can't, you won't, and you don't stop
//'Cause you can't, you won't, and you don't stop
//Well, you can't, you won't, and you don't stop
//Mike D, come and rock the sure shot`));
 
window.addEventListener("load", event => {
 
  let synth = window.speechSynthesis;
  let voices = [];
  let voiceSelect = document.querySelector("#voice");
 

  function listVoices() {
    voices = synth.getVoices();
    // Got ridd of sort. P.I.T.A. trying to select the default for some reason.
    /*.sort(function (a, b) {
      const aname = a.name.toUpperCase(), bname = b.name.toUpperCase();
      return ( aname < bname ) ? -1 : ( aname == bname ) ? 0 : +1;
    });
    */
    let selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
 
    voiceSelect.innerHTML = '';
    for (let voice of voices) {
      var option = document.createElement('option');
      option.textContent = `${voice.name} (${voice.lang})`;
      if (voice.default) {
        option.textContent += ' -- DEFAULT';
        option.selected = true;
      }
      option.setAttribute('data-lang', voice.lang);
      option.setAttribute('data-name', voice.name);
      voiceSelect.appendChild(option);
    }
    voiceSelect.selectedIndex = selectedIndex;
  }
 
  listVoices(); // load voices
  // TODO: is htere a more eloquent way to saying this if statement?
  if (synth.onvoiceschanged !== undefined) {
    synth.onvoiceschanged = listVoices;
  }
 
  let controls = ["volume", "pitch", "rate"];
  let actions = ["load", "input"];
  function setOutput(ctrl) {
    let range = document.querySelector(ctrl);
    //range.nextElementSibling.innerText = range.value;
    range.nextElementSibling.textContent = range.value;
  }
  for (let control of controls) {
    for (let action of actions) {
      setOutput(`#${control}`);
      document.querySelector(`#${control}`).addEventListener(action, event => {
        setOutput(`#${control}`);
      });
    }
  }
 

  document.querySelector("#speak").addEventListener("click", event => {
    event.preventDefault();
    let say = document.querySelector("#say").value;
    let sayThis = new SpeechSynthesisUtterance(say);
 
    let vox = voiceSelect.selectedOptions[0].getAttribute('data-name');
    for (voice of voices) {
      if (voice.name === vox) {
        sayThis.voice = voice;
        break;
      }
    }
 
    sayThis.pitch = document.querySelector("#pitch").value;
    sayThis.rate = document.querySelector("#rate").value;
    synth.speak(sayThis);
  });
 
});
//# sourceURL=pen.js
    </script>
 

<style>
  
  .chat{
    position: absolute;
    min-width: 140px;
    border-radius: 90px;
    border: 1px solid #ccd4dd;
    bottom: -85px;
    right: -5px;
    overflow: hidden;
    padding: 30px 30px;
    border-bottom-left-radius: 8px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3b83ad;
    box-shadow: 0 0 7px #eee;
  }
  p{
    margin: 0;
  }
}
</style>
 
<div class="chat">
      <p class="text-message">Möchtest du mich reden hören Klicke mich bitte an</p>
    </div>
  </div>
</div>
 
<style>
.robot {
  box-sizing: border-box;
  position: relative;
  width: 160px;
  height: 180px;
  bottom: 0;
  left: calc(50% - 80px);
  margin:20px;
  cursor:pointer;
}
 
.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%;
  -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;
  -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 100ms ease-in-out;
}
 
.eyeball_right {
  right: 0;
  transition: transform 100ms ease-in-out;
}
 
.mouth {
  position: absolute;
  bottom: 5px;
  left: 5px;
  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 {
  height: 40px;
}
.robot_speaking .mouth-container {
  -webkit-animation: speakingAnim 0.3s infinite;
          animation: speakingAnim 0.3s infinite;
}
 
.mouth-container-line {
  position: absolute;
  top: 50%;
  height: 2px;
  background-color: limegreen;
  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");
  }
}
&nbsp;
@-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");
  }
}
&nbsp;
@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");
  }
}
&nbsp;
@-webkit-keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-4");
  }
}
@keyframes speakingAnim {
  0% {
    filter: url("#speaking-0");
  }
  25% {
    filter: url("#speaking-1");
  }
  50% {
    filter: url("#speaking-2");
  }
  75% {
    filter: url("#speaking-3");
  }
  100% {
    filter: url("#speaking-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);
  }
}
&nbsp;
@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);
  }
}
&nbsp;
@keyframes blink {
  50% {
    transform: scale(1, 1);
  }
  51% {
    transform: scale(1, 0.1);
  }
  52% {
    transform: scale(1, 1);
  }
}
</style>
&nbsp;
<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;
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:0; height:0;">
    <defs>
        <!-- Low -->
        <filter id="low-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"></feTurbulence>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="1" ></feDisplacementMap>
        </filter>
        <filter id="low-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" ></feDisplacementMap>
        </filter>
        <filter id="low-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" ></feDisplacementMap>
        </filter>
        <filter id="low-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1.5" ></feDisplacementMap>
        </filter>
        <filter id="low-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="0.5" ></feDisplacementMap>
        </filter>
        <!-- Listening -->
        <filter id="listening-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"></feTurbulence>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="2" ></feDisplacementMap>
        </filter>
        <filter id="listening-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" ></feDisplacementMap>
        </filter>
        <filter id="listening-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="2" ></feDisplacementMap>
        </filter>
        <filter id="listening-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="3" ></feDisplacementMap>
        </filter>
        <filter id="listening-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="1" ></feDisplacementMap>
        </filter>
        <!-- Speaking -->
        <filter id="speaking-0">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="0"></feTurbulence>
            <feDisplacementMap id="displacement"
                               in="SourceGraphic"
                               in2="noise"
                               scale="12" ></feDisplacementMap>
        </filter>
        <filter id="speaking-1">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" ></feDisplacementMap>
        </filter>
        <filter id="speaking-2">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="2"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="12" ></feDisplacementMap>
        </filter>
        <filter id="speaking-3">
            <feTurbulence id="turbulence"
                          baseFrequency="0.02"
                          numOctaves="3"
                          result="noise"
                          seed="30"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="13" ></feDisplacementMap>
        </filter>
        <filter id="speaking-4">
            <feTurbulence id="turbulence"
                          baseFrequency="0.1"
                          numOctaves="3"
                          result="noise"
                          seed="4"></feTurbulence>
            <feDisplacementMap in="SourceGraphic"
                               in2="noise"
                               scale="11" ></feDisplacementMap>
        </filter>
    </defs>
</svg>
 
&nbsp;
 
&nbsp;
<form id="demo" class="widget-wrap">
  <div id="vol"></div>
  <h1>James TEXT-TO-SPEECH</h1>
  
  <!-- (A) VOICE PICKER -->
  <label>Wählen Sie eine Stimme</label>
  <select id="demo-voice" disabled></select>
 
   <!-- (B) VOLUME + PITCH + RATE -->
  <label>Volume</label>
  <input type="range" id="demo-vol" min="0" max="1" step="0.1" value="1" disabled>
  <label>Pitch</label>
  <input type="range" id="demo-pitch" min="0" max="2" step="0.1" value="1" disabled>
  <label>Rate</label>
  <input type="range" id="demo-rate" min="0.1" max="10" step="0.1" value="1" disabled>
  
  <!-- (C) SAY SOMETHING -->
  <label>Message</label>
  <input type="text" id="demo-msg" value="Darf ich mich vorstellen Ich bin James ihr neuer Forum-Roboter.
Herzlich willkommen im Black - Angel´s - Club!
Black - Angel´s - Club hat am 16.Oktober 2022 seine Pforten geöffnet.
Wenn Du also gern schreibst, Dich und Deine Interessen im Forum einbringst, bist Du hier genau richtig!
Wir haben einige geschützte Bereiche  wie z.B. • Private Foto-Galerie für Mitglieder.
Bei uns kannst Du Dich ohne Verpflichtung und kostenlos anmelden. 
Willkommen ist jeder, der sich selbst gern in netter Weise einbringt und sich nicht nur die Zeit mit Lesen vertreiben will. 
Stell Dich bitte nach dem Registrieren kurz im Mitgliederbereich vor. Und ihr Lieben Gäste ihr Dürft Euch gerne ins Gästebuch eintragen.
Danke! 
Viel Spaß Euere
James!" disabled required/>
  
  <!-- (D) GO! -->
  <label>Go!</label>
  <input type="submit" id="demo-go" disabled value="Speak"/>
  
 
</form>
 
<script id="rendered-js">
window.onload = () => {
  // (A) TTS SUPPORTED
  if ("speechSynthesis" in window) {
    // (B) GET HTML ELEMENTS
    let demo = document.getElementById("demo"),
    vlist = document.getElementById("demo-voice"),
    vvol = document.getElementById("demo-vol"),
    vpitch = document.getElementById("demo-pitch"),
    vrate = document.getElementById("demo-rate"),
    vmsg = document.getElementById("demo-msg"),
    vgo = document.getElementById("demo-go");
 
    // (C) POPULATE AVAILABLE VOICES
    var voices = () => {
      speechSynthesis.getVoices().forEach((v, i) => {
        let opt = document.createElement("option");
        opt.value = i;
        opt.innerHTML = v.name;
        vlist.appendChild(opt);
      });
    };
    voices();
    speechSynthesis.onvoiceschanged = voices;
 
    // (D) SPEAK
    var speak = () => {
      let msg = new SpeechSynthesisUtterance();
      msg.voice = speechSynthesis.getVoices()[vlist.value];
      msg.text = vmsg.value;
      speechSynthesis.speak(msg);
      return false;
    };
 
    // (E) ENABLE FORM
    demo.onsubmit = speak;
    vlist.disabled = false;
    vvol.disabled = false;
    vpitch.disabled = false;
    vrate.disabled = false;
    vmsg.disabled = false;
    vgo.disabled = false;
  }
 
  // (X) TTS NOT SUPPORTED
  else {
      alert("Text-to-speech is not supported on your browser!");
    }
};
//# sourceURL=pen.js
    </script>
 

<style>
.James{
  float:left;
  margin: 30px 20px 10px 20px;
  z-index: 999997;
}
 
#James_sagt{   
  background-color: #333333;
  padding:15px 20px 15px 15px;
  border-radius:5px;
  color: #ffffff;
  
  display: none;
  z-index: 999999;
  max-width: 340px; 
  float:left;
  margin: 20px; 
 
  /* word-break: break-all; */
}
 
#coding {
  background-color: #333333;
  padding:15px 20px 15px 15px;
  border-radius:5px;
  color: #ffffff;
 
  float:left;
  display: table-cell;
  z-index: 999998;
  margin:20px;
}
 
.objro{ 
  display: none; 
}
</style>
 
<!-- James - Text -->
<div id="James_sagt"></div>
 
<!-- Figur James erstellen - Anfang -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="160px" height="250px" viewBox="0 0 160 250" enable-background="new 0 0 160 250" xml:space="preserve" class="James">
<g>
	<g>
		<path class="antenna-left objro" d="M76.782,25.942c-0.08-0.815-2.192-20-22.867-21.928l0.137-1.501c21.916,2.044,24.19,23.07,24.21,23.283L76.782,25.942z"></path>
	</g>
	<ellipse class="antenna-ball-left objro" fill="#5E5E5E" cx="55.021" cy="3.39" rx="3.344" ry="3.391"></ellipse>
</g>
<g>
	<g>
		<path class="antenna-right objro" d="M83.217,25.942c0.08-0.815,2.192-20,22.867-21.928l-0.137-1.501c-21.916,2.044-24.188,23.07-24.209,23.283L83.217,25.942z
			"></path>
	</g>
	<ellipse class="antenna-ball-right objro" fill="#5E5E5E" cx="104.979" cy="3.39" rx="3.346" ry="3.391"></ellipse>
</g>
<rect class="neck objro" x="59.722" y="72.779" fill="#787878" width="40.557" height="27.564"></rect>
<path class="top-of-head objro" fill="#787878" d="M96.079,32.57v-8.546c-10.72-3.765-21.437-3.98-32.156,0v8.546H96.079z"></path>
<g>
	<g>
		<g>
			<rect class="leg-left objro" x="48.499" y="158.432" fill="#787878" width="12.771" height="81.291"></rect>
		</g>
		<path class="foot-left objro" fill="#595959" d="M54.885,234.096c-9.526,0-17.244,7.119-17.244,15.903H72.13C72.13,241.215,64.41,234.096,54.885,234.096z"
			></path>
		<g>
			<ellipse class="kneecap-left-outside objro" cx="54.885" cy="200.79" rx="9.294" ry="9.423"></ellipse>
			<g>
				<path class="kneepcap-left-inside objro" fill="#787878" d="M60.607,203.823c-1.653,3.202-5.553,4.44-8.715,2.768c-3.163-1.677-4.383-5.628-2.73-8.832
					c1.651-3.204,5.556-4.442,8.715-2.771C61.036,196.664,62.258,200.62,60.607,203.823z"></path>
			</g>
		</g>
	</g>
	<g>
		<g>
			<rect class="leg-right objro" x="98.729" y="158.432" fill="#787878" width="12.771" height="81.291"></rect>
		</g>
		<path class="foot-right objro" fill="#595959" d="M105.115,234.096c9.523,0,17.244,7.119,17.244,15.903H87.871
			C87.871,241.215,95.593,234.096,105.115,234.096z"></path>
		<g>
			<ellipse class="kneepcap-right-outisde objro" cx="105.113" cy="200.79" rx="9.295" ry="9.423"></ellipse>
			<g>
				<path class="kneecap-right-inside objro" fill="#787878" d="M99.395,203.823c1.652,3.202,5.551,4.44,8.713,2.768c3.164-1.677,4.381-5.628,2.729-8.832
					c-1.65-3.204-5.553-4.442-8.711-2.771C98.963,196.664,97.743,200.62,99.395,203.823z"></path>
			</g>
		</g>
	</g>
</g>
<g>
	<g>
		<g>
			<path class="arm-left objro" fill="#787878" d="M38.291,95.944c-8.259,4.479-15.268,11.387-20.423,18.846C5.22,133.088,3.41,154.261,7.262,176.253
				l10.418-1.878c-3.338-19.01-2.353-37.016,8.665-53.158c4.23-6.199,9.988-12.042,16.923-15.812L38.291,95.944z"></path>
			<path class="hand-left objro" fill="#595959" d="M9.604,166.5c-6.984,1.975-11.067,9.316-9.117,16.398c1.008,3.662,3.439,6.523,6.51,8.172
				c-0.167-0.363-0.315-0.742-0.426-1.141c-1.235-4.484,1.703-9.234,6.562-10.609c4.861-1.377,9.804,1.145,11.037,5.631
				c0.111,0.396,0.18,0.798,0.221,1.197c1.785-3.021,2.399-6.748,1.393-10.407C23.833,168.661,16.589,164.523,9.604,166.5z"></path>
			<g>
				<ellipse class="elbox-left-outside objro" cx="13.581" cy="132.93" rx="8.505" ry="8.623"></ellipse>
				<g>
					<path class="elbow-left-inside objro" fill="#787878" d="M9.299,135.199c1.237,2.396,4.154,3.322,6.52,2.07c2.364-1.252,3.278-4.211,2.042-6.605
						c-1.236-2.398-4.152-3.324-6.52-2.072C8.978,129.844,8.065,132.803,9.299,135.199z"></path>
				</g>
			</g>
		</g>
		<path class="arm-attachment-left objro" d="M42.356,94.049l-8.341-1.248c-5.238,10.201-7.014,20.918-4.697,32.248l8.34,1.248L42.356,94.049z"></path>
	</g>
	<g>
		<g>
			<path class="arm-right objro" fill="#787878" d="M121.709,95.944c8.258,4.479,15.268,11.387,20.421,18.846c12.647,18.299,14.458,39.472,10.606,61.464
				l-10.418-1.878c3.339-19.01,2.353-37.017-8.666-53.158c-4.229-6.199-9.987-12.042-16.924-15.812L121.709,95.944z"></path>
			<path class="hand-right objro" fill="#595959" d="M150.395,166.5c6.984,1.975,11.067,9.316,9.119,16.398c-1.011,3.662-3.439,6.523-6.511,8.172
				c0.168-0.363,0.313-0.742,0.424-1.141c1.237-4.484-1.702-9.234-6.562-10.609c-4.861-1.377-9.803,1.145-11.035,5.631
				c-0.109,0.396-0.18,0.798-0.223,1.197c-1.784-3.021-2.398-6.748-1.393-10.407C136.166,168.661,143.412,164.523,150.395,166.5z"></path>
			<g>
				<ellipse class="elbox-right-outside objro" cx="146.419" cy="132.93" rx="8.505" ry="8.623"></ellipse>
				<g>
					<path class="elbow-right-inside objro" fill="#787878" d="M150.7,135.199c-1.235,2.396-4.154,3.322-6.519,2.07c-2.365-1.252-3.279-4.211-2.043-6.605
						c1.235-2.398,4.152-3.324,6.52-2.072C151.023,129.844,151.936,132.803,150.7,135.199z"></path>
				</g>
			</g>
		</g>
		<path class="arm-attachment-right" d="M117.645,94.049l8.34-1.248c5.238,10.201,7.015,20.918,4.695,32.248l-8.339,1.248L117.645,94.049z"></path>
	</g>
</g>
<path class="head objro" fill="#595959" d="M112.809,28.372H80H47.19c-5.814,18.663-5.499,37.322,0,55.983H80h32.811
	C118.309,65.694,118.625,47.035,112.809,28.372z"></path>
<g>
	<g>
		<path class="eyeball-left-outside objro" fill="#FFFFFF" d="M72.116,47.955c0,5.443-4.045,9.853-9.033,9.853h-1.971c-4.988,0-9.032-4.41-9.032-9.853
			s4.044-9.856,9.032-9.856h1.971C68.071,38.099,72.116,42.512,72.116,47.955z"></path>
		<path class="eyeball-left-inside" d="M66.614,47.955c0,2.176-1.618,3.942-3.613,3.942h-1.807c-1.994,0-3.612-1.766-3.612-3.942
			c0-2.178,1.618-3.943,3.612-3.943H63C64.996,44.012,66.614,45.777,66.614,47.955z"></path>
	</g>
	<g>
		<path class="eyeball-right-outisde objro" fill="#FFFFFF" d="M107.92,47.955c0,5.443-4.045,9.853-9.031,9.853h-1.973c-4.986,0-9.031-4.41-9.031-9.853
			s4.045-9.856,9.031-9.856h1.973C103.875,38.099,107.92,42.512,107.92,47.955z"></path>
		<path class="eyeball-right-inside"  d="M102.417,47.955c0,2.176-1.616,3.942-3.612,3.942h-1.807c-1.994,0-3.611-1.766-3.611-3.942
			c0-2.178,1.617-3.943,3.611-3.943h1.807C100.801,44.012,102.417,45.777,102.417,47.955z"></path>
	</g>
</g>
<path class="mouth objro" fill="#FFFFFF" d="M103.383,69.778c0,1.381-0.836,2.499-1.871,2.499H58.487c-1.033,0-1.871-1.118-1.871-2.499
	c0-1.378,0.838-2.496,1.871-2.496h43.025C102.547,67.282,103.383,68.4,103.383,69.778z"></path>
<g>
	<path class="body objro" fill="#595959" d="M120.098,92.09H80H39.903c-7.105,26.162-6.721,52.325,0,78.488H80h40.098
		C126.82,144.416,127.203,118.252,120.098,92.09z"></path>
</g>
</svg>
 
<!-- Figur James erstellen - Ende -->
 
<div style="clear:both;"></div>
 
 
<!-- Forum-Bot - Anfang ( _  bedeutet Absatz / Zeilenumbruch, **************************** braucht James um sich aufzubauen! ) -->
<div id="coding">
 
  James Nr.6 Ich, sag Euch was!!!
 

****************************
</div>
<!-- Forum-Bot - Ende -->
 
<div style="clear:both;"></div>
 
 
<!-- 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>
$(function () {
  var coding = $("#coding");
  var text = coding.text();
  coding.text("");
 
  var i = 0;
  var html = "";
  var a = null;
  var interval = setInterval(function () {
    var char = "";
    if (text.split("")[i] != "*" &&
    text.split("")[i] != null &&
    text.split("")[i] != undefined)
    char = text.split("")[i] != "_" ? text.split("")[i] : "<br>";
 
    coding.html(html + char);
    html += char;
    i++;
 
    if (text.split("")[i] == "*")
    a++;
    if (a != null) $(".objro:eq(" + a + ")").css("display", "block");
 
    if (i == text.split("").length)
    {
      tellusSoething();
      clearInterval(interval);
    }
 
  }, 40);
 
 
  var whatDoesJames_sagt = `
 
Hallo, Ihr lieben Gäste!
 
Ich bin J a m e s  Nummer 6!
 
Ich wurde schon unzählige Male von Wolfgang und Daishi bearbeitet 
und jedes Mal neu bestückt.
 
Mich gibt es in verschiedenen Versionen, auch mir gefällt es, dass an mir gearbeitet wird und ich immer verbessert werde.
 
Wenn man schaut, dass ich aus einem Eggbot, aus einem IRC-Chat mit PHP-Script geschrieben wurde, habe ich jetzt komplett ein neues und cooles Aussehen bekommen.
 
Ich war am Anfang nur 2 Punkte und ein Strich. Schaut mich jetzt an, ich habe ein komplettes neues Aussehen.
 
Ich bedanke mich sehr an meinem Schöpfer, der mir ein neues Aussehen und ein neues Zuhause gegeben hat. Leider war ich sehr fehlerhaft und verursachte auf dem neuen System und mein neues Zuhause sehr starke Probleme.
 
Daishi gab mich an seinen treuen Partner Wolfgang aus dem Forum  Treffpunkt für Hilfe, Tricks & Tipps.
 
Wolfgang schaute mich an und schrieb mich komplett neu, testete mich auf einem  seiner Testforen und hatte noch hier und da Probleme mit dem System.
 
Wolfgang hatte mich zigmale getestet, bis ich richtig mit dem System funktionierte. Hier ist das Resultat, ich funktioniere jetzt fehlerfrei.
 
Ich habe ein schönes Zuhause und ich fühle mich sehr wohl. Wolfgang, ich möchte mich hiermit nochmals bedanken für deine unermüdliche Arbeit und danke dir, dass du mir ein so wundervolles Zuhause gegeben hast.
 
Danke! 
Viel Spaß Euer James
 
`;
 
var lgh = whatDoesJames_sagt.split("").length;
  var bitInt = 0;
  function tellusSoething()
  {
    $("#James_sagt").show().text($("#James_sagt").text() + whatDoesJames_sagt.split("")[bitInt]);
    bitInt++;
    $(".mouth").css("display", bitInt % 8 && $(".mouth").css("display") == "none" ? "block" : "none");
    if (bitInt < lgh)
    setTimeout(function () {tellusSoething();}, 50);
    else
    $(".mouth").css("display", "block");
  }
});
 
//# sourceURL=pen.js
</script>