In this tutorial you will learn to create a fade in audio play which looks like iTunes on an iPhone. On the following site you will see this tutorial in action: www.flyingfox-web.com/8minuten.

This design works also on desktop because it is responsive but the best user experience will be on a smartphone.

Preparation

We need a page wich will have our “Audio-Players” inside. The site was created very clean and simple because I wanted to have the focus on the music. As an introduction I created a “Full-Width-Header”. In addition we need a javascript-file which I wrote for this tutorial.

You need to upload this script with ftp into your child themes folder or you can copy and paste the script into your Divi options.

 

Playlist

I hope that ET will update the audio module with playlists. To paste several players on one site was not what I was looking for. So I created my own playlist with buttons. For that we need a “text-module” for information and a “code-module” for the buttons.

Code for the buttons

We need one “button” for one title. Every button has it’s own “data-music” attribute (don’t change “data-music” because this is important for the script) which will fade in or out the players. A class will help to design the buttons. In my case I used as data-attribute m1, m2, m4 … m1 is for track 1, m2 for track 2 and so on (m1, m2 … can be changed).

<button class="auddioff-play-btn" data-music="m1">Deep Blue</button> 
<button class="auddioff-play-btn" data-music="m2">Spacewalk</button> 
<button class="auddioff-play-btn" data-music="m3">Forest</button> 
<button class="auddioff-play-btn" data-music="m4">Dreamrhythm</button>
CSS code for the buttons

I wanted design my playlist similar to iTunes on iPhone. I wanted also the playlist to be comfortable for everyone to use. So here is my code for the button styling. You can change the style in whatever you like to create your own design.

.auddioff-play-btn, .auddioff-play-btn button {
 background: #ffffff;
 border-color: #bababa;
 border-style: solid;
 border-width: 0 0 1px 0;
 color: #d1005a;
 cursor: pointer;
 display: inline-block;
 font-family: "myriad-pro",Open Sans,Arial,sans-serif;
 font-size: 2em;
 font-weight: 300;
 padding: 0 0 10px;
 text-align: left;
 width: 100%;
 }

/*---Code für das Symbol rechts außen eines jeden Buttons---*/
.auddioff-play-btn::after {
    content: "\35";
    font-family: "ETmodules";
    margin-top: 8px;
    position: absolute;
    right: 0;
    color: #ababab;
}

The audio-container

For the audio module we need an indipendent “section”.  The standard audio module is nice designed so we need to put in all the information of our tracks – artist, cover and the mp3 file. And we need a “code-module” for the “close-button”. So every track has it’s own section with it’s own ID. You can create your first section and save this section into your library. This makes it easier to create several tracks.

Every track-section needs an independent ID and a class which tells the section to hide or to fade in. So the ID will be the data-music attribute of my buttons. In my case my first sections ID is named m1. My second section has the ID m2 because my second button has the data-music atribute m2. All section will have the class “audio-hidden”.

You can change the attribute m1, m2… in whatever you want. Important is that your section has the same ID like your data-music attribute.

 

Go on and create for every new track a new section with a code module and a audio player module. Create also for every section a button.

The close-Button

We also want to close the player so we need a close button inside a “code-module”. The button will have the same “data-music” attribute like the playlist buttons. So the close button of my first tracks will have the attribute m1 and so on.

<button class="audio-close-btn" data-music="m1">Close</button>
CSS for the close-button
.audio-close-btn, .audio-close-btn button {
    cursor: pointer;
    padding: 0;
    margin: 0;
    color: #d1005a;
    font-family: "myriad-pro",Open Sans,Arial,sans-serif;
    font-size: 1.2em;
    background: transparent;
    border: none;
}

.audio-close-btn::after {
    content: "\33";
    display: block;
    font-family: "ETmodules";
    font-size: 2em;
    left: 0;
    position: relative;
    top: -15px;
}
CSS for fade in and fade out of the player

First of all the player will be invisible. So we need some css to show our players and to hide our players. You can change the code to create your own fade effects. Paste your code inside the styles of your child-theme or in divi options genera custom css.

.audio-hidden { /*---Container geschlossen---*/
 -webkit-transition: all 0.8s ease-in-out 0s;
 transition: all 0.8s ease-in-out 0s;
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 position: fixed;
 z-index: -1;
 width: 100%;
 height: 100%;
 top: 40px;
 left: 0;
 right: 0;
 margin: 0 auto;
 }

.audio-shown { /*---Container sichtbar---*/
 -webkit-transition: all 0.8s ease-in-out 0s;
 transition: all 0.8s ease-in-out 0s;
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 position: fixed;
 z-index: 999999;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0;
 right: 0;
 margin: 0 auto;
 overflow: scroll;
 }

Call the java-script

At the end of your page you need a code-module so you can call the java-file. If you paste the code inside the divi-options you can skip this part. Be aware that your path to the destination of your java-file is correct. This can be different depending on how you created your child theme.

<script type="text/javascript" src="/wp-content/themes/Divi-child/audioff-fade.js"></script>

Conclusion

I wrote also some css for the audio module to create my own style. This tutorial will not replace our traditional music apps on a smartphone but you can do some great creations with this technique. You can place a buy button with a link to itunes or bandcamp to every track or you can modify the java a bit and instead of a play-module you can paste in a soundcloud playlist.
I also modified the script so the title will be played automatically which is not common on smartphones because to prevent you to use to much data traffic. So if you do not want the titles to play automatically you need also to modify the script.

Again to understand the script:
A button gets the “data-music” attribute m1. The section which should be fade in by the button is getting the ID m1 and the close button of this section is getting the same “data-music” attribute m1 like the button.

On click the script compares the data-music Attribute with the ID’s of the sections and will than the section fade in or out.

 

Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.