tts-demo/index.html at main · 3plusx/tts-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html class="no-js" lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TTS Demo</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-x grid-padding-x">
        <div class="large-12 cell">
          <h1>
            Inklusion – vom Individuum zur Gesellschaft
          </h1>
          <div id="read" class="readButton" data-status="ready" role="button" aria-pressed="false" tabindex="0" aria-label="Text vorlesen" data-audio-file="assets/bpd_teilhabe_und_inklusion.mp3" data-timestamps-file="assets/bpd_teilhabe_und_inklusion.json">
            <span id="read-ready">
              <svg width="15" height="15" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <path d="M10,10 L80,50 L10,90 L10,10" stroke="black" stroke-width="5" fill="#333" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
                Text vorlesen
            </span>
            <span id="read-play">
              <svg
                width="15"
                height="15"
                version="1.1"
                id="svg8277"
                viewBox="0 0 100 100"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:svg="http://www.w3.org/2000/svg">
                <defs
                  id="defs8274" />
                <g
                  id="layer1">
                  <path
                    id="path1477"
                    fill="#333"
                    d="m 10.058489,98.303716 c 0.0024,0.790722 1.152446,1.728984 1.782915,1.702354 0.783353,-0.003 24.519734,0.0488 24.887735,0.0488 0.731168,0.0375 1.866566,-1.122328 1.866566,-1.702342 0,-0.672327 0.107946,-94.6527082 0.107946,-95.6856536 0.02867,-1.1796081 -0.558899,-2.40000421 -1.801805,-2.40000421 -1.537004,0 -22.699008,0 -24.673512,0 -1.227345,-3.857e-5 -2.159581,0.99455141 -2.156339,2.43603251 0,1.5100036 -0.01351,94.4348983 -0.01351,95.6007923 1e-6,7e-6 3e-6,1.4e-5 4e-6,2.1e-5 z" />
                  <path
                    id="path1477-7"
                    fill="#333"
                    d="m 60.63024,98.30374 c 0.0024,0.790722 1.152446,1.72899 1.782915,1.70235 0.783353,-0.004 24.519734,0.0487 24.887735,0.0488 0.731168,0.0375 1.866566,-1.122312 1.866566,-1.702326 0,-0.672327 0.107946,-94.6527076 0.107946,-95.6856526 0.02867,-1.179608 -0.558899,-2.40000399 -1.801805,-2.40000399 -1.349504,0 -22.449008,0 -24.673512,0 -1.227345,-3.9e-5 -2.159581,0.99455099 -2.156339,2.43603199 0,1.510004 -0.01351,94.4348976 -0.01351,95.6007916 z" />
                </g>
              </svg>

              Text anhalten
          </span>
            <span id="read-stop">
              <svg width="15" height="15" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <path d="M10,10 L80,50 L10,90 L10,10" stroke="black" stroke-width="2" fill="#333" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>

              Text vorlesen</span>
          </div>
          <div class="readings">
            <header aria-label="Überschrift des Abschnitts">
              <h3 class="">
                Teilhabe und Inklusion
              </h3>
              <h4 class="">
                Ein Text zur Erklärung der Begriffe
              </h4>
            </header>
            <div class="inner">
              <p>Inklusion meint also die unbedingte Einbeziehung und Zugehörigkeit aller Menschen – unabhängig von bestimmten Merkmalen – zu sozialen und gesellschaftlichen Institutionen.
              <ul>
                <li>Solche Institutionen sind das <a href="https://de.wikipedia.org/wiki/Bildungssystem_in_Deutschland">allgemeine Bildungssystem</a>, der erste Arbeitsmarkt, es können aber auch Einrichtungen wie Freibäder oder Theater sein, die Allen offen stehen sollen.</li>
                <li>Dieses Verständnis von Inklusion hat einige Folgen:</li>
              </ul>
              <blockquote>Erstens verschiebt sich die Perspektive vom Individuum auf die Gesellschaft. Es sind die gesellschaftlichen Institutionen, die sich öffnen und an die individuellen Bedürfnisse der Menschen anpassen müssen. Hierfür müssen institutionelle, räumliche und soziale Barrieren abgebaut werden. Eine institutionelle Barriere war bis 2017 der Ausschluss vom allgemeinen Wahlrecht von Personen, die unter Betreuung in allen Angelegenheiten standen. Dieser hatte dazu geführt, dass über 80000 Menschen, vor allem Menschen mit kognitiven Beeinträchtigungen, nicht wählen konnten. Eine soziale Barriere liegt vor, wenn Menschen mit Behinderung im sozialen Alltagsleben diskriminiert werden, und sei es nur mit mitleidigen Blicken oder abwertenden Bemerkungen.
              </blockquote>
            </div>
          </div>

          <div class="credits">
            <p class="small">
                Ein Auszug aus dem Text <a href="https://www.bpb.de/themen/inklusion-teilhabe/behinderungen/521497/teilhabe-und-inklusion/">Teilhabe und Inklusion</a> von Dieter Kulke. Lizenz: CC BY-NC-ND 4.0.
            </p>
            <p class="small">
                Eine Demo für eine einfache Vorlesefunktion. Erstellt von <a href="https://3plusx.io">3plusx</a>, 2025, Audio generiert unter Benutzung von <a href="https://www.thorsten-voice.de/">Thorsten Voice</a>. Quellcode auf <a href="https://github.com/3plusx/tts-demo">GitHub</a>,
                UI basierend auf <a href="https://get.foundation/">Foundation</a>.
            </p>
          </div>
       </div>
    </div>

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/what-input/dist/what-input.js"></script>
    <script src="node_modules/foundation-sites/dist/js/foundation.js"></script>
    <script src="js/app.js" type="module"></script>
  </body>
</html>