Today I have a more in advanced Custom Interaction experiment to share with you. I’ll be building this sleek glass audio player that has an expandable track listing. When the tracks are clicked they will be loaded and automatically begin playing.
Element IDs
All of the core parts of the audio player interface have ID’s assigned that will be used in the custom interactions.
• Artwork thumbnail = #player-artwork
• Play button = #play-btn
• Pause button = #pause-btn
• Playing track title = #play-title
• Playing track artist = #play-artist
• Expand playlist button = #expand-btn
• Playlist = #playlist
• Each Track item in list = #track-1, #track-2, #track-3
• Audio Player Bric = #player
Play Interaction
When the play button (#play-btn) is clicked it will trigger the Play Interaction.
The Play Interaction contains 3 rules.
Pause Interaction
When the pause button (#pause-btn) is clicked it will trigger the Pause Interaction.
The Pause Interaction also contains 3 rules.
Toggle Playlist
When the expand playlist button (#expand-btn) is clicked it will trigger the Toggle Playlist Interaction.
The Toggle Playlist Interaction contains 2 rules.
Load Track
The Load Track Interaction is assigned to each track list item (#track-1, #track-2, #track-3) in the play list (#playlist) so that it is triggered when the item is clicked. Each track list item has 5 custom data attributes assigned that will be used within the Load Track Interaction with the help of the data() short code. The value of these data attributes is unique for each track list item.
The Load Track Interaction has 7 rules. Five of these rules use the data attributes assigned to the relevant list item which will trigger the interaction.
Always Export
Only one of the mp3 audio files is used on the page in the Audio Player Bric (#player), this means we need to ensure all used audio files are set to Always Export in the Asset Manager. (requires Blocs for Mac 6.1.3).
Mission Complete
That’s it, all of the logic for the audio player is now set up. I appreciate this is a more complex use case for Custom Interactions but it demonstrates what is possible without using code 
.
Download Example Project
Glass Audio Player Experiment - 
Requires Blocs v6.1.3 minimum
Norm, you didn’t explain how to create the sleek glass styling?
Make yourself a nice cup of coffee / tea, open the example project 
and take a look at the classes 
. The glass effect is created with a subtle mix of background Blur filters, semi-transparent fills and box shadows.
