Give Your Listeners A Bonus
I came across the need for this feature while working on a church website. They wanted to provide the ability to download audio from the sermons. And since we were using the Divi Audio module with a custom field and our Divi Dynamic Helper plugin, we thought it made perfect sense to just add a button icon to the module. So in this tutorial, I will show you how to add a download button to the Divi Audio module.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
1. Add A Custom CSS Class To The Divi Audio Module
The first step is to add a custom CSS class to the specific Divi Audio module where you want the download button to appear. This class will be the link between the module and the jQuery and CSS code, which will be added in the next steps.
Open the Audio module settings and go to the Advanced tab to the CSS IDs & Classes toggle. Place the class “pa-audio-download” in the CSS Class input field.
2. Add The jQuery Snippet
Since there is no built-in function for this, we need to create some code that adds a new element to the module, the download button icon. We also need to get the audio file which is added by the user in the module and attach it dynamically to this new download button icon. We are doing these things with the jQuery snippet below.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<script>
jQuery(document).ready(function(){
var x = setInterval(function(){
jQuery(".pa-audio-download").each(function(){
var link = jQuery(this).find(".mejs-mediaelement audio").attr("src");
jQuery(this).find(".et_audio_container").append('<a href= "'+link+'" class= "pa-audio-download-button"></a>');
jQuery(this).find(".pa-audio-download-button").attr("download", "");
if(jQuery(this).find(".pa-audio-download-button").attr("href") != "undefined"){
clearInterval(x);
}
})
},200)
})
</script>3. Add the CSS Snippet
After placing the jQuery Snippet, you will not see the download icon yet until you place the CSS. The CSS snippet will position the download icon to the right side of the player. It also defines the download icon, which you are free to change if you prefer a different icon.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*style the audio download button*/
.pa-audio-download .et_audio_container {
position: relative;
}
.pa-audio-download-button {
position: absolute;
right: 15px;
bottom: 45px;
display: flex;
justify-content: center;
align-items: center;
}
.pa-audio-download-button:before {
content: "\e092";
font-family: ETMODULES;
color: #fff;
font-size: 18px;
position: relative;
left: -50px;
font-weight: bold;
}4. Make Any Final Design Adjustments
Adjust Padding Right
Since we are adding the icon to the right side of the player, it visually makes all the player elements off centered. To solve this, simply add some padding to the right side. I used 110px to make it look correct with the -50px in the snippet above.
Optional Download Icon Styling
If you would like to add an optional background design to the download icon, you can also paste this snippet of CSS code along with the other snippet.
/*add background to download icon*/
.pa-audio-download-button:before {
width: 34px;
height: 34px;
border-radius: 50%;
background-color: #000000;
}Fix Audio Time Position
I noticed (at least on my site) that the time is showing down too far. This seems to be a bug in Divi, but you can solve it with this snippet of CSS.
/*fix for audio time position*/
.et_audio_container .mejs-container .mejs-controls .mejs-time span {
line-height: 18px!important;
top: -4px;
position: relative;
}Final Result
Here is how your Divi Audio module should look once you complete this tutorial!
FYI: This would go perfectly with our Divi Dynamic Helper plugin to use the Divi Audio module with a custom field. Take a look!
I have the code from this blog post installed in all the correct places – I just checked and it is all there. However, the download button is no longer appearing. It was working but is not now. An example of a post where it was working is: https://peakrevenuelearning.com/2022/06/17/how-collectors-should-respond-to-common-scenarios-with-consumers/ Do you have any suggestions?
Hi Christopher!
I have checked and the code content: “\e091”; is not working in your site which is working fine in our text site. To find the cause of the issue, please contact Elegant themes support.
Hi there, thank you for this tutorial! I’m having a downloading issue. I’ll be contacting elegant themes support but thought I’d try here as well. I swear this was working and now it isn’t. I have Divi and everything up to date. When I click the download button it now opens in the browser instead of downloading the file. Not sure why. Do I need to add anything to the jQuery? It is across all browsers, and in private/incognito windows so it’s not a cache issue.
Hi Katelyn!
The download button should work fine with the above jQuery code only. Could you please share the URL of the page so that I can check further?
Nelson, you are a bad-a$$! Like always you made it really easy to drop in the code and it just worked right away perfectly. I tried to do something like this a couple years ago and never could get it working. Thanks so much for your help!
Thanks Rob, I am so glad to hear this was helpful! We enjoy making these resources!
This works great on my desktop, however on my mobile phone (Apple 12 Pro max) the download button is above the timeline and counter. Is there a fix for this please?
I’m not aware of any issue like that, and don’t have that device, so I cannot check it. Maybe there is not enough space? Hard to say as a guess.