Magento 2 Audio Player Guide

The Magento 2 Audio Player extension allows the admin to add audio content to the product description. Allows the administrator to add products with audio content.

This feature allows users to effortlessly listen to the product’s audio content.

This flexibility helps the online platform by enhancing the in-store experience after including audio descriptions and incorporating them into the shopping experience.

Also, to display videos on product pages, you can check Magento 2 Video Player Extension.

• The administrator can enable or disable the Audio Player module.
• Choose the default or custom audio player.
• Manages custom audio player color schemes.
• An administrator can set a sound pattern for a specific product.
• Set Yes/No to Drag to Search.
• Customers can check and download purchased audio files.
• Guest users can check and download purchased audio files.
• Added support for MP3, WAV, M4A, FLAC and OGG audio formats.

Installation is very simple like standard Magento 2 extensions.

#1 downloadable module

First you need to login to Webkul Store, go to My account>My purchased products section, confirm and then download and extract the contents of this zip folder on the system.

#2 Load the folder

Once the zip module is extracted, follow the path src>application and then transfer application folder in Adobe Commerce Cloud root directory on the server as shown below:

#3 Run commands

After loading the module folder, you need to run the following commands in the Magento 2 root directory:

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

php bin/magento indexer:reindex

php bin/magento cache:flush

So, for multilingual support, go to Store > Configuration > General > Local Options. Also, select your preferred language from Locality option.

Therefore, a multilingual configuration can be made in this way.

For Magento 2 Audio Player translation, go to the following path in your system src/app/code/Webkul/AudioPlayer/i18n.
Open the file named in_US.CSV to edit as shown in the image below.

Now transfer it to the track src/app/code/Webkul/AudioPlayer/i18n where the Magenta 2 installation is on the server. The module is translated into the desired language.

The user can edit the CSV as in the image below.

After editing and translating the CSV file, you need to save the translated file name according to your region language and country code, such as – of_OF.CSV.

After that, upload the translated file to the same folder from which you downloaded it. Now your module translation is complete.

Therefore, language translation can be done in this way.

After installing the extension, the administrator will configure the module settings by going to the Dashboard > Audio Player > Audio Player Configuration according to the picture below:

Audio player configuration

• Enabling the module: An administrator can enable or disable the module by setting it to That or Not.
• Audio player type: The store administrator selects the type of audio player
• Border color: After clicking on the border color, a color selection popup will appear. Here the administrator needs to set the border color of the audio content.
• Background color: Same as the border color, here the administrator needs to set the background color of the audio content.
• Audio wave color: Here the administrator sets the color of the audio wave.
• Progress Color: This is where the admin sets the progress color.
• Cursor color: Here the administrator sets the color of the cursor.
• Cursor width: This is where the store admin sets the cursor width.
• Swipe to search: Here admin set Drag To Seek to That or NOT.
• Button text: This is where the store admin sets the color of the text that appears on the audio description button.
• Button background color: Here the admin can also set the background color of the button.

Creating a new product

After completing the configuration of the audio player, the administrator adds Audio content while creating a new product by navigating to Dashboard > Catalog > Product > Add product according to the picture below:

A new section has been added Audio content via Magento 2 Audio Player.

The admin will also set the audio content as shown in the image below:

• Audio sample: The administrator can select Audio.
• Audio title: The administrator can name the sound to display in the window.
• Side dish: This is where the admin uploads the audio file.
• Delete: Store admin can also delete audio content.

After he finished it. Admin Save the product.

After adding a product from the admin side, now the user can listen to the audio on the product page using the Magento 2 Audio Player.

Audio description in the default player

Audio description in custom player

So that’s all about Magento 2 audio player expansion. If you have any questions about the plugin, please contact us on the Webkul support system.