Audio Integration in Joomla
–––––––––––––––––––––––––––––––––––––––––––––
https://jonasreinsch.de/index.php/audio-test
–––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––
1)
Audio Dateien in Joomla zulassen: System/ Konfiguration/ Inhalt:Medien/ Erlaubte Dateitypen "audio/mpeg" und ggf. "application/octet-stream" mit Komma getrennt hinzufügen
2)
Audio Plugin von https://www.marcobeierer.com/joomla-extensions/html5-audio downloaden und in Joomla installieren
3)
Plugin aktivieren
4)
Plugin PHP bearbeiten (dem audio-container eine ID geben und Playback-Rate-Contoller hinzufügen)
4.1: Datei öffnen: plugins/ content/ html5audio/ html5audio.php
4.2: Audio-Tag erweitern: statt ' '
5)
Script schreiben und als audiorate.js speichern – bei mir im Template-Ordner unter add-ons:
(window.onload = function () {
var vNum = 0;
var aNum = 0;
var myAudio = document.getElementById("myAudio");
var Pbr = document.getElementById("Pbr");
var CurrentPbr = document.getElementById("CurrentPbr");
Pbr.addEventListener('input',function(){
CurrentPbr.innerHTML = Pbr.value;
myAudio.playbackRate = Pbr.value;
},false);
myAudio.addEventListener('ratechange', function(){
CurrentRc.innerHTML = parseInt(CurrentRc.innerHTML) + 1;
},false);
CurrentPbr.innerHTML = myAudio.playbackRate;
Pbr.value = myAudio.playbackRate;
return false;
})();
6)
Script einbinden (über Template zB)
7)
Audio Dateien (mp3) hochladen: unter Inhalt/ Medien – zB neuer Ordner "audio" anlegen und dort hochladen (ACHTUNG siehe Punkt 1)
8)
Audio Datei in einem Beitrag einbinden: {audio}audio/SONGNAME.mp3{/audio}
ACHTUNG: Es kann eine ID nur einmal pro Seite vergeben werden! Daher nur ein audio-Tag pro Seite möglich!
–––––––––––––––––––––––––––––––––––––––––––––
Mehrere Player mit gleicher ID auf einer Seite
(mittels iframe)
–––––––––––––––––––––––––––––––––––––––––––––
1)
Für jeden Player (Audio-Datei) einen Beitrag anlegen. Inhalt: {audio}audio/SONGNAME.mp3{/audio}
2)
Einen neuen Beitrag für die Darstellung mehrerer Player anlegen (Übersicht)
3)
Einen Menüpunkt anlegen, um den Übersichts-Beitrag aufzurufen … und diesen gleich erstellen (siehe nächster Punkt)
4)
Den Editor erlauben bestimmte tags zu schreiben (sonst werden diese beim speichern des Beitrags automatisch gelöscht).
zB TinyMCE: Erweiterungen/ Plugins/ Editor – TinyMCE aufrufen und "Use Joomla Text Filter" auf AN stellen.
5)
In den Beitrag die einzelnen Audio-Beiträge mittels iframe integrieren – Beispiel für einen Audio-Beitrag:
Dabei steht im src-tag "id" für die Beitragsnummer (Artikel), die man in der Beitragsübersicht rechts sehen kann.
"Itemid" steht für Menüeintragsnummer (von Punkt 3), die in der Menüeintrags-Übersicht steht.
Für jeden iframe mit anderem Beitrag ändert sich erstere Nummer (id), die zweite bleibt gleich (Itemid).
6)
CSS anpassen: Für die Elemente in dem Übersichts-Beitrag, wie gewohnt, zB:
#myAudio{width:100%; }
#Pbr{width:100%; }
Für Elemente in den iframes muss man die so verschachtelten Elemente in der CSS-Datei direkt aufrufen, zB: html:not(root) body {background: transparent !important; }
Im Beispiel wird der body im iframe und nicht der body der ganzen Seite angesprochen.
–––––––––––––––––––––––––––––––––––––––––––––
Player als Liste in einem Accordeon-Menü
–––––––––––––––––––––––––––––––––––––––––––––
1)
Script als Datei (zB accordion.js) speichern und im Template aktivieren.
(function () {
"use strict";
var acco = document.querySelectorAll (".accordion>div");
var maxHeight = 0;
var labelTotal = 0;
for (var i=0; i maxHeight) {
maxHeight = acco[i].clientHeight;
}
labelTotal = labelTotal + acco[i].querySelector("label").clientHeight;
}
acco[0].querySelector("input").checked = true;
document.querySelector(".wrap").style.height = (maxHeight + labelTotal) + "px";
})()
2)
In den Übersichts-Beitrag zB folgendes html eingeben: