MP3 Frame AudioPlayer - Website X5 Helpsite

Javascript Frame Audioplayer für mp3-Dateien

"use strict";

const txt = new Array();

const file = new Array();

const img = new Array();

const aktiv = false;

// Audiodatei 1

txt[0] = "Demo Ewigkeit";                             // Audio-Titel

file[0] = "wsX5Obj/Obj121_0/files/demo-ewigkeit.mp3"; // Audio-Datei

img[0] = "wsX5Obj/Obj121_0/img/natur_01.jpg";         // Bild-Datei (Optional)

// Audiodatei 2

txt[1] = "Demo Hollydays";

file[1] = "wsX5Obj/Obj121_0/files/demo-holydays_in_agony.mp3";

img[1] = "wsX5Obj/Obj121_0/img/natur_02.jpg";

// Audiodatei 3

txt[2] = "Demo  Kalaschnikow";

file[2] = "wsX5Obj/Obj121_0/files/demo-kalaschnikow.mp3";

img[2] = "wsX5Obj/Obj121_0/img/natur_03.jpg";

// Audiodatei 4

txt[3] = "Demo Techno";

file[3] = "wsX5Obj/Obj121_0/files/demo-techno.mp3";

img[3] = "wsX5Obj/Obj121_0/img/natur_04.jpg";

// Audiodatei 5

txt[4] = "Demo The Wait";

file[4] = "wsX5Obj/Obj121_0/files/demo-the_wait.mp3";

img[4] = "wsX5Obj/Obj121_0/img/natur_05.jpg";

// Audiodatei 6

txt[5] = "Demo Waydown";

file[5] = "wsX5Obj/Obj121_0/files/demo-waydown.mp3";

img[5] = "wsX5Obj/Obj121_0/img/natur_06.jpg";

// Audiodateien in die Auswahlliste einfügen

function loadObj121() {

MusicFile(0);

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

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

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

}

}

// Wiedergabe

function playObj121() {

MusicObj121.play();

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

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

//    document.getElementById("mBox").classList.add("discoStart");

//   }

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

}

// Pause

function pauseObj121() {

MusicObj121.pause();

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

window.clearInterval(aktiv);

}

// Zufällge Audiodatei

function randomObj121() {

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

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

MusicFile(rnd);

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

playObj121();

}

// Auswahlliste

function changeObj121() {

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

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

if (pd) playObj121();

}

// Lautstärke

function volumeObj121() {

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

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

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

}

// Vorherige Audiodatei

function previousObj121() {

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

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

if (sx > 0) {

sx--;

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

MusicFile(sx);

if (pd) playObj121();

} else {

var sx = file.length - 1;

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

MusicFile(sx);

if (pd) playObj121();

}

}

// Nächste Audiodatei

function nextObj121() {

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

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

if (sx < file.length - 1) {

sx++;

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

MusicFile(sx);

if (pd) playObj121();

} else {

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

MusicFile(0);

if (pd) playObj121();

}

}

// Audiodatei 10 Sek. zurück

function backwardObj121() {MusicObj121.currentTime -= 10.0; setTime();}

// Audiodatei 10 Sek. vorwärts

function forwardObj121() {MusicObj121.currentTime += 10.0; setTime();}

// Audiodatei an den Anfang

function rewindObj121() {MusicObj121.currentTime = 0; setTime();}

// Langsame Wiedergabe

function slowObj121() {MusicObj121.playbackRate -= 0.5;}

// Normale Wiedergabe

function normObj121() {MusicObj121.playbackRate = 1;}

// Schnelle Wiedergabe

function fastObj121() {MusicObj121.playbackRate += 0.5;}

// Audiodatei wiederholen

function loopObj121() {MusicObj121.loop = document.getElementById("loop").checked ? true : false;}

// Automatische Wiedergabe

function autoplayObj121() {

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

MusicObj121.currentTime = 0;

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

randomObj121();

} else {

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

if (sx < file.length - 1) {

sx++;

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

MusicFile(sx);

playObj121();

} else {

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

MusicFile(0);

playObj121();

}

}

}

}

// Aktuelle Abspielzeit und gesamte Abspielzeit setzen

function setTime() {

if (MusicObj121.readyState) {

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

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

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

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

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

}

}

// Audiodatei / Hintergrundbild auswählen und positionieren

function MusicFile(nr) {

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

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

document.getElementById("mBox").style.backgroundImage="url(" + img[nr] + ")";

document.getElementById("mBox").style.width="300px";                 // Breite Audioplayer

document.getElementById("mBox").style.height="180px";                // Höhe Audioplayer

document.getElementById("mBox").style.backgroundPosition="top left"; // Bild Startposition

}

}

// 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", MusicObj121.currentTime);

}

// Status (vom localStorage) laden und setzen

function loadStatus() {

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

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

MusicFile(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");

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

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

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

playObj121();

pauseObj121(); // Kein Autostart!

}

}

// Butttons eine Javaccript-Funktion zuweisen

window.addEventListener("DOMContentLoaded", function() {

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

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

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

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

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

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

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

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

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

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

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

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

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

loadObj121();

loadStatus();

});

window.addEventListener("unload", saveStatus);

<tr>

<td>

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

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

<input type="button" class="button" value="&#9208;" id="pause" title="Pause">&nbsp;

<input type="checkbox" class="checkbox" id="autoplay"><label for="autoplay"

title="Automatische Wiedergabe&#10;Spielt autom. den nächsten Musiktitel ab.">&#9099;</label>

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

<input type="checkbox" class="checkbox" id="loop"><label for="loop"

title="Musiktitel wiederholen&#10;Den Musiktitel fortlaufend wiederholen">&#8635;</label>

</td>

</tr>

<tr>

<td>

<input type="button" class="button" value="&#9198;" id="previous" title="Vorherigen Musiktitel">

<input type="button" class="button" value="&#9197;" id="next" title="Nächsten Musiktitel">

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

<input type="button" class="button" value="&#9204;" id="backward"

title="Musiktitel - 10 Sekunden zurück&#10;Musiktitel-Anfang (Doppelklick!)">

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

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

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

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

<audio id="MusicObj121"></audio>

</td>

</tr>

<tr>

<td id="progressbar">

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

</td>

</tr>

function oeffneAudio() {

   window.open("wsX5Obj/Obj121_0/player.html", "audio", "width=380, height=230, left=200, top=300");

}

color: #FFF;

background-color: #000;

background-position: center center;

padding: 10px;

margin: 20px;

white-space: nowrap;

border: 1px solid #000;

border-spacing: 12px;

table-layout: auto;

outline: 1px solid #FFD700;

outline-offset: 10px;

box-shadow: 0px 0px 10px 15px #7C6038;

cursor: default;

-webkit-user-select: none;

user-select: none;

}

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; }

}

color: #FFF;

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

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

border: 1px solid #FFF;

padding: 1px 4px 1px 4px;

transition: all 0.5s;

}

width: 0%;

height: 15px;

margin: 0;

border-radius: 5px;

font-family: Arial, Sans-Serif;

font-size: 0.75rem;

color: #FFF;

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

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

}