The module defines the AmplitudeJS (https://github.com/521dimensions/amplitudejs) audio player external library for Drupal along with media field formatters. These are based on the AmplitudeJS example players:

Installation

Install the module (more information about that here: https://www.drupal.org/docs/extending-drupal/installing-modules).
You must also install the AmplitudeJS library. The module needs the following file:
/libraries/amplitudejs/dist/amplitude.min.js
You can get it with composer if your composer.json is set properly for downloading npm packages (more information about that here https://www.drupal.org/docs/develop/using-composer/using-composer-to-ins...): composer require npm-asset/amplitudejs:^5.3 or you can download it manually from the https://cdn.jsdelivr.net/npm/amplitudejs@5.3.2/dist/amplitude.min.js URL, and copy it to the /libraries/amplitudejs/dist/ folder.
Enable the amplitudejs module - it just defines the external library for Drupal. If you develop a custom formatter based on this library, you'll need just this one.
Enable the amplitudejs_formatters submodule if you want to use the AmplitudeJS example players as media field formatters.

How to set the formatters from the amplitudejs_formatters submodule

After enabling the module, you'll need to have a media type that will contain the necessary fields for the audio player formatters. If you installed the core media module, there should be an audio media type, you can extend that.
The following fields are required in the media type:
- A file field that'll contain 1 mp3 file.
The following fields are optional in the media type:
- Text field for song name.
- Text field for song artist.
- Text field for song album name.
- Image field for song album art. (It is not required but advised to create a custom image style that will be used for displaying the album art)
If the media type is done, create a media reference field for your content type.
Set the previously created media type as reference type there.
Navigate to Manage display and set one of the audio player formatters available for that media field.
Open the formatter settings.
There you'll need to assign different fields for different data with tokens. If you installed the contrib token module (https://www.drupal.org/project/token), you can browse the available tokens. Here's a help for setting the tokens:
- Audio file field name: provide the file URL, so use [media:audio_file_fieldname:entity:url] and replace audio_file_fieldname with the field's machine name that contains the audio file.
- Title field name: use [media:name] if you want to use the media's own title or if you have a separate field for the song name, use the following: [media:song_name_fieldname]
- Artist field name: [media:artist_name_fieldname]
- Album Art field name: use [media:image_file_fieldname:entity:url] for the original image URL. If you want to use an image style instead, use the following: [media:image_file_fieldname:image_style_machine_name:url] Don't forget to replace the image_file_fieldname with the field machine name that contains the image file & replace the image_style_machine_name with the image style's own machine name.
- Album field name: [media:album_field_name]
Here's an example setting:
Save the settings, and now you can create content.

You can set up multiple media fields with multiple audio player formatters but due to the limitations of the AmplitudeJS library, only one player will play the audio simultaneously.

Since 1.0.1, you can also use the formatters for simple File fields that contain 1 or more mp3 files. Then in the settings you must set [file:url] as the "Audio file field name". Another new thing in that release that you can also set tokens from the parent entity. For example, if you use a file field in a content type, you can set the node title in the Formatter settings as [node:title]. The same can be done if you use media fields.

Tip: click the "Browse available tokens" button to search and insert the proper field token.

AmplitudeJS

Issues

Drupal 11 compatibilityFixedCode Created 6 months ago

Check the audio player's display with other themes FixedUser interface Created over 2 years ago

Drupal 11 compatibility
Fixed
Code
Created 6 months ago

Check the audio player's display with other themes
Fixed
User interface
Created over 2 years ago