MP3 Frame AudioPlayer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

MP3 Frame AudioPlayer

Scripte > Multimedia

Javascript Frame Audioplayer für mp3-Dateien

Mit diesem MP3 Frame Audio-Player kann man Audio-Dateien über Javascript steuern. Im Hintergrund kann eine Bilddatei egal welcher Größe eingefügt werden. Im Player wird das Bild beim abspielen von den Titel bewegt (verschoben), so dass Ausschnittweise das gesamte Bild angesehen werden kann. Jedem Musikstück kann ein eigens Bild hinterlegt werden. Lässt man daie Bilddatei weg, erscheint ein einfarbiger Hintergrund, der entsprechend in der CSS-Datei angepasst werden kann. Die Anzahl der Titel ist nicht begrenzt, so dass noch weitere Musikstücke gemäß Vorlage hinzugefügt werden können. Sämtliche Einstellungen für den Player erfolgen im Javascript-Code im HEAD-Breich, wie Audiotitel, Audiodatei, Breite und Höhe des Players. Die Parameter sind entsprechend gekennzeichnet.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufenden Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
Download Button
x runter geladen
Funktionen:
  • Auswahlliste für die Audiodateien
  • Lautstärke und Optionen, Lautstärkeregler (10 Stufen)
  • Anzeige Aktuelle Abspielzeit / Gesamte Abspielzeit (in Sekunden)

  • Fortschrittsbalken - Aktuelle Abspielzeit
  • Autom. Speicherung von Musikauswahl, Abspielzeit
  • Bewegte Hintergrundbilder für den Player (Optional)
  • Button zum abspielen:
Wiedergabe
  • Button zum pausieren:
Pause
  • Automatische Wiedergabe:
Beginnt automatisch mit dem nächsten Titel
  • Zufällige Wiedergabe:
Wählt den Musiktitel zufällig aus
  • Musiktitel wiederholen:
Der Musiktitel wird fortlaufend wiederholt
  • Button für die nächsten
Musiktitel
  • Button für die vorherigen
Musiktitel
  • Button 10 Sekunden im Musiktitel
vorspringen
  • Button 10 Sekunden im Musiktitel
zurückspringen
  • Langsame Wiedergabe:

  • Normale Wiedergabe:

  • Schnelle Wiedergabe:

 
Aufruf im Popup-Fenster:
Audio-Player anzeigen
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj121_0/player.css"/>
<script>
"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);
</script>
Code für den <BODY> Bereich
<table id="mBox">
<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>
</table>

Aufruf im Popup-Fenster:
<script>
function oeffneAudio() {
   window.open("wsX5Obj/Obj121_0/player.html", "audio", "width=380, height=230, left=200, top=300");
}
</script>
<a href="javascript:oeffneAudio()">Audio-Player anzeigen</a>
Code Datei "player.css"
table#mBox {
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;
}
@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#mBox td { padding: 5px; }
input#volume { width: 60%; vertical-align: middle; border-radius: 0px; }
input[type="button"].button {
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;
}
input[type="checkbox"] { display: none; }
input[type="button"].button:hover { color: #FFD700; border: 1px solid #FFD700; box-shadow: inset 0px -5px 5px #FFF; }
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: #000; color: #FFD700; }
select#playlist option:nth-child(odd) { background-color: #000; color: #FFF; }
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: #FFF;
box-shadow: inset 0px 5px 20px 4px #FFD700;
text-shadow: 1px 1px 0px #555;
}
td#progressbar { border-radius: 4px; padding: 0px; }

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt