diedVIPs

html knowhow

Sprache in Text umwandeln




Sprache in Text umwandeln

So sieht´s aus
Quellcode
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style type="text/css">
h1 { font-size:1.6rem; }
h2 { font-size:1.4rem; }
h3 { font-size:1.4rem; }
h4 { font-size:1.2rem; }
#calcform {padding:20px; background:#eee8d5; border:1px solid #eee; border-radius:7px; width:600px;}
#calcform button>i {vertical-align:middle;}
#text { font-size:20px; }
.btn-light {background:#eee8d5; border-color:unset; border-color:#eee8d5; }
.btn-light:hover, .btn-light:focus {background:#ded8c5; border-color:unset; border-color:#eee8d5; }
</style>
</head>

<body>
<form id="calcform">
<div id="topbar" class="btn-group mb-2">
<button type="button" onclick="playbtn()" id="play" class="btn btn-light"><i class="material-icons">mic_none</i> Aufnahme</button>
<button type="button" onclick="zoomin()" title="Zoom In" class="btn btn-light"><i class="material-icons">zoom_in</i></button>
<button type="button" onclick="zoomout()" title="Zoom Out" class="btn btn-light"><i class="material-icons">zoom_out</i></button>
<button type="button" id="full" title="Fullscreen" onclick="OnFullscreen()" class="btn btn-light"><i class="material-icons">fullscreen</i></button>
<button type="button" onclick="select()" title="Select all" class="btn btn-light"><i class="material-icons">select_all</i></button>
<button type="reset" onclick="clear()" title="Clear" class="btn btn-light"><i class="material-icons">clear</i></button>
</div>
<div class="form-group">
<textarea rows="10" id="text" spellcheck="true" class="form-control"></textarea></td>
</div>
<div class="form-group mt-2">
<button type="button" title="Share" class="btn btn-light" onclick="OnShare()">
<img src="https://www.rapidtables.com/lib/icons/material/svg/share_black_24dp.svg" loading="lazy" width="24" height="24" alt=""> Share</button>
<select id="langsel" class="form-control mt-2" onchange="OnLangListChange()"></select>
</div>
</form>


<script src="https://www.rapidtables.com/lib/FileSaver.js-master/FileSaver.js" defer></script>
<script>
"use strict";
var isfullscreen=false;
var recognition;
var play=false;
var fontsize=20;
const txtElem=document.getElementById("text");
const playElem=document.getElementById("play");
const fullElem = document.getElementById("full");
const langselElem = document.getElementById("langsel");
window.addEventListener("DOMContentLoaded",function() {
populateLangList();
var p = GetURLParams();
if( Object.keys(p).length>0 && p.txt!="" ) {
txtElem.value = decodeURIComponent(p.txt)+"\n\n"+area.value; }
var SpeechRecognition = (SpeechRecognition || webkitSpeechRecognition || mozSpeechRecognition || msSpeechRecognition);
var SpeechGrammarList = window.SpeechGrammarList || webkitSpeechGrammarList;
var SpeechRecognitionEvent = window.SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
if( !SpeechRecognition ) {
alert("Speech recognition is not supported. Please use Chrome browser.");
return; }
recognition = new SpeechRecognition();
recognition.lang = navigator.languages[0]; //'en-US';
recognition.continuous = false;
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.onresult = function(event) {
var txt=event.results[0][0].transcript;
txt = txtElem.value+" "+txt;
txtElem.value=txt;
console.log('You said: ', event.results[0][0].transcript); };
recognition.onend = function() {
recognition.stop();
if( play )
recognition.start(); }
txtElem.focus(); });
function populateLangList() {
const languageNames = new Intl.DisplayNames(['en'], {type: 'language'});
for(var i=0; i<navigator.languages.length; i++) {
var option = document.createElement("option");
var lang=navigator.languages[i];
option.text = languageNames.of(lang);
option.value = lang;
langselElem.appendChild(option); } }
function GetURLParams()
{ var url=window.location.href;
var regex = /[?&]([^=#]+)=([^&#]*)/g,
params = {},
match;
while(match = regex.exec(url)) {
params[match[1]] = match[2]; }
return params; }
function OnLangListChange() {
var i=langselElem.selectedIndex;
recognition.lang = navigator.languages[i]; }
function playbtn() {
if( play ) {
recognition.abort();
playElem.innerHTML="<i class=\"material-icons\">mic_none</i> Aufnahme";
play=false;
playElem.style.setProperty("background","#eee8d5");
txtElem.focus(); }
else {
playElem.innerHTML="<i class=\"material-icons\">mic</i> Stopp";
play=true;
recognition.start();
playElem.style.setProperty("background","#ff8080"); } }
function select() { txtElem.select(); }
function clear() { txtElem.value=""; }
function zoomout()
{ fontsize/=1.1;
var size=Math.round(fontsize)+"px";
txtElem.style.fontSize=size; }
function zoomin()
{ fontsize*=1.1;
var size=Math.round(fontsize)+"px";
txtElem.style.fontSize=size; }
function getShareData()
{ var txt=window.getSelection().toString();
if( txt=="" ) txt=txtElem.value;
var url="http://htmlknowhow.de/Sprache in Text umwandeln.html"+encodeURIComponent(txt);
if( url.length>=16384 ) {
url=url.substring(0,16384);
alert("The URL length is limited to 16384"); }
return { txt:txt, url:url }; }
function OnShare()
{ if(navigator.share) {
var data=getShareData();
navigator.share({
title: "My notes",
text: data.txt,
url: data.url })
.then(() => console.log('Successful share'))
.catch(error => console.log('Error sharing:', error)); } }
function OnCopy()
{ if( typeof navigator.clipboard==="object")
if( typeof navigator.clipboard.writeText==="function")
{ navigator.clipboard.writeText(txtElem.value); }
else { txtElem.select(); document.execCommand("copy"); } }
function OnSave()
{ fileSave("mytext.txt"); }
function fileSave(filename)
{ var txt=txtElem.value;
if( txt=="" ) return;
var blob = new Blob([txt], {type: "text/plain;charset=utf-8"});
saveAs(blob, filename); }
function FullscreenReq()
{ if(calcform.requestFullscreen)
calcform.requestFullscreen();
else if(calcform.mozRequestFullScreen)
calcform.mozRequestFullScreen();
else if(calcform.webkitRequestFullscreen)
calcform.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
else if(calcform.msRequestFullscreen)
calcform.msRequestFullscreen(); }
function OnFullscreen()
{ if( !isfullscreen ) {
console.log("enter");
isfullscreen=true;
fullElem.innerHTML="<i class=\"material-icons\">fullscreen_exit</i>";
FullscreenReq();
calcform.style.setProperty("height", "100vh");
txtElem.style.setProperty("height", "70vh");
setTimeout(function() {
document.addEventListener('fullscreenchange', OnFullscreen);
}, 1000); }
else { console.log("exit");
isfullscreen=false;
fullElem.innerHTML="<i class=\"material-icons\">fullscreen</i>";
document.exitFullscreen();
calcform.style.setProperty("height", "unset");
txtElem.style.setProperty("height", "unset");
document.removeEventListener('fullscreenchange', OnFullscreen); } }
</script>
</body>

</html>








Kontakt    Datenschutz    Impressum