Audio Player for TYPO3

Podcasts and audio guides need a player that works without external services

Anyone who wants to offer audio on a TYPO3 website faces an awkward choice. Either an external service such as SoundCloud or Spotify, which sends user data to third-party servers and dictates the design, or a native HTML5 player whose browser default is barely usable. nim_html5audioplayer closes this gap. The extension delivers an audio player fully integrated into TYPO3, with playlist support, a progress indicator and speed control. All audio files stay on your own server, and no external request leaves the page.

For museums, educational institutions and publishers with podcast formats, this is a hard requirement: audio guides must not set tracking cookies, training content has to run on the intranet without an internet connection, and corporate podcasts should appear in the organization’s own branding. nim_html5audioplayer covers all three scenarios with a single content element.

Typical use cases range from the museum to the internal training portal

The most common scenario is the audio guide in museums and exhibitions. Visitors scan a QR code, land on a TYPO3 page and listen to the commentary on an exhibit. The player starts without autoplay, shows the progress bar and allows speed adjustment between 0.5x and 2x. For a typical exhibition with 30 to 50 stops, the playlist function provides a continuous tour, so visitors do not have to navigate from page to page manually.

The second major field is corporate podcasts. Companies that turn their internal knowledge into an audio series need a player embedded in their existing TYPO3 website rather than one living on an external platform. nim_html5audioplayer provides a branded player with an episode list, chapter markers and a download option. The editorial team maintains episodes like any other TYPO3 content in the backend.

A third scenario is language learning portals and e-learning platforms. Here speed control really pays off: learners can slow down dialogues or play back repetitions at a faster pace. Combined with fe_login, premium audio content can be protected behind a login.

The technical architecture relies on native HTML5 APIs without a JavaScript framework

nim_html5audioplayer uses the browser’s HTML5 Audio API and renders the player interface through Fluid templates. There is no dependency on jQuery, React or any other framework. That keeps load times minimal: the player itself weighs less than 15 KB (CSS + JS), and the audio files are managed via FAL (File Abstraction Layer) and delivered by streaming.

The extension registers its own content element in the TYPO3 backend. Editors select audio files from the FAL media library and set a title, a description and an optional preview image. The playlist function groups several audio entries into a sortable list. Rendering is handled by Fluid templates that can be overridden via a site set or your own site package.

For the progress indicator, the player stores the current playback position in the browser’s localStorage. When a visitor returns, the player jumps back to the last position. This works without cookies and without a server-side session.

Common problems involve audio formats and mobile browsers

The dominant support topic is audio format compatibility. MP3 works in all current browsers, Ogg Vorbis in Chrome, Edge, Firefox and Safari 18.4 or later, AAC in Chrome, Edge and Safari, and in Firefox only in an MP4 container with the operating system’s codecs. For maximum compatibility, store every file as MP3. If you need better quality at a smaller file size, deliver Opus as the primary format with MP3 as the fallback.

The second problem is autoplay blocking on mobile devices. Since 2018, iOS and Android have prevented audio from playing automatically without user interaction. nim_html5audioplayer respects this browser policy and starts audio only after an explicit click. Anyone who still configures autoplay for background music gets silence on mobile devices, without an error message.

The third topic is performance with large playlists. From 100 entries in a single playlist, DOM rendering time becomes noticeable. The fix: split playlists into thematic blocks of 20 to 30 entries and organize them via categories in the backend.

The extension runs on TYPO3 v11 and v12, while v13 status depends on the maintainer

nim_html5audioplayer was originally developed for TYPO3 v8 and v9. Its core functionality (HTML5 Audio API, FAL integration) is technically stable and runs on v11 and v12 without major adjustments. For TYPO3 v13, there is currently no official compatibility statement from the maintainer. The extension does not use any of the APIs removed in v13, however, so in most cases migration takes little effort.

During TYPO3 upgrades, Gosign checks whether the audio extensions in use are still compatible and recommends alternatives where needed. If the extension is no longer developed, the same functionality can be rebuilt as a custom content element with the native HTML5 Audio API and Fluid templates, typically within two to three developer days.