Ich beschäftige mich jetzt schon länger mit der Wiedergabe von Audiodateien im Web, genauer mit Podcasts. Ein Vorgehen einiger Hörer von Podcasts ist es, die Episoden mit überhöhter Geschwindigkeit abzuspielen. Teilweise, und das verwundert mich jedes mal, sogar mit doppelter Geschwindigkeit.

Die Frage die sich dadurch für meinen HTML5 Podcatcher ergibt lautet: Wie weit kann man mit HTML5 und Javascript dieses Bedürfnis erfüllen. Vorab gesagt: Erstaunlich weit.

HMTL5 API

Mit HTML5 kamen die Video- und Audio-Elemente nativ ins Web. Damit verknüpft ist eine Javascript-API. In dieser API sind zwei Eigenschaften enthalten die für das vorliegende Thema relevant sind: playbackRate und defaultPlaybackRate.

Die Eigenschaft playbackRate kann abgefragt werden um die Wiedergabegeschwindigkeit des laufenden Videos oder der abgespielten Audiodatei in Erfahrung zu bringen. Auch setzen lässt sich der Wert. Der Wert ist ein Faktor auf die “normale” Geschwindigkeit. 1 ist daher normal; 0,5 die halbe Geschwindigkeit und 2 die doppelte Geschwindigkeit.

Im Gegensatz dazu gibt die Eigenschaft defaultPlaybackRate die Ausgangsgeschwindigkeit wieder. Diese Geschwindigkeit wird immer dann angewendet wenn eine neue Video- oder Audiodatei mit einem Mediaelement abgespielt wird, ist also wie der Name schon sagt, die Standardgeschwindigkeit. Diese Standardgeschwindigkeit ist dabei nicht die normale Geschwindigkeit. Mit letzterem Bezeichne ich die Geschwindigkeit mit der die Aufnahme vorgenommen wurde.

Praxiseinsatz

Mit obigem Vorwissen ist die Übertragung der beiden Eigenschaften auf meinen Podcatcher recht einfach:

Um die gewünschte dauerhafte Beschleunigung der Wiedergabe zu erreichen setze ich die Eigenschaft defaultPlaybackRate des Audio-Elements auf den eingestellten Wert. Damit bleibt, auch beim Abspielen mehrerer Episoden hintereinander, die Geschwindigkeit konstant hoch.

var audioElement = document.querySelector('audio');
audioElement.defaultPlaybackRate = 2.0;
audioElement.play();

Die Eigenschaft playbackRate hingegen kommt dann für kurzfristige Steigerungen der Geschwindigkeit beim Spulen zum Einsatz.

var audioElement = document.querySelector('audio');
audioElement.playbackRate = 3.0;

Leider kann man auf diese Weise nur vorwärts spulen. Negative Werte für die Wiedergabegeschwindigkeit sind nämlich nicht möglich. Was auch nicht geht sind Geschwindigkeiten vom vierfachen oder mehr. Die Browser stellen dann nämlich auf stumm.

Experimentieren

Um mit den beiden Eigenschaften eigene Erfahrungen zu machen und das gesagte live auszuprobieren gibt es von Hyperaudio eine einfache aber effektive Testseite. Ich empfehle vor eigenen Experimenten damit herumzuspielen.