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>Video