wordpress divi plugin
Budget: $350 – $450 CAD
Audio module plugin for Divi on Wordpress:
Video explanation:
https://drive.google.com/file/d/1ozE5iUx21JYbCcVhI09lQw7sQy0jP6xy/view?usp=sharing
Here is what I’m hoping to achieve in an audio module. I need a few customizations to the divi audio module that currently exists.
I would like to add these features/functions onto the divi audio module, which can either be an import via "JSON" file, or a Wordpress Plugin:
URL Uploads:
After adding an Audio Module in Divi, I would like to add the audio via a URL. Right now it doesn’t work. I’m not sure why it doesn’t work, but I would like to add audio on the front end where it says “add audio” and you can select audio from the media library, or a URL, I want to paste a Dropbox or Google Docs URL as well as have the option to upload an MP3 from the media library.
Element Options:
I would like there to be “elements” that I can toggle on/off, like when you use the Blog Post module, you can toggle meta data, or category on/off. The elements I would like to be available are:
Most important: download audio (if yes, a download icon appears and the audio can be downloaded).
Optional other “elements” could be time duration, rewind 5s, fast forward 5s, volume. Basically, those audio elements that come standard could be turned on or off. (I really only want the play button, progress bar, and download button, but a client might request a time stamp)
Styles:
Being able to change the color of the play and download buttons and progress bar.
Being able to select the color of the progress bar after the audio player progresses through the bar. Like how it is gray, but then turns pink when playing here: https://www.katelyndawnvo.com/
Being able to select the color of the background of the audio player *see video* like how it is blue here: https://theme-2.voiceoverbrandsites.com/
How I currently make the audio downloadable with the audio module, and change the styles: as seen on this website: https://theme-2.voiceoverbrandsites.com
The audio module itself has a class:
.pa-audio-download
There is a script in the head:
<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");
link = link.replace('https://theme-2.voiceoverbrandsites.com','');
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>
And then some custom CSS which changes depending on my layouts:
.pa-audio-download .et_audio_container {
position: relative;
}
.pa-audio-download-button {
position: absolute;
right: -32px;
bottom: 4px;
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;
}
.et_audio_container .mejs-time {
display: none !important;
}
.et_audio_container .mejs-button.mejs-volume-button {
display: none !important;
}
.et_audio_container .mejs-controls a.mejs-horizontal-volume-slider {
display: none !important;
}
.mejs-time-float {
display: none !important;
}
I'm not sure how long this takes so if the budget doesn't fit let me know.
Video explanation:
https://drive.google.com/file/d/1ozE5iUx21JYbCcVhI09lQw7sQy0jP6xy/view?usp=sharing
Here is what I’m hoping to achieve in an audio module. I need a few customizations to the divi audio module that currently exists.
I would like to add these features/functions onto the divi audio module, which can either be an import via "JSON" file, or a Wordpress Plugin:
URL Uploads:
After adding an Audio Module in Divi, I would like to add the audio via a URL. Right now it doesn’t work. I’m not sure why it doesn’t work, but I would like to add audio on the front end where it says “add audio” and you can select audio from the media library, or a URL, I want to paste a Dropbox or Google Docs URL as well as have the option to upload an MP3 from the media library.
Element Options:
I would like there to be “elements” that I can toggle on/off, like when you use the Blog Post module, you can toggle meta data, or category on/off. The elements I would like to be available are:
Most important: download audio (if yes, a download icon appears and the audio can be downloaded).
Optional other “elements” could be time duration, rewind 5s, fast forward 5s, volume. Basically, those audio elements that come standard could be turned on or off. (I really only want the play button, progress bar, and download button, but a client might request a time stamp)
Styles:
Being able to change the color of the play and download buttons and progress bar.
Being able to select the color of the progress bar after the audio player progresses through the bar. Like how it is gray, but then turns pink when playing here: https://www.katelyndawnvo.com/
Being able to select the color of the background of the audio player *see video* like how it is blue here: https://theme-2.voiceoverbrandsites.com/
How I currently make the audio downloadable with the audio module, and change the styles: as seen on this website: https://theme-2.voiceoverbrandsites.com
The audio module itself has a class:
.pa-audio-download
There is a script in the head:
<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");
link = link.replace('https://theme-2.voiceoverbrandsites.com','');
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>
And then some custom CSS which changes depending on my layouts:
.pa-audio-download .et_audio_container {
position: relative;
}
.pa-audio-download-button {
position: absolute;
right: -32px;
bottom: 4px;
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;
}
.et_audio_container .mejs-time {
display: none !important;
}
.et_audio_container .mejs-button.mejs-volume-button {
display: none !important;
}
.et_audio_container .mejs-controls a.mejs-horizontal-volume-slider {
display: none !important;
}
.mejs-time-float {
display: none !important;
}
I'm not sure how long this takes so if the budget doesn't fit let me know.