Audio Player

The Audio Player module for Drupal 10/11 provides a flexible and customizable solution for displaying audio players within your content. It supports both single audio files and playlists, providing different player modes depending on the number of files. With over 15+ skins, 10+ color palettes, and 15+ equalizer effects, the module allows for extensive customization, making it ideal for users who want a tailored audio experience on their site. This module integrates with Drupal’s File and Media fields, allowing site administrators to easily configure audio players through the content type’s display settings. You can override skins and customize styles using Twig templates and CSS within your theme for full creative control.

Requirements

This module requires Drupal 10/11 and works with the native File and Media fields in Drupal.

• No additional contributed modules or external libraries are required outside of Drupal core.

Install as you would normally install a contributed Drupal module. For more information, see Installing Drupal Modules.

If using Composer:

composer require drupal/audio_player

Enable the module using Drush:

drush en audio_player

1. Go to: Structure → Content types → {content_type} → Manage display
2. Allow audio file extensions such as mp3, wav, ogg, etc., from manage fields if not already configured and choose the Audio Player format for a File field type and or choose the Media Audio Player format for a Media field type using an audio media bundle.
3. If the field cardinality is set to 1, the audio file will be displayed as a single track.
4. If the field cardinality is greater than 1, choose to display the files either as a looped single track or as an audio playlist.
5. Configure the appearance of the audio player by selecting from over 15 skins, 10+ color palettes, and 15+ equalizers.
6. Optionally, override the skins' Twig templates (e.g., copy templates/audio-playlist/skin-one.html.twig to your theme).
7. Save your display configuration.

To fully customize the appearance and behavior of the audio player:

• Override the default Twig templates for specific skins (e.g., templates/audio-playlist/skin-one.html.twig) by copying them into your theme’s folder structure.
• Customize the player’s appearance with custom CSS (e.g., overriding colors, fonts, and layout styles).
• Use the audio-player CSS class for targeting and styling the audio player and player controls.
• You can define custom color palettes for your theme or module settings to personalize the audio player’s visual design.

For more advanced customizations, you can modify the audio player’s HTML structure and CSS within the Twig templates.

• Ensure that your File or Media - Audio fields are properly configured and that the correct file type (audio) is selected.
• Check if the correct player mode (single player or playlist) is selected based on the number of files in the field.
• Verify that the selected skin, color palette, and equalizer effects are applied properly.
• Ensure that any custom CSS styles are being loaded and applied to the audio player.

You can add a field of type File or Media with the Audio bundle anywhere on the site — such as in content types, blocks, or paragraphs, etc — and upload single or multiple audio files. This module then helps display those audio files using different skins, color palettes, etc and is highly customizable. It’s also developer-friendly, making it easy to extend and integrate into your projects.

Steps to Implement the Video Playlist on a View:

1. Create a content type (e.g., Audio Content) if not already done and add an Audio File field (or Media Audio field), subtitle, thumbnail image field field (or Media Audio field). Afterward, add contents with audio files.
2. Go to Structure → Views and add a new view (e.g., Audio Playlist). Set Show to Content and filter by Content Type. Add fields like Content Title, Subtitle (optional), Audio File, and Thumbnail Image (optional).
3. Under Format, select Audio Player. This activates the Audio Player settings.
4. In the Audio Player settings, enable or disable the Equalizer Options, choose a Skin (e.g., Skin one, Skin two), and select a Color Palette.

5. Map the fields:

   • Video Source (mandatory): Map to Audio File.
   • Video Title: Map to Content Title set none for Audio File Name.
   • Video Subtitle: Map to Subtitle (if applicable).
   • Video Thumbnail: Map to Thumbnail Image(optional).
6. After mapping the fields, save the view.
7. Preview the view on its page to ensure the audio player displays the title, subtitle, audio file, and thumbnail correctly.

Support
Please post bug reports, feature requests and support requests to the Audio Player module issue queue. If you met any problems with this module - feel free to create an issue.