MP3 Frame AudioPlayer - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Besucher Statistik
» 3 Online
» 63 Heute
» 132 Gestern
» 195 Woche
» 3426 Monat
» 27550 Jahr
» 313464 Gesamt
Record: 1144 (01.02.2020)
Gesamt Downloads:
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
Downloads:
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; }
Feedbacks zu ""

Harald Klugt

24.07.2015, 10:54

+0 -0  

Hallo,wie bekomme ich denn mehrere Songs auf mehreren Maxiplayern auf eine Seite? Muss ich neue Codes und Txt. ersellen? Funktioniert das ganze nur online, oder auch auf PC zu Hause? Ich benutze WebSite X5 Evolution 11.Wie man sieht, bin ich nicht sonderlich bewandert mit solchen Dingen... bitte geduldig sein.viele Grüße,H. Klugt

Reinhard Reschner

02.07.2015, 10:44

+0 -0  

Hallo,ich habe das Problem daß die Inhalte und die Dartstellung des Flashplayers nach einer Änderung im Firefox Browser nicht richtig angezeigt. http://warteschleifenparadies.at/onlinecd.htmlIch habe auch schon probiert mit F5 den Cache Speicher des Firefox zu löschen. Ich hätte gerne einen Screenshot mitgeschickt aber man kann keine Datei anhängen.Haben Sie von so einem Fehler schon gehört ? lgReinhard Reschner

Bernd Intveen

04.06.2013, 06:34

+0 -0  

Wie verändere ich denn die Textgrösse beim Multiplayer?

Die Textgröße kann nicht verändert werden, diese ist in der player_mp3_multi.swf festgeschrieben.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


          CAPTCHA
          Vielen Dank für Dein Feedback.
          Logo Host Europe
          Button Spenden

          © 2009 - 2021

          Hosting by
          Zurück zum Seiteninhalt