The download icon will allow the visitors to download audio from the Audio Module. As there is no default option to have a download button in the Audio module, some customization is needed to make it work.
Step 1: Add a Custom CSS Class Name to the Audio Module
Navigate to Audio Module Settings > Advanced > CSS ID & Classes > CSS Class.
Give the Audio Module with a unique CSS class name; for this example, we'll use "et-audio-download-button." This ensures that the CSS class doesn't interfere with other button modules on your site.
If you're unsure about adding a CSS class name, refer to our guide for detailed instructions.
Step 2: Add some JavaScript code to create the functionality
In this step, you'll incorporate a script to enable the download functionality for the icon you will show:
From your WordPress Dashboard, navigate to Divi > Theme Options > Integration > "Add code to the < head > of your blog" field, paste the following script:
<script>
(function($){
$(document).ready(function(){
setTimeout(function(){
$('.et-audio-download-button').each(function(){
var link = $(this).find('.mejs-mediaelement audio').attr('src');
var downloadLink = $('<a href="'+link+'" class="et-audio-download-link" download="" >Download</a>');
$(this).find('.mejs-controls').append(downloadLink);
$(this).find('.mejs-controls').find('.mejs-horizontal-volume-slider').after(downloadLink);
});
}, 1000);
});
})(jQuery);
</script>
Step 3: Add the Custom CSS code to create the icon
We need custom CSS to add an icon and adjust its position. Please go to WordPress Dashboard > Divi > Theme Options > Custom CSS field to make it work.
a.pa-audio-download-link {
position: absolute;
right: -30px;
font-size: 0;
}
a.pa-audio-download-link:before {
content: "\E092";
font-family: ETModules;
color: #fff;
font-size: 18px !important;
position: relative;
font-weight: bold;
}
The final result can be seen in the screenshot below:
