Wolfgang!

Am WE hab ich eine Audio-Datei ins Forum eingefügt = funktionierte.
Heute bei der mp3 funktionierte es nicht.
Frage von einen Laien: was war an meinem Eintrag fehlerhaft?

xeno-canto-Dateien einbetten

Zitat von Dankeschön im Beitrag #12

---

xeno-canto-Dateien einbettenHallihallo!Die Vogelstimmen-Datenbank xeno-canto bietet bei jedem Klangbeispiel ein Einbettungs-Code an, z.B. könnte ich diesen gebrauchen:<iframe src='https://xeno-canto.org/252524/embed?simple=1' scrolling='no' frameborder='0' width='340' height='115'></iframe>Wie krieg ich das wohl zum Funktionieren?(Hatte ich schon mal an andrer Stelle sehr nebensächlich gefragt, entsprechend untergegangen).Dankeschön!von Jan

---

[audioplayer={{play}}]{{title}}[/audioplayer]
 

(Durch das {{title}} kannst du den Namen des Vogels nun selbst zwischen die Klammern schreiben).
Mit (HTML):

 

    Ihr Browser unterstützt das Audio-Element nicht!
 

    {{title}} | Quelle: xeno-canto
 
    
 

Schritt 2: Das Design (CSS) einfügen

Damit die Klasse audioplay (runde Ecken/Hover) funktioniert, hinterlege dies unter:

Admin > Layout > Farben & Einstellungen > CSS (Eigene):

.audioplay {
height: 35px;
border-radius: 90px;
box-shadow: 2px 2px 4px 0px #333333;
transition: all 0.5s linear;
}
.audioplay:hover {
box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
transform: scale(1.03);
}
 

Schritt 3: So benutzt du es jetzt im Beitrag

Im Beitrag nutzt du dann einfach dieses Format:

[audioplayer=HIER_DIE_MP3_URL]Hier den Vogel & Namen hinschreiben[/audioplayer]
 

Ein echtes Beispiel (mit der URL, die ich über F12 im Quellcode "data-xc-filepath" gefunden habe):

[audioplayer=http://xeno-canto.org/sounds/uploaded/NKZQLCJFUU/XC252524-150610AmselGesangFH1edit.mp3]Amsel - Frank Holzapfel[/audioplayer]
 

Ich hoffe, ich konnte es so gut es geht erklären! In meinem Forum funktioniert es wunderbar. Da jedes Xobor-Forum durch Plugins und Einstellungen anders reagieren kann, probier es einfach mal aus

Mit Herzlichen Grüßen

Daishi


Hier zum Testen das es geht, ich hoffe das es hier auch funktioniert.


Datei: Amsel Turdus merula · song Frank Holzapfel Naturpark Stromberg-Heuchelberg, Baden-Württemberg, Germany | Quelle: xeno-canto

Sorry, bin auf der Baustelle, habe bei HTML den vollen Code vergessen zu schreiben. Ich trage das noch nach, bitte um Entschuldigung, war sehr müde gestern abend und wollte nur etwas aushelfen, dafür entschuldige ich mich.

Hallo Jan (und alle zusammen)!

Sorry, ich fahre gerade erst von der Baustelle los. Ich war gestern Abend wohl doch etwas müder als gedacht und habe im HTML-Teil nicht den vollständigen Code gepostet – das tut mir leid!

Damit es jetzt aber bei euch auch richtig funktioniert, hier wie versprochen der komplette HTML-Code für den Foren-Code (Iconbar):

2. Mit (HTML):

<div style="display: inline-block; text-align: left; margin: 10px 0;">
  <audio class="audioplay" controls>
    <source src="{{play}}" type="audio/mpeg">
    Ihr Browser unterstützt das Audio-Element nicht!
  </audio>
  <div style="font-size: 10px; color: #888; padding-left: 10px; font-family: sans-serif; line-height: 1.2;">
    {{title}} | Quelle: xeno-canto
  </div>
</div>
 
 

Jetzt ist alles vollständig!

Beste Grüße

Daishi

Hehe, einfach eine bereits vorhandene Audioplayer-HTML



mit dieser HTML zu ersetzen hatte einen lustigen Effekt in der Iconbar...



Was muss ich ändern?

Eine meiner beiden Audioplayer-Möglichkeiten hatte Bernd mir gebastelt, ich glaub dieser, damit ich ihn mitten in einen Beitrag platzieren kann, wenn der länger ist.

Dankeschön!
von Jan

ich würde einen anderen Weg nutzen und den <iframe>-Code von xeno-canto nutzen. So vermeidet man evtl. copyright-Probleme.

dafür ersetze ich den HTML-Baustein aus Beitrag #7 durch einen neuen

Name: audio-Eingabe
Text:

<div onclick="audio_prompt()" class="xob_icon_cont"><img alt="Audio" title="Audioplayer oder Xeno-Canto <iframe>-Code" class="xob_icon" src="//files.homepagemodules.de/b104774/a_503_9b72960f.png"></div>
<script>
function audio_prompt(){
	let aw=prompt('Audio-URL\u2753\n... oder\nXeno-Canto <iframe>-Code\u2753','');
	if(aw && aw.length){
		let r=/xeno-canto.org\/(\d+)\/embed/.exec(aw);
		if(r && r[1])	{
			xob_insert(`[XenoCanto=${r[1]}]`);
		}
		else if(aw.includes(".mp3")){
				xob_insert(`[audioplayer=${aw}]`);
		}
	}		
}
</script>
 
 

gibt man jetzt in der Abfrage den Teilen-Code: <iframe src='https://xeno-canto.org/252524/embed?simple=1' ...></iframe> ein,

wird im Antwortenfeld ausgegeben: [XenoCanto=252524] 

der neue Forencode muss auch noch in der Iconbar definiert und in die nicht sichtbaren Gruppe verschoben werden

ersetze:

[XenoCanto={{xcNr}}]
 

durch:

<iframe src='https://xeno-canto.org/{{xcNr}}/embed?simple=1' scrolling='no' frameborder='0' width='340' height='115'></iframe>
 
 

so long
Bernd

RE: xeno-canto-Dateien einbetten

<iframe src='https://xeno-canto.org/1083073/embed' scrolling='no' frameborder='0' width='340' height='220'></iframe>
<iframe src='https://xeno-canto.org/1083073/embed?simple=1' scrolling='no' frameborder='0' width='340' height='115'></iframe>
 
 

aber wenn ich das so abändere erscheint nur der Audio-Player, aber nicht das Sonogram-Bild, in allen 3 Browsern.
Etwa weil es halt nur in einem Audio-Player ist, ohne img-Anteil?

bei mir wird das Sonogramm angezeigt https://test-2022.xobor.de/t140f21317-Xe...-einbinden.html

(nur in der mobil-Ansicht nicht 🤔)

beachte: Beide <iframe>-Varianten unterscheiden sich auch in der Höhe

Gruß Bernd

Ah, dann ist das wieder ein Browser-Problem, bei meinem FF werden auch deine nicht angezeigt, bei meinem Opera putzigerweise nur 1 deiner beiden. *seufz*
Ich kann sie aber auch bei mir mit Rechtsclick in einem neuen Tab öffnen, da gehts dann problemlos.

Aber sag mal: du hast beide Sonagramm-Arten parallel, wie das denn? - Hätte ich den Code gar nicht abwandeln müssen?...

Dankeschön!!