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: MP3 Player)

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: Internet Radio-Wecker)

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: 'https://ndr-ndr2-niedersachsen.cast.addradio.de/ndr/ndr2/niedersachsen/mp3/128/stream.mp3',
            howl: null
         },
        {
            freq: '???',
            title: "NDR 1 Niedersachsen",
            src: 'http://ndr-ndr1niedersachsen-hannover.cast.addradio.de/ndr/ndr1niedersachsen/hannover/mp3/128/stream.mp3',
            howl: null
         },  
         {
            freq: '???',
            title: "NDR Info Niedersachsen",
            src: 'http://ndr-ndrinfo-niedersachsen.cast.addradio.de/ndr/ndrinfo/niedersachsen/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

Ist in Arbeit