Audio-Player Demo Eigenschaften

Mit diesem Audio-Player kann man Audio-Dateien über JavaScript steuern.

Demo

▷ ⇆ ↻

Musik: "All Hallows Dream", "Afrika", "Lovely" Thomas Langen - https://reverbnation.com/thomaslangen/songs
Musik: "Street Party", "Man Down", "Hiding Your Reality", "Cheery Monday", "Smooth Lovin" - Kevin MacLeod (incompetech.com) Licensed under Creative Commons: By Attribution 3.0 http://creativecommons.org/licenses/by/3.0/

Eigenschaften

Auswahlliste für die Audiodateien.
Button zum abspielen (Wiedergabe) ► .
Button zum pausieren (Pause) ⌷⌷ .
Checkbox: Automatische Wiedergabe ▷ - Beginnt autom. mit der nächsten Audiodatei.
Checkbox: Zufällige Wiedergabe ⇆ - Wählt die Audiodatei zufällig aus.

Checkbox: Audiodatei wiederholen ↻ - Eine Audiodatei wird fortlaufend wiederholt.
Button für die nächste ⏷ oder vorherige ⏶ Audiodatei.
Lautstärkeregler (10 Stufen).
Button 10 Sekunden in der Audiodatei vor-. ⏴ oder zurückspringen ⏵ .
Fortschrittsbalken - Aktuelle Abspielzeit.
Anzeige: Aktuelle Abspielzeit / Gesamte Abspielzeit (in Sekunden).

Neu

Autom. Speicherung von Musikauswahl, Abspielzeit, Lautstärke und Optionen.
Bewegte Hintergrundbilder für den Player (Optional)

Quelltext: Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘ ◑


<!DOCTYPE html>

<html lang="de">

 <head>

  <meta charset="UTF-8">

  <title>Audio-Dateien steuern</title>



  <style>

  table#musikBox {

   color: #FFFFFF;

   background-color: #000000;

   background-position: Center Center;

   padding: 10px;

   margin: Auto;

   white-space: Nowrap;

   border: Solid 1px #000000;

   border-spacing: 12px;

   table-layout: Auto;

   outline: Solid 1px #FFD700;

   outline-offset: 10px;

   box-shadow: 0px 0px 10px 15px #535353;

   cursor: Default;

   -webkit-user-select: None;

   user-select: None;

  }



  @keyframes moveBg {

   11% {

    background-position: center left;

   }

   22% {

    background-position: center center;

   }

   33% {

    background-position: top left;

   }

   44% {

    background-position: top center;

   }

   55% {

    background-position: top right;

   }

   66% {

    background-position: center right;

   }

   77% {

    background-position: bottom right;

   }

   88% {

    background-position: bottom center;

   }

   99% {

    background-position: bottom left;

   }

  }



  table#musikBox td {

   padding: 5px;

  }



  input#volume {

   width: 60%;

   vertical-align: Middle;

   border-radius: 0px;

  }



  button[type="button"].button {

   color: #FFFFFF;

   background: rgba(0, 0, 0, 0.4);

   box-shadow: inset 0px 5px 5px #FFFFFF;

   border: Solid 1px #FFFFFF;

   padding: 1px 4px 1px 4px;

   transition: all 0.5s;

  }



  input[type="checkbox"] {

   display: None;

  }



  button[type="button"].button:hover {

   color: #FFD700;

   border: Solid 1px #FFD700;

   box-shadow: inset 0px -5px 5px #FFFFFF;

  }



  input[type="checkbox"].checkbox:checked + label {

   color: #FFD700;

  }



  label {

   font-size: 1.3rem;

   font-weight: Bold;

   transition: color 0.5s;

  }



  label:hover {

   color:#FFD700;

  }



  select#playlist option:nth-child(even) {

   background-color: #000000;

   color: #FFD700;

  }



  select#playlist option:nth-child(odd) {

   background-color: #000000;

   color: #FFFFFF;

  }



  div#speed {

   text-align: Center;

  }



  div#progress {

   width: 0%;

   height: 15px;

   margin: 0;

   border-radius: 5px;

   font-family: Arial, Sans-Serif;

   font-size: 0.75rem;

   color: #FFFFFF;

   box-shadow: inset 0px 5px 20px 4px #FFD700;

   text-shadow: 1px 1px 0px #555555;

  }



  td#progressbar {

   border-radius: 4px;

   padding: 0px;

  }

  </style>


  <script>
<script>
  /* Audio-Player
   * 16.03.2023
   * Werner-Zenk.de */

  "use strict";

  const txt = [];
  const file = [];
  const pic = [];
  const aktiv = false;

  // Audiodateien
  txt[0] = "Titeltext 1"; // Beschriftung
  file[0] = "audio/1.mp3"; // Audio - Dateiname
  pic[0] = "bilder/1.jpg"; // Bild - Dateiname (Optional)

  txt[1] = "Titeltext 2";
  file[1] = "audio/2.mp3";
  pic[1] = "bilder/2.jpg";

  txt[2] = "Titeltext 3";
  file[2] = "audio/3.mp3";
  pic[2] = "bilder/3.jpg";

  txt[3] = "Titeltext 4";
  file[3] = "audio/4.mp3";
  pic[3] = "bilder/4.jpg";

  txt[4] = "Titeltext 5";
  file[4] = "audio/5.mp3";
  pic[4] = "bilder/5.jpg";

  txt[5] = "Titeltext 6";
  file[5] = "audio/6.mp3";
  pic[5] = "bilder/6.jpg";

  txt[6] = "Titeltext 7";
  file[6] = "audio/7.mp3";
  pic[6] = "bilder/7.jpg";

  txt[7] = "Titeltext 8";
  file[7] = "audio/8.mp3";
  pic[7] = "bilder/8.jpg";


  // Audiodateien in die Auswahlliste einfügen
  function loadMusic() {

   myFile(0);

   var myMusic = document.getElementById("myMusic");

   for (let z = 0; z < file.length; z++) {

    document.getElementById("playlist").options[z] = new Option((z + 1) + " " + txt[z], file[z]);

   }

  }

  // Wiedergabe
  function playMusic() {

   myMusic.play();

   document.getElementById("musikBox").style.animation= "moveBg 20s ease-in-out infinite alternate";

   const aktiv = window.setInterval("setTime()", 1000);

  }

  // Pause
  function pauseMusic() {

   myMusic.pause();

   document.getElementById("musikBox").style.animationPlayState = "paused";

   window.clearInterval(aktiv);

  }

  // Zufällge Audiodatei
  function randomMusic() {

   var rnd = Math.round(Math.random() * (file.length - 1));

   if (rnd == document.getElementById("playlist").selectedIndex) randomMusic();

   myFile(rnd);

   document.getElementById("playlist").selectedIndex = rnd;

   playMusic();

  }

  // Auswahlliste
  function changeMusic() {

   var pd = (!myMusic.paused) ? true : false;

   myFile(document.getElementById("playlist").selectedIndex);

   if (pd) playMusic();

  }

  // Lautstärke
  function volumeMusic() {

   myMusic.volume = document.getElementById("volume").value;

   document.getElementById("volume").title = "Lautstärke " +

    document.getElementById("volume").value * 10;

  }

  // Vorherige Audiodatei
  function previousMusic() {

   var pd = (!myMusic.paused) ? true : false;

   var sx = document.getElementById("playlist").selectedIndex;

   if (sx > 0) {

    sx--;

    document.getElementById("playlist").selectedIndex = sx;

    myFile(sx);

    if (pd) playMusic();

   }

   else {

    var sx = file.length - 1;

    document.getElementById("playlist").selectedIndex = sx;

    myFile(sx);

    if (pd) playMusic();

   }

  }

  // Nächste Audiodatei
  function nextMusic() {

   var pd = (!myMusic.paused) ? true : false;

   var sx = document.getElementById("playlist").selectedIndex;

   if (sx < file.length - 1) {

    sx++;

    document.getElementById("playlist").selectedIndex = sx;

    myFile(sx);

    if (pd) playMusic();

   }

   else {

    document.getElementById("playlist").selectedIndex = 0;

    myFile(0);

    if (pd) playMusic();

   }

  }

  // Audiodatei 10 Sek. zurück
  function backwardMusic() {

   myMusic.currentTime -= 10.0;

   setTime();

  }

  // Audiodatei 10 Sek. vorwärts
  function forwardMusic() {

   myMusic.currentTime += 10.0;

   setTime();

  }

  // Audiodatei an den Anfang
  function rewindMusic() {

   myMusic.currentTime = 0;

   setTime();

  }

  // Langsame Wiedergabe
  function slowMusic() {

   myMusic.playbackRate -= 0.5;

  }

  // Normale Wiedergabe
  function normMusic() {

   myMusic.playbackRate = 1;

  }

  // Schnelle Wiedergabe
  function fastMusic() {

   myMusic.playbackRate += 0.5;

  }

  // Audiodatei wiederholen
  function loopMusic() {

   myMusic.loop = document.getElementById("loop").checked ? true : false;

  }

  // Automatische Wiedergabe
  function autoplayMusic() {

   if (myMusic.currentTime >= myMusic.duration) {

    myMusic.currentTime = 0;

    if (document.getElementById("random").checked) {

     randomMusic();

    }

    else {

     var sx = document.getElementById("playlist").selectedIndex;

     if (sx < file.length - 1) {

      sx++;

      document.getElementById("playlist").selectedIndex = sx;

      myFile(sx);

      playMusic();

     }

     else {

      document.getElementById("playlist").selectedIndex = 0;

      myFile(0);

      playMusic();

     }

    }

   }

  }

  // Aktuelle Abspielzeit und Gesamte Abspielzeit setzen
  function setTime() {

   if (myMusic.readyState) {

    var ct = Math.floor(myMusic.currentTime);

    var dn = Math.floor(myMusic.duration);

    document.getElementById("progress").innerHTML= "&nbsp;" + ct + " / " + dn;

    document.getElementById("progress").style.width = (ct / dn * 100) + "%";

    if (document.getElementById("autoplay").checked) autoplayMusic();

   }

  }

  // Audiodatei / Hintergrundbild auswählen
  function myFile(nr) {

   document.getElementById("myMusic").src = file[nr];

   if (pic[nr] != "") {

    document.getElementById("musikBox").style.backgroundImage="url(" + pic[nr] + ")";

    document.getElementById("musikBox").style.backgroundPosition="bottom left";

   }

  }

  // Status (in den localStorage) speichern
  function saveStatus() {

   window.localStorage.setItem("playlistIndex", document.getElementById("playlist").selectedIndex);

   window.localStorage.setItem("autoplay", (document.getElementById("autoplay").checked ? "j" : "n"));

   window.localStorage.setItem("random", (document.getElementById("random").checked ? "j" : "n"));

   window.localStorage.setItem("loop", (document.getElementById("loop").checked ? "j" : "n"));

   window.localStorage.setItem("volume", document.getElementById("volume").value);

   window.localStorage.setItem("currentTime", myMusic.currentTime);

  }

  // Status (vom localStorage) laden und setzen
  function loadStatus() {

   if (window.localStorage.getItem("playlistIndex")) {

    document.getElementById("playlist").selectedIndex = window.localStorage.getItem("playlistIndex");

    myFile(document.getElementById("playlist").selectedIndex);

    if (window.localStorage.getItem("autoplay") == "j") document.getElementById("autoplay").checked = true;

    if (window.localStorage.getItem("random") == "j") document.getElementById("random").checked = true;

    if (window.localStorage.getItem("loop") == "j") document.getElementById("loop").checked = true;

    document.getElementById("volume").value = window.localStorage.getItem("volume");

    myMusic.volume = document.getElementById("volume").value;

    document.getElementById("volume").title = "Lautstärke " + document.getElementById("volume").value * 10;

    myMusic.currentTime = window.localStorage.getItem("currentTime");

    playMusic();

    pauseMusic(); // Kein Autostart!

   }

  }

  // Butttons eine JavaScript-Funktion zuweisen
  window.addEventListener("DOMContentLoaded", function() {

   document.getElementById("play").addEventListener("click", playMusic);

   document.getElementById("pause").addEventListener("click", pauseMusic);

   document.getElementById("loop").addEventListener("click", loopMusic);

   document.getElementById("playlist").addEventListener("change", changeMusic);

   document.getElementById("volume").addEventListener("input", volumeMusic);

   document.getElementById("previous").addEventListener("click", previousMusic);

   document.getElementById("next").addEventListener("click", nextMusic);

   document.getElementById("backward").addEventListener("click", backwardMusic);

   document.getElementById("backward").addEventListener("dblclick", rewindMusic);

   document.getElementById("forward").addEventListener("click", forwardMusic);

   document.getElementById("slow").addEventListener("click", slowMusic);

   document.getElementById("norm").addEventListener("click", normMusic);

   document.getElementById("fast").addEventListener("click", fastMusic);

   loadMusic();

   loadStatus();

  });

  window.addEventListener("unload", saveStatus);
  </script>



 </head>

<body>



<table id="musikBox">

 <tr>

  <td>

   <select id="playlist" title="Audiodatei auswählen"></select>

   <button type="button" class="button" id="play" title="Wiedergabe">&#9658;</button>

   <button type="button" class="button" id="pause" title="Pause">&#9015;&#9015;</button>&nbsp;

   <input type="checkbox" class="checkbox" id="autoplay"><label for="autoplay" title="Automatische Wiedergabe&#10;Spielt autom. die nächste Audiodatei ab.">&#9655;</label>

   <input type="checkbox" class="checkbox" id="random"><label for="random" title="Zufällge Wiedergabe">&#8646;</label>

   <input type="checkbox" class="checkbox" id="loop"><label for="loop" title="Audiodatei wiederholen&#10;Eine Audiodatei fortlaufend wiederholen">&#8635;</label>

  </td>

 </tr>

 <tr>

  <td>

   <button type="button" class="button" id="previous" title="Vorherige Audiodatei">&#9206;</button>

   <button type="button" class="button" id="next" title="Nächste Audiodatei">&#9207;</button>

   <input type="range" id="volume" value="0.7" min="0" max="1" step="0.1" title="Lautstärke 7">

   <button type="button" class="button" id="backward" title="Audiodatei - 10 Sekunden zurück&#10;Audiodatei-Anfang (Doppelklick!)">&#9204;</button>

   <button type="button" class="button" id="forward" title="Audiodatei - 10 Sekunden vorwärts">&#9205;</button>

   <div id="speed"><button type="button" class="button" id="slow" title="Langsame Wiedergabe">&#10920;</button>

   <button type="button" class="button" id="norm" title="Normale Wiedergabe">&#10919;</button>

   <button type="button" class="button" id="fast" title="Schnelle Wiedergabe">&#10921;</button></div>

   <audio id="myMusic"></audio>

  </td>

 </tr>

 <tr>

  <td id="progressbar">

   <div id="progress"></div>

  </td>

 </tr>

</table>



</body>

</html>

Audio-Player im Fenster aufrufen

<script>

function oeffneAudio() {
 window.open("audio.htm", "audio", "width=380, height=130, left=200, top=300");
}
</script>

<a href="javascript:oeffneAudio()">Audio-Player zeigen</a>

➤ Gefällt Ihnen das Skript oder haben Sie einen Fehler gefunden? Dann freue ich mich auf Ihren Kommentar.