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.
▶️ Please watch the video above to get all the exciting details! 👆
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!
Hi Lauren!
For opening in new tab, use the following code instead of above one:
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(‘‘);
jQuery(this).find(“.pa-audio-download-button”).attr(“target”, “_blank”);
if(jQuery(this).find(“.pa-audio-download-button”).attr(“href”) != “undefined”){
clearInterval(x);
}
})
},200)
})
Also, share the URL of the page for the other issue.