Kleiner JavaScript Kurs
Audio / Video
Audio
Musikdateien können mit dem HTML - Tag audio wiedergegeben werden:
<body>
<audio id="myAudio" controls preload="none">
<source id="quelle" src='gibmirsonnerosenstolz.mp3' type="audio/mpeg" />
</audio>
</body>Wenn wir ein file - Steuerelement hinzufügen entsteht ein mp3 - Player (auch für lokale MP3 Dateien)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MP3 Player</title>
</head>
<body>
<input type="file" id="typeFile"
accept="audio/*"><br>
<audio id="myAudio" controls preload="none">
<source id="quelle" src="" type="audio/mpeg" />
</audio>
</body>
<script>
var mp3Player=document.getElementById("myAudio");
var quelle=document.getElementById("quelle");
var eingabeFile=document.getElementById("typeFile");
eingabeFile.addEventListener("change", ausgabefeldFile);
function ausgabefeldFile(){
var datei= eingabeFile.files[0];
//alert(datei);
quelle.src=URL.createObjectURL(datei);
//alert(radioQuelle.src);
mp3Player.load();
}
</script>
</html>(da das Programm aus Sicherheitsgründen auf vielen Servern nicht läuft, hier eine Version zum Download:
)
So könnte ein Radiowecker, der mit Radio - Streams weckt, aussehen: Internet- Radiowecker (da das Programm aus Sicherheitsgründen auf vielen Servern nicht läuft, hier eine Version zum Download: )
Hier die HTML-Seite mit dem kompletten Programm
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#uhrzeit{
background-color: yellow;
font-size: 400%;
letter-spacing: 4px;
}
select{
font-size: 125%;
}
</style>
</head>
<body style="background-color: #c0c0c0">
<div style="text-align: center">
<div><div>Uhrzeit:</div> <span id="uhrzeit"></span></div>
<h3><span>Weckzeit: <select id="stunden"></select> Stunden</span> <span><select id="minuten"></select> Minuten</span><br>
<span>Radiosender: <select id="sender"></select></span>
<figure>
<figcaption></figcaption>
<audio id="myAudio" controls preload="none">
<source id="quelle" src='https://ndr-ndr2-niedersachsen.cast.addradio.de/ndr/ndr2/niedersachsen/mp3/128/stream.mp3' type="audio/mpeg" />
</audio>
</figure>
</h3>
</div>
</body>
<script>
var weckerAn;
var weckZeitStundenWert, weckZeitMinutenWert;
var lautstaerke;
var uhr={schriftfarbe: "#ff0000", hintergrundfarbe: "#000000",
stunden: function(){
var std=new Date().getHours();
if(std<10){std="0"+std};
return std
},
minuten: function(){
var min=new Date().getMinutes();
if(min<10){min="0"+min};
return min
},
sekunden: function(){
var sek=new Date().getSeconds();
if(sek<10){sek="0"+sek};
return sek
},
}
var zeitAnzeige=document.getElementById("uhrzeit");
zeitAnzeige.style.color=uhr.schriftfarbe;
zeitAnzeige.style.backgroundColor=uhr.hintergrundfarbe;
var ddStunden=document.getElementById("stunden");
for(var i=0; i<24; i++){
if(i<10){ddi="0" + i}else{ddi=i}
ddStunden[i]=new Option(ddi);
}
var ddMinuten=document.getElementById("minuten");
for(var j=0; j<60; j++){
if(j<10){ddj="0" + j}else{ddj=j}
ddMinuten[j]=new Option(ddj);
}
function uhrzeit(){
var aktUhrzeit=uhr.stunden() + ":" + uhr.minuten() + ":" + uhr.sekunden();
zeitAnzeige.innerHTML=aktUhrzeit;
if(weckZeitStundenWert==uhr.stunden() && weckZeitMinutenWert==uhr.minuten() && weckerAn){
radioHoeren();
//alert("Wecker!!!");
weckerAn=false;
}
}
var aktualisieren=window.setInterval(uhrzeit, 1000);
var weckZeitStunden=document.getElementById("stunden");
weckZeitStunden.addEventListener("change", wecken);
var weckZeitMinuten=document.getElementById("minuten");
weckZeitMinuten.addEventListener("change", wecken);
function wecken(){
weckerAn=true;
lautstaerke=0.1;
weckZeitStundenWert=weckZeitStunden.options[weckZeitStunden.selectedIndex].text;
//alert(weckZeitStundenWert);
weckZeitMinutenWert=weckZeitMinuten.options[weckZeitMinuten.selectedIndex].text;
//alert(weckZeitMinutenWert);
}
//alert(aktUhrzeit);
var sender = [
{
freq: '???',
title: "NDR 2 Niedersachsen",
src: 'http://icecast.ndr.de/ndr/ndr2/niedersachsen/mp3/128/stream.mp3',
howl: null
},
{
freq: '???',
title: "NDR 1 Niedersachsen",
src: 'http://icecast.ndr.de/ndr/ndr1niedersachsen/hannover/mp3/128/stream.mp3',
howl: null
},
{
freq: '???',
title: "NDR Info Niedersachsen",
src: 'http://icecast.ndr.de/ndr/ndrinfo/niedersachsen/mp3/128/stream.mp3',
howl: null
},
{
freq: '???',
title: "N-JOY",
src: 'http://icecast.ndr.de/ndr/njoy/live/mp3/128/stream.mp3',
howl: null
},
{
freq: '???',
title: "Klassik Radio",
src: 'https://stream.klassikradio.de/live/mp3-192/select/?mode=preroll&aw_0_1st.skey=1620658179&cb=727390604',
howl: null
},
{
freq: '???',
title: "Klassik Radio Movie",
src: 'https://stream.klassikradio.de/movie/mp3-192/select/?mode=preroll&aw_0_1st.skey=1620658437&cb=927837561',
howl: null
},
{
freq: '???',
title: "weitere Sender in Arbeit",
src: '#',
howl: null
}];
//alert(sender[0].freq);
var ddSender=document.getElementById("sender");
for(var s=0; s<sender.length; s++){
ddSender[s]=new Option(sender[s].title);
}
var radioPlayer=document.getElementById("myAudio");
var radioQuelle=document.getElementById("quelle");
ddSender.addEventListener("change", neuerSender);
function radioHoeren(){
radioPlayer.volume=lautstaerke;
var tonLauter=window.setInterval(lauter, 10000);
radioPlayer.play();
}
function lauter(){
lautstaerke=lautstaerke+0.1;
radioPlayer.volume=lautstaerke;
if(lautstaerke>=0.9){window.clearInterval(tonLauter)}
}
function neuerSender(){
var senderIndex=ddSender.selectedIndex;
radioQuelle.src=sender[senderIndex].src;
radioPlayer.load();
}
</script>
</html>Sprachausgabe (text to speech)
Sprachausgabe über den Lautsprecher ist mit Hilfe der Speech Synthesis API möglich. Als erstes ein Test, ob es funktioniert. Die Internetseite enthält nur eine Überschrift und ein Script, dass einen Begrüßungstext als Sprache über den Lautsprecher ausgibt:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Sprachausgabe</h1>
<script>
// Neue Sprachausgabe ertellen
const sprachausgabe = new SpeechSynthesisUtterance();
sprachausgabe.text="Willkommen auf meiner Internetseite";
// Stimme wählen
const stimmen = speechSynthesis.getVoices();
sprachausgabe.voice = stimmen[0]; // Stimme "0" auswählen
// Text sprechen
speechSynthesis.speak(sprachausgabe);
</script>
</body>
</html>
Die Stimmen unterscheiden sich von Browser zu Browser. Höre Dir mal eine andere Stimme an (indem du ein anderes Element aus der Liste stimmen[] auswählst)
Folgend Eigenschaften von SpeechSynthesisUtterance gibt es (Quelle: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance:
- SpeechSynthesisUtterance.lang
Sprache z.B. "en-US" für englisch oder "de-DE" für deutsch. - SpeechSynthesisUtterance.pitch
Tonhöhe; Kommazahl zwischen 0.1 und 2.0 - SpeechSynthesisUtterance.rate
Geschwindigkeit zwischen 0.1 und 10 - SpeechSynthesisUtterance.text
Der Text, der gesprochen werden soll - SpeechSynthesisUtterance.voice
Die Sprecher-Stimme. kann mit .getVoices() abgefragt werden - SpeechSynthesisUtterance.volume
Lautstärke zwischen 0 und 1.
Das Vokabelprogramm aus dem Array Kapitel wäre eine interessante Anwendung; der Computer liest einen Text vor, der in ein Input-Feld eingegeben werden soll (Diktat), oder übersetzt werden soll;
Video