Audiodatei mittels Shortcode als HTML5-Player ausgeben

The times they are a-changin’.

This post seems to be older than 5 years—a long time on the internet. It might be outdated.

Eine simple Funktion, mit deren Hilfe eine Audiodatei aus dem Anhang eines Artikels mittels Shortcode in einem <audio>-Element ausgegeben wird – das moderne Browser automatisch als Player darstellen.

Vorbemerkungen

Um es gleich zu sagen: die Funktion wurde für einen spezielles Anwendungsszenario geschrieben und hat ein paar Limitierungen:

  1. Sie taugt nur zum Einbinden von einem (1) Musikstück pro Artikel oder Seite!
  2. Dieses darf (und sollte) dafür in verschiedenen Dateiformaten vorliegen: MP3, OGG und WAV.

Hintergrund für dieses unelegante Vorgehen: MP3s werden in Firefox bisher per <audio> nicht dargestellt; die Mozilla-Gang vermeidet Lizenzfragen und verlässt sich auf den freien Standard OGG.
Man sollte das gewünschte Musikstück also mindestens als MP3- und als OGG-Datei hoch laden. Bitte bis auf die Endung gleiche Dateinamen verwenden! Hier gibt es einen OGG-Konverter online.

Um den Browsern verschiedene Dateiformate anzubieten, werden alle MP3-, OGG- und (der Vollständigkeit halber) WAV-Dateien, die mit dem Artikel oder der Seite verknüpft sind, hintereinander als <source>-Elemente dargestellt. Die Browser picken sich dann das für sie passende heraus.

Klarer Nachteil: Wenn Audioanhänge mit verschiedenen Dateinamen, ergo verschiedene Musikstücke, existieren, gibt es Bruch. In meinem Szenario war klar: Pro Artikel wird immer nur ein Lied hochgeladen – also habe ich mir nicht die Mühe gemacht, die Funktion für mehrere verschiedene Dateinamen zu erweitern. Kann man aber.

Funktion

Die Funktion kann in der functions.php abgelegt werden. Die Aktivierung für einen bestimmten Artikel oder eine Seite erfolgt mittels Shortcode, der einfach an die gewünschte Stelle in den Editor geschrieben wird:
Das ist alles.

/**
 * Audio attachments
 *
 */
function glueckpress_audio_attachments() {

	global $post;

	// Nach Audiodateien in den Anhängen des aktuellen Beitrags suchen
	$audio_attachments =& get_children( array(
						'post_parent'	=> $post->ID,
						'post_type'		=> 'attachment',
						'post_mime_type'=> array(	'audio/mpeg', 'audio/ogg', 'audio/x-wav' ),
						'order_by'		=> 'title',
						'order'			=> 'ASC'
						));

	// Fallback
	if( empty( $audio_attachments ) )
		return;

	// HTML beginnt hier
	$audio_html = '<audio controls autobuffer>'."\n";

	foreach( (array) $audio_attachments as $attachment->ID => $attachment ) {
		$audio_html .= 'guid . '" />'."\n";
	}

	// Fehlermeldung für Browser ohne HTML5
	$audio_html .= '<strong>[Fehler] Ihr Browser untertützt leider kein modernes HTML.</strong>'."\n";

	$audio_html .= '
'."\n";

	// Download-Link für alle Fälle
	$audio_html .= 'Keine Player-Übertragung? → ';
	$audio_html .= '<a>guid . '">Audio-Datei hier herunterladen</a>
'."\n";

	// Voilá!
	return $audio_html;

}

/**
 * HTML5 Audio Player
 *
 * @uses function glueckpress_audio_attachments()
 *
 */
add_shortcode('audio', 'html5_audioplayer');
function html5_audioplayer($atts, $content=null) {

	$content = glueckpress_audio_attachments();
	return $content;
}

Ausgabe

Ausgegeben wird ein HTML5-<audio>-Element mit allen Audioanhängen (MP3, OGG oder WAV) des Artikels als Quellen:

<audio controls autobuffer>
<source src="http://christianesturm.de/files/2011/04/25-stroemung-bachmann.mp3" />
<source src="http://glueckpress.com/christiane-sturm/files/2011/04/25-stroemung-bachmann.ogg" />
<strong>[Fehler] Ihr Browser untertützt leider kein modernes HTML.</strong>
</audio>