Guide for Magento 2 Audio Player
Magento 2 Audio Player extension allows the admin to add audio content to the product description. It enables the admin to add products with audio content.
This feature enables customers to effortlessly listen to the audio content of the product.
This flexibility helps the customers by increasing their in-store experience after listing the audio description and engaging the shopping experience.
Also, to display videos on the product pages, you can check Magento 2 Video Player Extension.
You can check the working of the plugin in the video mentioned below –
Features
- The admin can enable or disable the Audio Player module.
- Choose between default or custom audio player.
- Manages custom audio player color schemes.
- Admin can set sample audio for a particular product.
- Set Yes/No to Drag To Seek Option.
- 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
The installation is quite simple just like the standard Magento 2 extensions.
#1 Download Module
Firstly, you need to log in to the Webkul Store, go to My Account>My Purchased Products section, verify, and then download and extract the contents of this zip folder on the system.
#2 Upload Folder
Once the module zip is extracted, follow path src>app and then transfer the app folder into the Adobe Commerce Cloud root directory on the server as shown below:
#3 Run Commands
After uploading 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
Multi-Lingual Configuration
Therefore, for Multilingual support, please navigate to Store>Configuration>General >Locale Options. Also, select your desired language from the Locale option.
Thus, in this way, a multi-lingual configuration can be done.
Language Translation
For Magento 2 Audio Player translation, navigate to the following path in your system src/app/code/Webkul/AudioPlayer/i18n.
Open the file named en_US.CSV for editing as shown in the below screenshot.
Now, upload it to the path src/app/code/Webkul/AudioPlayer/i18n where the installation of Magento 2 is on the server. The module gets translated into the desired language.
The user can edit the CSV like 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 – de_DE.CSV.
Followed by uploading the translated file to the same folder from where you have obtained it. Now your module translation is complete.
Thus, in this way, language translation can be done.
Configuration
After the extension installation, the admin will configure the module setting by navigating to Dashboard > Audio Player > Audio Player Configuration as per the below image:
Audio Player Configuration
- Module Enable: The admin can enable or disable the module by setting it to Yes or No.
- Audio Player Type: The store admin chooses the audio player type
- Border Color: After clicking on border color, a color picker pop-up window will appear. Here the admin needs to set the color of the border of the audio content.
- Background Color: Same as Border Color, here the admin needs to set the background color of the audio content.
- Audio Wave Color: Here the admin sets the color of the audio Wave.
- Progress Color: Here the admin sets the Progress Color.
- Cursor Color: Here the admin sets the Cursor Color.
- Cursor Width: Here the store admin sets the width of the cursor.
- Drag To Seek: Here the admin set Drag To Seek to Yes or NO.
- Button Text: Here the store admin sets the color of the text that appears on the button for the audio description.
- Button Background Color: Here the admin can also set the background color of the Button.
New Product Creation
After completing the audio player configuration the admin adds the Audio Content while creating the new product by navigating to Dashboard > Catalog > Product > Add Product as per the below image:
Add Audio Content
A new section is added Audio Content via the Magento 2 Audio Player.
The admin will also set the audio content as shown in the below image:
- Audio Sample: The admin can select the Audio.
- Audio Title: The admin can name the audio to show on the storefront.
- Attachment: Here the Admin uploads the audio file.
- Delete: The Store admin can also delete the audio content.
After Completing it. Admin Save the product.
Frontend – Workflow
After adding the product from the admin side, now the customer can listen to the audio on the product page using the Magento 2 Audio Player.
Audio Description in Default Player
Audio Description in Custom Player
Support
So, that is all about the Magento 2 Audio Player extension. If you have any queries regarding the plugin, please contact us at Webkul Support System.