{"id":426077,"date":"2024-04-09T13:44:52","date_gmt":"2024-04-09T13:44:52","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=426077"},"modified":"2025-10-27T07:18:26","modified_gmt":"2025-10-27T07:18:26","slug":"magento2-audio-player-documentation","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/","title":{"rendered":"Guide for Magento 2 Audio Player"},"content":{"rendered":"\n<p><a href=\"https:\/\/store.webkul.com\/magento2-audio-player-extension.html\">Magento 2 Audio Player <\/a>extension allows the admin to add audio content to the product description. It enables the admin to add products with audio content.<\/p>\n\n\n\n<p>This feature enables customers to effortlessly listen to the audio content of the product.<\/p>\n\n\n\n<p>This flexibility helps the customers by increasing their in-store experience after listing the audio description and engaging the shopping experience.<\/p>\n\n\n\n<p>Also, to display videos on the product pages, you can check <a href=\"https:\/\/webkul.com\/blog\/magento2-product-video\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Video Player Extension<\/a>.<\/p>\n\n\n\n<p>You can check the working of the plugin in the video mentioned below \u2013<\/p>\n\n\n\n<div class=\"wp-block-wk-block-youtube-video wp-block-wk-block--yt-video components-placeholder\"><div class=\"wk-block--yt-video-frame\"><div class=\"wk-block--yt-video-frame-request\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"zh0xVWVUo8I\"><div class=\"components-placeholder__instructions\">zh0xVWVUo8I<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h2 class=\"wp-block-heading index-title\">Features<\/h2>\n<\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The admin can enable or disable the Audio Player module.<\/li>\n\n\n\n<li>Choose between default or custom audio player.<\/li>\n\n\n\n<li>Manages custom audio player color schemes.<\/li>\n\n\n\n<li>Admin can set sample audio for a particular product.<\/li>\n\n\n\n<li>Set Yes\/No to Drag To Seek Option.<\/li>\n\n\n\n<li>Customers can check and download purchased audio files.<\/li>\n\n\n\n<li>Guest users can check and download purchased audio files.<\/li>\n\n\n\n<li>Added support for MP3, WAV, M4A, FLAC, and OGG audio formats.<\/li>\n<\/ul>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Installation<\/h3>\n<\/div><\/div>\n\n\n\n<p>The installation is quite simple just like the standard&nbsp;<a href=\"https:\/\/store.webkul.com\/Magento-2.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 extensions<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#1 Download Module<\/h3>\n\n\n\n<p>Firstly, you need to log in to the Webkul Store, go to&nbsp;<strong>My Account<\/strong>&gt;<strong>My Purchased Products<\/strong>&nbsp;section, verify, and then download and extract the contents of this zip folder on the system.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#2 Upload Folder<\/h3>\n\n\n\n<p>Once the module zip is extracted, follow path&nbsp;<strong>src&gt;app<\/strong>&nbsp;and then transfer the&nbsp;<strong>app<\/strong>&nbsp;folder into the&nbsp;<strong>Adobe Commerce<\/strong>&nbsp;<strong>Cloud root<\/strong>&nbsp;directory on the server as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"346\" data-id=\"426091\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png\" alt=\"Magento 2 Audio Player transfer to app folder\" class=\"wp-image-426091\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1-300x87.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1-250x72.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1-768x221.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">#3 Run Commands<\/h3>\n\n\n\n<p>After uploading the module folder, you need to run the following commands in the Magento 2 root directory:<br><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">php bin\/magento setup:upgrade<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">php bin\/magento setup:di:compile<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">php bin\/magento setup:static-content:deploy<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">php bin\/magento indexer:reindex<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">php bin\/magento cache:flush<\/pre>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Multi-Lingual Configuration<\/h3>\n<\/div><\/div>\n\n\n\n<p>Therefore, for Multilingual support, please navigate to&nbsp;<strong>Store&gt;Configuration&gt;General &gt;Locale Options<\/strong>.&nbsp; Also, select your desired language from the&nbsp;<strong>Locale&nbsp;<\/strong>option.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"570\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Configuration-Settings-Stores-Magento-Admin-1536x730-1-1200x570-1.png\" alt=\"Magento 2 Audio Player set locale option\" class=\"wp-image-426092\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Configuration-Settings-Stores-Magento-Admin-1536x730-1-1200x570-1.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Configuration-Settings-Stores-Magento-Admin-1536x730-1-1200x570-1-300x143.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Configuration-Settings-Stores-Magento-Admin-1536x730-1-1200x570-1-250x119.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Configuration-Settings-Stores-Magento-Admin-1536x730-1-1200x570-1-768x365.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Thus, in this way, a multi-lingual configuration can be done.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Language Translation<\/h3>\n<\/div><\/div>\n\n\n\n<p>For Magento 2 Audio Player translation, navigate to the following path in your system&nbsp;<strong>src\/app\/code\/Webkul\/AudioPlayer\/i18n.<\/strong><br>Open the file named&nbsp;<strong>en_US.CSV&nbsp;<\/strong>for editing as shown in the below screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"456\" data-id=\"501316\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/translation-1-1200x456.webp\" alt=\"translation file\" class=\"wp-image-501316\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/translation-1-1200x456.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/translation-1-300x114.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/translation-1-250x95.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/translation-1-768x292.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/translation-1.webp 1253w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<p>Now, upload it to the path&nbsp;<strong><strong>src\/app\/code\/Webkul\/AudioPlayer\/i18n<\/strong><\/strong>&nbsp;where the installation of Magento 2 is on the server. The module gets translated into the desired language.<\/p>\n\n\n\n<p>The user can edit the CSV like the image below.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"752\" height=\"490\" data-id=\"426095\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Screenshot-from-2024-03-05-16-58-12.png\" alt=\"i18 file csv language translation\" class=\"wp-image-426095\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Screenshot-from-2024-03-05-16-58-12.png 752w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Screenshot-from-2024-03-05-16-58-12-300x195.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Screenshot-from-2024-03-05-16-58-12-250x163.png 250w\" sizes=\"(max-width: 752px) 100vw, 752px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<p>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 \u2013<strong>&nbsp;de_DE.<\/strong>CSV.<\/p>\n\n\n\n<p>Followed by uploading the translated file to the same folder from where you have obtained it. Now your module translation is complete.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"300\" data-id=\"426096\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_09_17_28_02__1_-1-1200x300-1.png\" alt=\"translated file upload\" class=\"wp-image-426096\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_09_17_28_02__1_-1-1200x300-1.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_09_17_28_02__1_-1-1200x300-1-300x75.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_09_17_28_02__1_-1-1200x300-1-250x63.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_09_17_28_02__1_-1-1200x300-1-768x192.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<p>Thus, in this way, language translation can be done.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Configuration<\/h3>\n<\/div><\/div>\n\n\n\n<p>After the extension installation, the admin will configure the module setting by navigating to <strong>Dashboard &gt; Audio Player &gt; Audio Player Configuration <\/strong>as per the below image:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Audio Player Configuration<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Module Enable:<\/strong> The admin can enable or disable the module by setting it to <strong>Yes <\/strong>or <strong>No<\/strong>.<\/li>\n\n\n\n<li><strong>Audio Player Type:<\/strong> The store admin chooses the audio player type<\/li>\n\n\n\n<li><strong>Border Color:<\/strong> 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.<\/li>\n\n\n\n<li><strong>Background Color<\/strong>: Same as Border Color, here the admin needs to set the background color of the audio content.<\/li>\n\n\n\n<li><strong>Audio Wave Color:<\/strong> Here the admin sets the color of the audio Wave.<\/li>\n\n\n\n<li><strong>Progress Color:<\/strong> Here the admin sets the Progress Color.<\/li>\n\n\n\n<li><strong>Cursor Color:<\/strong> Here the admin sets the Cursor Color.<\/li>\n\n\n\n<li><strong>Cursor Width:<\/strong> Here the store admin sets the width of the cursor.<\/li>\n\n\n\n<li><strong>Drag To Seek:<\/strong> Here the admin set Drag To Seek to <strong>Yes<\/strong> or<strong> NO<\/strong>.<\/li>\n\n\n\n<li><strong>Button Text: <\/strong>Here the store admin sets the color of the text that appears on the button for the audio description.<\/li>\n\n\n\n<li><strong>Button Background Color:<\/strong> Here the admin can also set the background color of the Button.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"606\" data-id=\"430480\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Configuration-Settings-Stores-Magento-Admin-4-1200x606.webp\" alt=\"Magento 2 Audio Player configuration\n\" class=\"wp-image-430480\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Configuration-Settings-Stores-Magento-Admin-4-1200x606.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Configuration-Settings-Stores-Magento-Admin-4-300x152.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Configuration-Settings-Stores-Magento-Admin-4-250x126.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Configuration-Settings-Stores-Magento-Admin-4-768x388.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Configuration-Settings-Stores-Magento-Admin-4.webp 1294w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-6 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"606\" data-id=\"430927\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/1-1-1-1200x606.webp\" alt=\"Audio player\n\" class=\"wp-image-430927\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/1-1-1-1200x606.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/1-1-1-300x152.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/1-1-1-250x126.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/1-1-1-768x388.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/1-1-1.webp 1294w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">New Product Creation<\/h3>\n\n\n\n<p>After completing the audio player configuration the admin adds the <strong>Audio Content<\/strong> while creating the new product by navigating to <strong>Dashboard<\/strong> <strong>&gt; Catalog &gt; Product &gt; Add Product<\/strong> as per the below image:<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-7 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"606\" data-id=\"426125\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Products-Inventory-Catalog-Magento-Admin-1200x606.png\" alt=\"Products-Inventory-Catalog-Magento-Admin\" class=\"wp-image-426125\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Products-Inventory-Catalog-Magento-Admin-1200x606.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Products-Inventory-Catalog-Magento-Admin-300x152.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Products-Inventory-Catalog-Magento-Admin-250x126.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Products-Inventory-Catalog-Magento-Admin-768x388.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/Products-Inventory-Catalog-Magento-Admin.png 1294w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Add Audio Content<\/h3>\n<\/div><\/div>\n\n\n\n<p>A new section is added <strong>Audio Content<\/strong> via the Magento 2 Audio Player.<\/p>\n\n\n\n<p>The admin will also set the audio content as shown in the below image:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Audio Sample:<\/strong> The admin can select the Audio.<\/li>\n\n\n\n<li><strong>Audio Title:<\/strong> The admin can name the audio to show on the storefront.<\/li>\n\n\n\n<li><strong>Attachment<\/strong>:  Here the Admin uploads the audio file.<\/li>\n\n\n\n<li><strong>Delete:<\/strong> The Store admin can also delete the audio content.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-8 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"606\" data-id=\"430481\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-Products-Inventory-Catalog-Magento-Admin-1200x606.webp\" alt=\"Magento 2 Audio Player add audio sample to product \" class=\"wp-image-430481\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-Products-Inventory-Catalog-Magento-Admin-1200x606.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-Products-Inventory-Catalog-Magento-Admin-300x152.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-Products-Inventory-Catalog-Magento-Admin-250x126.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-Products-Inventory-Catalog-Magento-Admin-768x388.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-Products-Inventory-Catalog-Magento-Admin.webp 1294w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<p>After Completing it. Admin Save the product.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Frontend &#8211; Workflow<\/h3>\n<\/div><\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><strong><strong>Audio Description<\/strong><\/strong> <strong>in Default Player<\/strong><br><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-9 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"606\" data-id=\"430522\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-1-1200x606.webp\" alt=\"Magento 2 Audio Player Audio sample on product page\" class=\"wp-image-430522\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-1-1200x606.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-1-300x152.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-1-250x126.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-1-768x388.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Watch-1.webp 1294w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<p><strong>Audio Description in Custom Player<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-10 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"564\" data-id=\"431189\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-from-2024-04-03-14-27-39-1200x564.webp\" alt=\"watch\" class=\"wp-image-431189\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-from-2024-04-03-14-27-39-1200x564.webp 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-from-2024-04-03-14-27-39-300x141.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-from-2024-04-03-14-27-39-250x117.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-from-2024-04-03-14-27-39-768x361.webp 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/Screenshot-from-2024-04-03-14-27-39.webp 1290w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Support<\/h3>\n<\/div><\/div>\n<\/blockquote>\n\n\n\n<p>So, that is all about the&nbsp;<strong>Magento 2 Audio Player<\/strong> extension.&nbsp;If you have any queries regarding the plugin, please contact us at&nbsp;<a href=\"https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/\" target=\"_blank\" rel=\"noreferrer noopener\">Webkul Support System<\/a><strong>.<\/strong><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 <a href=\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":604,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[],"class_list":["post-426077","post","type-post","status-publish","format-standard","hentry","category-magento-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guide for Magento 2 Audio Player<\/title>\n<meta name=\"description\" content=\"User Guide for Magento 2 Audio Player shows how the admin of the store can add audio content to the products.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide for Magento 2 Audio Player\" \/>\n<meta property=\"og:description\" content=\"User Guide for Magento 2 Audio Player shows how the admin of the store can add audio content to the products.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-09T13:44:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-27T07:18:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png\" \/>\n<meta name=\"author\" content=\"Devesh Kumar Upadhyay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Devesh Kumar Upadhyay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/\"},\"author\":{\"name\":\"Devesh Kumar Upadhyay\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/b63cf810d250bc48b35b1e0ecef01660\"},\"headline\":\"Guide for Magento 2 Audio Player\",\"datePublished\":\"2024-04-09T13:44:52+00:00\",\"dateModified\":\"2025-10-27T07:18:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/\"},\"wordCount\":834,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png\",\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/\",\"name\":\"Guide for Magento 2 Audio Player\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png\",\"datePublished\":\"2024-04-09T13:44:52+00:00\",\"dateModified\":\"2025-10-27T07:18:26+00:00\",\"description\":\"User Guide for Magento 2 Audio Player shows how the admin of the store can add audio content to the products.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png\",\"width\":1200,\"height\":346,\"caption\":\"screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide for Magento 2 Audio Player\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/b63cf810d250bc48b35b1e0ecef01660\",\"name\":\"Devesh Kumar Upadhyay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/536cdf5f4b28d866e06ac8c2706217f6604a121d3a226d3b4ee3b8f4fa0ebe3a?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/536cdf5f4b28d866e06ac8c2706217f6604a121d3a226d3b4ee3b8f4fa0ebe3a?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Devesh Kumar Upadhyay\"},\"description\":\"Devesh is a dynamic Business Analyst specializing in Magento commerce platform. He brings a keen analytical mindset to understanding business needs and optimizing processes. Devesh excels in bridging the gap between technical solutions and business objectives, ensuring seamless project execution.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/devesh-upadhya645\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guide for Magento 2 Audio Player","description":"User Guide for Magento 2 Audio Player shows how the admin of the store can add audio content to the products.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/","og_locale":"en_US","og_type":"article","og_title":"Guide for Magento 2 Audio Player","og_description":"User Guide for Magento 2 Audio Player shows how the admin of the store can add audio content to the products.","og_url":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-04-09T13:44:52+00:00","article_modified_time":"2025-10-27T07:18:26+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png","type":"","width":"","height":""}],"author":"Devesh Kumar Upadhyay","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Devesh Kumar Upadhyay","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/"},"author":{"name":"Devesh Kumar Upadhyay","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/b63cf810d250bc48b35b1e0ecef01660"},"headline":"Guide for Magento 2 Audio Player","datePublished":"2024-04-09T13:44:52+00:00","dateModified":"2025-10-27T07:18:26+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/"},"wordCount":834,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png","articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/","url":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/","name":"Guide for Magento 2 Audio Player","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png","datePublished":"2024-04-09T13:44:52+00:00","dateModified":"2025-10-27T07:18:26+00:00","description":"User Guide for Magento 2 Audio Player shows how the admin of the store can add audio content to the products.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/03\/screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1.png","width":1200,"height":346,"caption":"screenshot_from_2024_01_18_15_14_20-1-1-1200x346-1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento2-audio-player-documentation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Guide for Magento 2 Audio Player"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/b63cf810d250bc48b35b1e0ecef01660","name":"Devesh Kumar Upadhyay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/536cdf5f4b28d866e06ac8c2706217f6604a121d3a226d3b4ee3b8f4fa0ebe3a?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/536cdf5f4b28d866e06ac8c2706217f6604a121d3a226d3b4ee3b8f4fa0ebe3a?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Devesh Kumar Upadhyay"},"description":"Devesh is a dynamic Business Analyst specializing in Magento commerce platform. He brings a keen analytical mindset to understanding business needs and optimizing processes. Devesh excels in bridging the gap between technical solutions and business objectives, ensuring seamless project execution.","url":"https:\/\/webkul.com\/blog\/author\/devesh-upadhya645\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/426077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/604"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=426077"}],"version-history":[{"count":26,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/426077\/revisions"}],"predecessor-version":[{"id":510587,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/426077\/revisions\/510587"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=426077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=426077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=426077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}