Hallo Wolfgang, ich habe hier im Forum keinen Audio-Player gesehen. Da dachte ich, ich bastele mal einen.
Er ist schlicht und sehr einfach zu bedienen. (Wählen Sie ein Lied aus. Klicken Sie auf eine beliebige Stelle, um einen Song auszuwählen.) Man kann dann direkt vom PC seine Musik laden.
Ich habe es mal spaßeshalber auf "Eigene Seiten" im Testforum eingefügt. Was mir nur spanisch vorkommt ist, ich habe die CSS eingefügt, keine Veränderung am Style im Forum, sonst war immer alles verzerrt. Ich dachte oh gut, aber auf "Eigene Seite" grauenhaft.
Laden und abspielen kann man die Musik, sieht auch grauenhaft aus. Ein Leihe weiß nicht, wo er klicken muss, da der Player die Symbole nicht anzeigt und die Texte sind voll zusammengewürfelt. Sieht grausam aus.
<script id="rendered-js"> var fileInput = document.getElementById("player-file"); var audioPlayer = document.getElementById("player-audio"); var progressBarColor = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUpgLkZ2NPWAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=="; var progress = document.getElementById("progress");
function setData(file) { var artBG = document.getElementById('art-bg'); var albumArt = document.getElementById('album-art'); var artist = document.getElementById("artist"); var title = document.getElementById("title"); var controls = document.getElementById("controls"); var progress = document.getElementById("progress");
musicmetadata(file, function (err, result) { if (err) return console.error(err);
document.body.addEventListener("click", function (evt) { fileInput.click(); }, { once: true });
fileInput.addEventListener("change", function (evt) { if (fileInput.files && fileInput.files[0]) { var song = fileInput.files[0]; audioPlayer.src = window.URL.createObjectURL(song);
setData(song); } }, false);
audioPlayer.addEventListener("pause", function () { document.getElementById("playpause").innerHTML = "play_circle_filled"; }, false);
audioPlayer.addEventListener("play", function () { document.getElementById("playpause").innerHTML = "pause_circle_filled"; }, false);
Meine Idee war es den Player auf "Eigene Seiten" anzeigen zu lassen oder als Foren-Code oder BB - Code. Ich selbst bekomme es nicht umgeschrieben, da bin ich auf Hilfe von anderen angewiesen, die das können. Sie können auch noch ihre Ideen damit einfügen, gemeinsam sind wir stark und ein starkes Team.
Ich denke so wie es aussieht, müssen die CSS - Tags geändert werden, dass die Ansicht im Xobor - Forum sauber ist.
Ich hoffe das ich es soweit richtig umgeschrieben habe, dass der BB code soweit richtig ist. Habe mich mal ran gewagt. Ich hoffe, dass es so richtig ist, ist nur in HTML umgeschrieben.
Es sieht jetzt schon etwas besser aus, nicht mehr so zusammengewürfelt, habe die CSS trotzdem eingefügt, aber zeigt immer noch nicht perfekt an.
Hier, so sieht es jetzt aus:
Sieht schon etwas besser aus und soweit funktioniert er auch.
Ich habe es mal mit HTML in Iconbar eingefügt. Na ja, ich bin ja nicht der Beste, aber habe es irgendwie hinbekommen. Ich bin ein Anfänger, irgendwo ist hier voll der Wurm drin und ich weiß nicht wo.
Jetzt nichts mehr tun, habe versucht mich an die Materie ranzuwagen, aber ich denke, ich werde hier noch viele Fehler drinnen haben.
Hallo Daishi, mal wieder besten Dank für das Skript!
Habe es hinbekommen!
Als erstes musste ich im Forum den "body" und alle "flex-Einstellungen" erstmal löschen, damit ich den Player überhabt sehen und testen konnte! Dann wurde nicht die Player-Konsole, wie im CodePen angezeigt, sondern eine Beschreibungen für die Bedienungs-Button, sehr unschön ("skip_previous, play_circle_filled, skip_next"). Sonst läuft der Player echt Klasse! Top! Um den Player richtig nutzen zu können, ohne das er stört, fehlt ein Ende-Button und ein Button zum Minimieren! Die nächsten Fragen stellten sich, wie rufe ich den Player auf und wo soll der Start-Button platziert werden!
Was kann das abgeänderte Skript?
Der Player wird durch einen Klick auf eine Lautsprecher-Grafik links aufgerufen! Der Button ist fixiert und somit auch beim Scrollen der Seite immer anklickbar!
Beim Anklicken, wird gleich das Verzeichnis geöffnet und ein Musiktitel kann ausgesucht werden!
Für die Text-Beschreibungen der Player-Elemente sind Grafik-Button gesetzt worden!
Rechts oben im Player gibt es ein Beenden-Button und einen zum Minimieren!
Der CSS-Eintrag und das Skript können in die Fußzeile oder besser als PIugin in "Untere Leiste - header" kopiert! werden
Wichtig! Im Plugin müssen rechts oben "Unterstützte Templates" markiert werden, z.B.: Business - Template (144) (Auswahl mit Mausklick oder Strg + Mausklick)!
In Zeile 201 steckt der Auslöse-Button zum Aufrufen des Players
In Zeile 206 sind die dazu gekommenen Exit- Button und der Button zum Minimieren!
In Zeile 211-213 stecken die neuen Player-Button!
In Zeile 244 steckt das Player-Skript und ist für den Funktionsablauf notwendig!
<script src="https://cdnjs.cloudflare.com/ajax/libs/musicmetadata/2.0.2/musicmetadata.min.js"></script> <script> function playerforum() { var fileInput = document.getElementById("player-file"); var audioPlayer = document.getElementById("player-audio"); var progressBarColor = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUpgLkZ2NPWAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg=="; var progress = document.getElementById("progress");
function setData(file) { var artBG = document.getElementById('art-bg'); var albumArt = document.getElementById('album-art'); var artist = document.getElementById("artist"); var title = document.getElementById("title"); var controls = document.getElementById("controls"); var progress = document.getElementById("progress");
musicmetadata(file, function (err, result) { if (err) return console.error(err);
document.body.addEventListener("click", function (evt) { fileInput.click(); }, { once: true });
fileInput.addEventListener("change", function (evt) { if (fileInput.files && fileInput.files[0]) { var song = fileInput.files[0]; audioPlayer.src = window.URL.createObjectURL(song);
setData(song); } }, false);
audioPlayer.addEventListener("pause", function () { document.getElementById("playpause").innerHTML = '<img width="50px;"src="https://files.homepagemodules.de/b104774/a_479_ea974b22.png">'; }, false);