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.
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)
| ► | Wiedergabe | ||
| ⏸ | Pause | ||
| ⎋ | Beginnt automatisch mit dem nächsten Titel | ||
| ⌘ | Wählt den Musiktitel zufällig aus | ||
| ↻ | Der Musiktitel wird fortlaufend wiederholt | ||
| ⏭ | Musiktitel | ||
| ⏮ | Musiktitel | ||
| ⏵ | vorspringen | ||
| ⏴ | zurückspringen | ||
| ⪨ | |||
| ⪧ | |||
| ⪩ |
|
Aufruf im Popup-Fenster:
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 1txt[0] = "Demo Ewigkeit"; // Audio-Titelfile[0] = "wsX5Obj/Obj121_0/files/demo-ewigkeit.mp3"; // Audio-Dateiimg[0] = "wsX5Obj/Obj121_0/img/natur_01.jpg"; // Bild-Datei (Optional)// Audiodatei 2txt[1] = "Demo Hollydays";file[1] = "wsX5Obj/Obj121_0/files/demo-holydays_in_agony.mp3";img[1] = "wsX5Obj/Obj121_0/img/natur_02.jpg";// Audiodatei 3txt[2] = "Demo Kalaschnikow";file[2] = "wsX5Obj/Obj121_0/files/demo-kalaschnikow.mp3";img[2] = "wsX5Obj/Obj121_0/img/natur_03.jpg";// Audiodatei 4txt[3] = "Demo Techno";file[3] = "wsX5Obj/Obj121_0/files/demo-techno.mp3";img[3] = "wsX5Obj/Obj121_0/img/natur_04.jpg";// Audiodatei 5txt[4] = "Demo The Wait";file[4] = "wsX5Obj/Obj121_0/files/demo-the_wait.mp3";img[4] = "wsX5Obj/Obj121_0/img/natur_05.jpg";// Audiodatei 6txt[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ügenfunction 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]);
}
}// Wiedergabefunction 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);
}// Pausefunction pauseObj121() {
MusicObj121.pause();document.getElementById("mBox").style.animationPlayState = "paused";window.clearInterval(aktiv);
}// Zufällge Audiodateifunction 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();
}// Auswahllistefunction changeObj121() {
var pd = (!MusicObj121.paused) ? true : false;MusicFile(document.getElementById("playlist").selectedIndex);if (pd) playObj121();
}// Lautstärkefunction volumeObj121() {
MusicObj121.volume = document.getElementById("volume").value;document.getElementById("volume").title = "Lautstärke " +document.getElementById("volume").value * 10;
}// Vorherige Audiodateifunction 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 Audiodateifunction 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ückfunction backwardObj121() {MusicObj121.currentTime -= 10.0; setTime();}// Audiodatei 10 Sek. vorwärtsfunction forwardObj121() {MusicObj121.currentTime += 10.0; setTime();}// Audiodatei an den Anfangfunction rewindObj121() {MusicObj121.currentTime = 0; setTime();}// Langsame Wiedergabefunction slowObj121() {MusicObj121.playbackRate -= 0.5;}// Normale Wiedergabefunction normObj121() {MusicObj121.playbackRate = 1;}// Schnelle Wiedergabefunction fastObj121() {MusicObj121.playbackRate += 0.5;}// Audiodatei wiederholenfunction loopObj121() {MusicObj121.loop = document.getElementById("loop").checked ? true : false;}// Automatische Wiedergabefunction 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 setzenfunction setTime() {
if (MusicObj121.readyState) {
var ct = Math.floor(MusicObj121.currentTime);var dn = Math.floor(MusicObj121.duration);document.getElementById("progress").innerHTML= " " + ct + " / " + dn;document.getElementById("progress").style.width = (ct / dn * 100) + "%";if (document.getElementById("autoplay").checked) autoplayObj121();
}
}// Audiodatei / Hintergrundbild auswählen und positionierenfunction 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 Audioplayerdocument.getElementById("mBox").style.height="180px"; // Höhe Audioplayerdocument.getElementById("mBox").style.backgroundPosition="top left"; // Bild Startposition
}
}// Status (in den localStorage) speichernfunction 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 setzenfunction 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 zuweisenwindow.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="►" id="play" title="Wiedergabe"><input type="button" class="button" value="⏸" id="pause" title="Pause"> <input type="checkbox" class="checkbox" id="autoplay"><label for="autoplay"
title="Automatische Wiedergabe Spielt autom. den nächsten Musiktitel ab.">⎋</label>
<input type="checkbox" class="checkbox" id="random"><label for="random" title="Zufällge Wiedergabe">⌘</label><input type="checkbox" class="checkbox" id="loop"><label for="loop"
title="Musiktitel wiederholen Den Musiktitel fortlaufend wiederholen">↻</label>
</td>
</tr><tr>
<td>
<input type="button" class="button" value="⏮" id="previous" title="Vorherigen Musiktitel"><input type="button" class="button" value="⏭" 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="⏴" id="backward"
title="Musiktitel - 10 Sekunden zurück Musiktitel-Anfang (Doppelklick!)">
<input type="button" class="button" value="⏵" id="forward" title="Musiktitel - 10 Sekunden vorwärts"><div id="speed"><input type="button" class="button" value="⪨" id="slow" title="Langsame Wiedergabe"><input type="button" class="button" value="⪧" id="norm" title="Normale Wiedergabe"><input type="button" class="button" value="⪩" 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 «